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 = {
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 ( return (
<Setting {...props}> <Setting {...this.props}>
<p class="info"> <p class="info">
Anonymizes usernames by replacing them with "Anonymous #". Anonymizes usernames by replacing them with "Anonymous #".
<br /> <br />
Note that User Labels and Username Colors will still be applied to any Note that User Labels and Username Colors will still be applied to any
usernames as normal. usernames as normal.
</p> </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> </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,