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";
|
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>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue