1
Fork 0

Add the storage and options UI for different Anonymize Usernames replacement types.

This commit is contained in:
Bauke 2023-08-10 17:52:01 +02:00
parent e0f8123334
commit dc499be4b7
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
2 changed files with 83 additions and 11 deletions

View File

@ -1,14 +1,70 @@
import {Component} from "preact";
import {fromStorage, Feature} from "../../storage/exports.js";
import {Setting, type SettingProps} from "./index.js"; import {Setting, type SettingProps} from "./index.js";
export function AnonymizeUsernamesSetting(props: SettingProps) { type State = {
return ( data?: Awaited<ReturnType<typeof fromStorage<Feature.AnonymizeUsernames>>>;
<Setting {...props}> };
<p class="info">
Anonymizes usernames by replacing them with "Anonymous #". export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
<br /> constructor(props: SettingProps) {
Note that User Labels and Username Colors will still be applied to any super(props);
usernames as normal.
</p> this.state = {
</Setting> 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>
);
}
} }

View File

@ -11,6 +11,13 @@ export * from "./hide-topics.js";
export * from "./username-color.js"; export * from "./username-color.js";
export * from "./user-label.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. * The data stored for the Hide Votes feature.
*/ */
@ -73,6 +80,15 @@ export const storageValues = {
value: false, value: false,
storage: browser.storage.sync, 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.HideTopics]: collectHideTopicsData(),
[Feature.HideVotes]: createValue({ [Feature.HideVotes]: createValue({
deserialize: (input) => JSON.parse(input) as HideVotesData, deserialize: (input) => JSON.parse(input) as HideVotesData,