1
Fork 0
tildes-reextended/source/options/components/anonymize-usernames.tsx

71 lines
1.8 KiB
TypeScript
Raw Normal View History

import {Component} from "preact";
import {fromStorage, Feature} from "../../storage/exports.js";
2023-06-23 10:52:03 +00:00
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) {
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;
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}>
<option
selected={replacementType === "numerical"}
value="numerical"
>
Numerical
</option>
<option selected={replacementType === "hashed"} value="hashed">
Hashed
</option>
</select>
</li>
</ul>
</Setting>
);
}
}