75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import {Component} from "preact";
|
|
import {
|
|
fromStorage,
|
|
isReplacementType,
|
|
Feature,
|
|
ReplacementType,
|
|
} from "../../storage/exports.js";
|
|
import {Setting, type SettingProps} from "./index.js";
|
|
|
|
type State = {
|
|
data?: Awaited<ReturnType<typeof fromStorage<Feature.AnonymizeUsernames>>>;
|
|
};
|
|
|
|
export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
|
|
constructor(props: SettingProps) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
data: undefined,
|
|
};
|
|
}
|
|
|
|
async componentDidMount(): Promise<void> {
|
|
const data = await fromStorage(Feature.AnonymizeUsernames);
|
|
this.setState({data});
|
|
}
|
|
|
|
replacementTypeChanged = async (event: Event) => {
|
|
const newValue = (event.target as HTMLInputElement)!.value;
|
|
const {data} = this.state;
|
|
if (data === undefined || !isReplacementType(newValue)) {
|
|
return;
|
|
}
|
|
|
|
data.value.replacementType = newValue;
|
|
await data.save();
|
|
this.setState({data});
|
|
};
|
|
|
|
render() {
|
|
const {data} = this.state;
|
|
if (data === undefined) {
|
|
return;
|
|
}
|
|
|
|
const replacementType = data.value.replacementType;
|
|
const replacementTypeOptions = Object.values(ReplacementType).map((key) => (
|
|
<option selected={key === replacementType} value={key}>
|
|
{key
|
|
.replace(/-/g, " ")
|
|
.replace(/(\b[a-z])/gi, (character) => character.toUpperCase())}
|
|
</option>
|
|
));
|
|
|
|
return (
|
|
<Setting {...this.props}>
|
|
<p class="info">
|
|
Anonymizes usernames by replacing them with "Anonymous #".
|
|
<br />
|
|
Note that User Labels and Username Colors will still be applied to any
|
|
usernames as normal.
|
|
</p>
|
|
|
|
<ul class="checkbox-list">
|
|
<li>
|
|
<select onChange={this.replacementTypeChanged}>
|
|
{replacementTypeOptions}
|
|
</select>
|
|
</li>
|
|
</ul>
|
|
</Setting>
|
|
);
|
|
}
|
|
}
|