diff --git a/source/options/components/anonymize-usernames.tsx b/source/options/components/anonymize-usernames.tsx index 8ff86b0..e21498a 100644 --- a/source/options/components/anonymize-usernames.tsx +++ b/source/options/components/anonymize-usernames.tsx @@ -1,14 +1,70 @@ +import {Component} from "preact"; +import {fromStorage, Feature} from "../../storage/exports.js"; import {Setting, type SettingProps} from "./index.js"; -export function AnonymizeUsernamesSetting(props: SettingProps) { - return ( - -

- Anonymizes usernames by replacing them with "Anonymous #". -
- Note that User Labels and Username Colors will still be applied to any - usernames as normal. -

-
- ); +type State = { + data?: Awaited>>; +}; + +export class AnonymizeUsernamesSetting extends Component { + constructor(props: SettingProps) { + super(props); + + this.state = { + data: undefined, + }; + } + + async componentDidMount(): Promise { + 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 ( + +

+ Anonymizes usernames by replacing them with "Anonymous #". +
+ Note that User Labels and Username Colors will still be applied to any + usernames as normal. +

+ +
    +
  • + +
  • +
+
+ ); + } } diff --git a/source/storage/exports.ts b/source/storage/exports.ts index e856a5e..f29625a 100644 --- a/source/storage/exports.ts +++ b/source/storage/exports.ts @@ -11,6 +11,13 @@ export * from "./hide-topics.js"; export * from "./username-color.js"; export * from "./user-label.js"; +/** + * The data stored for the Anonymize Usernames feature. + */ +export type AnonymizeUsernamesData = { + replacementType: "numerical" | "hashed"; +}; + /** * The data stored for the Hide Votes feature. */ @@ -73,6 +80,15 @@ export const storageValues = { value: false, storage: browser.storage.sync, }), + [Feature.AnonymizeUsernames]: createValue({ + deserialize: (input) => JSON.parse(input) as AnonymizeUsernamesData, + serialize: (input) => JSON.stringify(input), + key: Feature.AnonymizeUsernames, + value: { + replacementType: "numerical", + }, + storage: browser.storage.sync, + }), [Feature.HideTopics]: collectHideTopicsData(), [Feature.HideVotes]: createValue({ deserialize: (input) => JSON.parse(input) as HideVotesData,