Add the storage and options UI for different Anonymize Usernames replacement types.
This commit is contained in:
parent
e0f8123334
commit
dc499be4b7
|
@ -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 (
|
||||
<Setting {...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>
|
||||
</Setting>
|
||||
);
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue