mirror of
https://github.com/XFox111/PasswordGeneratorExtension.git
synced 2026-04-22 08:08:01 +03:00
Major 5.0 (#469)
* Advanced generator, UI overhaul (#449) * Major overhaul: - Added advanced generator - Removed "Insert and copy" feature - Moved settings to extension options - General refactoring * Updated custom character options for default generator (#447) * Added state save for advanced generator mode * Fixed state save for advanced password generator * Updated extension description * Minor UI fixes: - Fixed Options UI not displaying in Google Chrome - Fixed Quick Options menus overflowing on some locales - Fixed Advanced generator configuration UI clipping when window height is too small - Fixed divider in Options UI taking up all available space * Minor UI/UX changes and fixes: - Fixed locale in Advanced generator toast notifications - Added toast notification for copying a single password in Advanced generator - Moved custom characters input lables to placeholders - Fixed minor type issues - Removed duplicate "About" text - Fixed input fields alignment in Options - Added "disabled" state for "Include Custom" option in Quick settings * Bump @typescript-eslint/parser from 8.16.0 to 8.19.1 (#468) Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 8.16.0 to 8.19.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.19.1/packages/parser) --- updated-dependencies: - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @eslint/js from 9.16.0 to 9.18.0 (#467) Bumps [@eslint/js](https://github.com/eslint/eslint/tree/HEAD/packages/js) from 9.16.0 to 9.18.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/commits/v9.18.0/packages/js) --- updated-dependencies: - dependency-name: "@eslint/js" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @fluentui/react-components from 9.56.3 to 9.57.0 (#466) Bumps [@fluentui/react-components](https://github.com/microsoft/fluentui) from 9.56.3 to 9.57.0. - [Release notes](https://github.com/microsoft/fluentui/releases) - [Changelog](https://github.com/microsoft/fluentui/blob/master/azure-pipelines.release.yml) - [Commits](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.56.3...@fluentui/react-components_v9.57.0) --- updated-dependencies: - dependency-name: "@fluentui/react-components" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump wxt from 0.19.17 to 0.19.24 (#465) Bumps [wxt](https://github.com/wxt-dev/wxt) from 0.19.17 to 0.19.24. - [Release notes](https://github.com/wxt-dev/wxt/releases) - [Commits](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.17...wxt-v0.19.24) --- updated-dependencies: - dependency-name: wxt dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump eslint from 9.16.0 to 9.18.0 (#464) Bumps [eslint](https://github.com/eslint/eslint) from 9.16.0 to 9.18.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.16.0...v9.18.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump eslint-plugin-react from 7.37.2 to 7.37.4 (#463) Bumps [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) from 7.37.2 to 7.37.4. - [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases) - [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/CHANGELOG.md) - [Commits](https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.37.2...v7.37.4) --- updated-dependencies: - dependency-name: eslint-plugin-react dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Eugene Fox <eugene.xfox@outlook.com> * Bump typescript from 5.7.2 to 5.7.3 (#462) Bumps [typescript](https://github.com/microsoft/TypeScript) from 5.7.2 to 5.7.3. - [Release notes](https://github.com/microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](https://github.com/microsoft/TypeScript/compare/v5.7.2...v5.7.3) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Eugene Fox <eugene.xfox@outlook.com> * Bump @typescript-eslint/eslint-plugin from 8.16.0 to 8.19.1 (#461) Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 8.16.0 to 8.19.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.19.1/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump wdzeng/chrome-extension from 1.2.4 to 1.3.0 (#450) * Bump wdzeng/chrome-extension from 1.2.4 to 1.3.0 Bumps [wdzeng/chrome-extension](https://github.com/wdzeng/chrome-extension) from 1.2.4 to 1.3.0. - [Release notes](https://github.com/wdzeng/chrome-extension/releases) - [Commits](https://github.com/wdzeng/chrome-extension/compare/v1.2.4...v1.3.0) --- updated-dependencies: - dependency-name: wdzeng/chrome-extension dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * Optimized CD workflow --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Eugene Fox <eugene@xfox111.net> * Bump @fluentui/react-icons from 2.0.266 to 2.0.270 (#458) Bumps [@fluentui/react-icons](https://github.com/microsoft/fluentui-system-icons) from 2.0.266 to 2.0.270. - [Changelog](https://github.com/microsoft/fluentui-system-icons/blob/main/fluentui-android-system-icons-release.yml) - [Commits](https://github.com/microsoft/fluentui-system-icons/commits) --- updated-dependencies: - dependency-name: "@fluentui/react-icons" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @wxt-dev/module-react from 1.1.2 to 1.1.3 (#455) Bumps [@wxt-dev/module-react](https://github.com/wxt-dev/wxt/tree/HEAD/packages/module-react) from 1.1.2 to 1.1.3. - [Release notes](https://github.com/wxt-dev/wxt/releases) - [Changelog](https://github.com/wxt-dev/wxt/blob/main/packages/module-react/CHANGELOG.md) - [Commits](https://github.com/wxt-dev/wxt/commits/module-react-v1.1.3/packages/module-react) --- updated-dependencies: - dependency-name: "@wxt-dev/module-react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump globals from 15.12.0 to 15.14.0 (#452) Bumps [globals](https://github.com/sindresorhus/globals) from 15.12.0 to 15.14.0. - [Release notes](https://github.com/sindresorhus/globals/releases) - [Commits](https://github.com/sindresorhus/globals/compare/v15.12.0...v15.14.0) --- updated-dependencies: - dependency-name: globals dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
Eugene Fox
GitHub
@@ -0,0 +1,59 @@
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
height: "100vh",
|
||||
gap: tokens.spacingHorizontalXL,
|
||||
padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXL}`,
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
smallRoot:
|
||||
{
|
||||
display: "flex",
|
||||
flexFlow: "column-reverse",
|
||||
overflowX: "hidden",
|
||||
overflowY: "auto",
|
||||
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
|
||||
},
|
||||
hideScroll:
|
||||
{
|
||||
overflowY: "visible",
|
||||
maxHeight: "unset",
|
||||
},
|
||||
configRoot:
|
||||
{
|
||||
maxHeight: "90vh",
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
gap: tokens.spacingVerticalM,
|
||||
width: "100%",
|
||||
maxWidth: "480px",
|
||||
borderRadius: tokens.borderRadiusLarge,
|
||||
boxShadow: tokens.shadow4,
|
||||
backgroundColor: tokens.colorNeutralBackground2,
|
||||
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
|
||||
margin: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
|
||||
boxSizing: "border-box",
|
||||
justifySelf: "center",
|
||||
alignSelf: "center",
|
||||
overflowY: "auto",
|
||||
},
|
||||
switch:
|
||||
{
|
||||
margin: `${tokens.spacingVerticalXL} ${tokens.spacingVerticalNone}`,
|
||||
},
|
||||
listRoot:
|
||||
{
|
||||
width: "100%",
|
||||
maxWidth: "840px",
|
||||
alignSelf: "center",
|
||||
justifySelf: "center",
|
||||
padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXL}`,
|
||||
boxSizing: "border-box",
|
||||
overflowY: "auto",
|
||||
maxHeight: "100%",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
import DoubleLabledSwitch from "@/shared/DoubleLabeledSwitch";
|
||||
import { mergeClasses, Toaster } from "@fluentui/react-components";
|
||||
import { ReactElement } from "react";
|
||||
import { useMediaQuery } from "react-responsive";
|
||||
import PasswordList from "./components/PasswordList";
|
||||
import { useStyles } from "./Page.styles";
|
||||
import PassphraseSection from "./sections/PassphraseSection";
|
||||
import PasswordSection from "./sections/PasswordSection";
|
||||
|
||||
export default function Page(): ReactElement
|
||||
{
|
||||
const [isPassphrase, setIsPassphrase] = useState<boolean | null>(null);
|
||||
const [passwords, setPasswords] = useState<string[]>([]);
|
||||
const isSmall = useMediaQuery({ query: "(max-width: 1000px)" });
|
||||
|
||||
const cls = useStyles();
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
advancedPassphraseSelected.getValue().then(setIsPassphrase);
|
||||
const unwatch = advancedPassphraseSelected.watch(setIsPassphrase);
|
||||
|
||||
return () => unwatch();
|
||||
}, []);
|
||||
|
||||
if (isPassphrase === null)
|
||||
return <></>;
|
||||
|
||||
return (
|
||||
<main className={ mergeClasses(cls.root, isSmall && cls.smallRoot) }>
|
||||
<PasswordList
|
||||
passwords={ passwords }
|
||||
className={ mergeClasses(cls.listRoot, isSmall && cls.hideScroll) } />
|
||||
|
||||
<article className={ mergeClasses(cls.configRoot, isSmall && cls.hideScroll) }>
|
||||
<DoubleLabledSwitch outerRoot={ { className: cls.switch } }
|
||||
checked={ isPassphrase }
|
||||
onChange={ (_, e) => advancedPassphraseSelected.setValue(e.checked) }
|
||||
offLabel={ i18n.t("advanced.password.title") }
|
||||
onLabel={ i18n.t("advanced.passphrase.title") } />
|
||||
|
||||
{ isPassphrase ?
|
||||
<PassphraseSection onGenerated={ setPasswords } />
|
||||
:
|
||||
<PasswordSection onGenerated={ setPasswords } />
|
||||
}
|
||||
</article>
|
||||
<Toaster />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export type GeneratorProps =
|
||||
{
|
||||
onGenerated: (passwords: string[]) => void;
|
||||
};
|
||||
|
||||
const advancedPassphraseSelected = storage.defineItem<boolean>("sync:AdvancedPassphraseSelected", { fallback: false });
|
||||
@@ -0,0 +1,22 @@
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: tokens.spacingVerticalXL,
|
||||
},
|
||||
actionRoot:
|
||||
{
|
||||
display: "flex",
|
||||
gap: tokens.spacingHorizontalM,
|
||||
alignSelf: "center",
|
||||
},
|
||||
bulkRoot:
|
||||
{
|
||||
display: "grid",
|
||||
alignItems: "center",
|
||||
gridTemplateColumns: "24px 24px 56px",
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,91 @@
|
||||
import { Button, Input, InputOnChangeData, MessageBar, MessageBarBody, MessageBarTitle, Text, Toast, ToastTitle, useToastController } from "@fluentui/react-components";
|
||||
import { bundleIcon, Key24Regular, Save20Filled, Save20Regular } from "@fluentui/react-icons";
|
||||
import { PropsWithChildren, ReactElement } from "react";
|
||||
import { useStyles } from "./GeneratorForm.styles";
|
||||
|
||||
export default function GeneratorForm(props: GeneratorFormProps): ReactElement
|
||||
{
|
||||
const [passwordCount, private_setPasswordCount] = useState<number | null>(5);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const toaster = useToastController();
|
||||
|
||||
const cls = useStyles();
|
||||
const SaveIcon = bundleIcon(Save20Filled, Save20Regular);
|
||||
|
||||
const setPasswordCount = useCallback((_: any, e: InputOnChangeData) =>
|
||||
{
|
||||
const n = parseInt(e.value ?? "1");
|
||||
private_setPasswordCount(isNaN(n) || n < 1 ? null : Math.min(n, 1000));
|
||||
}, []);
|
||||
|
||||
const onSubmit = useCallback((args: React.FormEvent<HTMLFormElement>) =>
|
||||
{
|
||||
args.preventDefault();
|
||||
|
||||
try
|
||||
{
|
||||
setError(null);
|
||||
props.onGenerate(passwordCount ?? 1);
|
||||
}
|
||||
catch (ex)
|
||||
{
|
||||
setError((ex as Error).message);
|
||||
}
|
||||
}, [props.onGenerate, passwordCount]);
|
||||
|
||||
const onSave = useCallback(async () =>
|
||||
{
|
||||
props.onSave();
|
||||
await browser.storage.sync.set({ AdvancedBulkCount: passwordCount ?? 5 });
|
||||
|
||||
toaster.dispatchToast(
|
||||
<Toast>
|
||||
<ToastTitle>{ i18n.t("advanced.saved_msg") }</ToastTitle>
|
||||
</Toast>,
|
||||
{
|
||||
intent: "success",
|
||||
timeout: 1000
|
||||
}
|
||||
);
|
||||
}, [props.onSave, toaster, passwordCount]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
browser.storage.sync.get("AdvancedBulkCount").then(({ AdvancedBulkCount }) =>
|
||||
private_setPasswordCount(AdvancedBulkCount as number ?? 5)
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={ onSubmit } className={ cls.root }>
|
||||
{ props.children }
|
||||
|
||||
{ error &&
|
||||
<MessageBar intent="error">
|
||||
<MessageBarBody>
|
||||
<MessageBarTitle>{ error }</MessageBarTitle>
|
||||
</MessageBarBody>
|
||||
</MessageBar>
|
||||
}
|
||||
|
||||
<div className={ cls.actionRoot }>
|
||||
<div className={ cls.bulkRoot }>
|
||||
<Key24Regular />
|
||||
<Text align="center">x</Text>
|
||||
<Input value={ passwordCount?.toString() ?? "" } onChange={ setPasswordCount } />
|
||||
</div>
|
||||
<Button appearance="primary" type="submit">{ i18n.t("advanced.actions.generate") }</Button>
|
||||
</div>
|
||||
|
||||
<Button appearance="subtle" icon={ <SaveIcon /> } onClick={ onSave }>
|
||||
{ i18n.t("advanced.actions.save_config") }
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export type GeneratorFormProps = PropsWithChildren &
|
||||
{
|
||||
onSave: () => void;
|
||||
onGenerate: (count: number) => void;
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
gap: tokens.spacingVerticalS,
|
||||
},
|
||||
copyAll:
|
||||
{
|
||||
alignSelf: "flex-end",
|
||||
minHeight: "32px",
|
||||
},
|
||||
table:
|
||||
{
|
||||
backgroundColor: tokens.colorNeutralBackground2,
|
||||
borderRadius: "16px",
|
||||
overflow: "clip",
|
||||
},
|
||||
row:
|
||||
{
|
||||
"&:last-child":
|
||||
{
|
||||
borderBottom: "none",
|
||||
}
|
||||
},
|
||||
cell:
|
||||
{
|
||||
padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
|
||||
cursor: "pointer",
|
||||
},
|
||||
cellLayout:
|
||||
{
|
||||
overflowX: "auto",
|
||||
},
|
||||
passwordText:
|
||||
{
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
overflowX: "hidden",
|
||||
display: "block",
|
||||
marginRight: "36px",
|
||||
},
|
||||
copyIcon:
|
||||
{
|
||||
verticalAlign: "middle",
|
||||
padding: tokens.spacingHorizontalXL,
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import { bundleIcon, Copy32Regular, CopyFilled, CopyRegular } from "@fluentui/react-icons";
|
||||
import { ReactElement } from "react";
|
||||
import { useStyles } from "./PasswordList.styles";
|
||||
|
||||
export default function PasswordList({ passwords, className }: PasswordListProps): ReactElement
|
||||
{
|
||||
const toaster = fui.useToastController();
|
||||
|
||||
const CopyIcon = bundleIcon(CopyFilled, CopyRegular);
|
||||
const cls = useStyles();
|
||||
|
||||
const copy = (password?: string) =>
|
||||
{
|
||||
navigator.clipboard.writeText(password ?? passwords.join("\n"));
|
||||
toaster.dispatchToast(
|
||||
<fui.Toast>
|
||||
<fui.ToastTitle>{ i18n.t("advanced.copied_msg") }</fui.ToastTitle>
|
||||
</fui.Toast>,
|
||||
{
|
||||
intent: "success",
|
||||
timeout: 1000
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ fui.mergeClasses(cls.root, className) }>
|
||||
{ passwords.length > 0 &&
|
||||
<>
|
||||
<fui.Button className={ cls.copyAll }
|
||||
appearance="subtle" icon={ <CopyIcon /> }
|
||||
onClick={ () => copy() }>
|
||||
|
||||
{ i18n.t("advanced.actions.copy_all") }
|
||||
</fui.Button>
|
||||
|
||||
<fui.Table className={ cls.table }>
|
||||
<fui.TableBody>
|
||||
|
||||
{ passwords.map((password, index) =>
|
||||
<fui.TableRow key={ index } className={ cls.row }
|
||||
onClick={ () => copy(password) }>
|
||||
|
||||
<fui.TableCell className={ cls.cell }>
|
||||
|
||||
<fui.TableCellLayout content={ { className: cls.cellLayout } }>
|
||||
<fui.Tooltip relationship="description" content={ password }>
|
||||
|
||||
<fui.Text className={ cls.passwordText }
|
||||
font="monospace" size={ 600 }>
|
||||
|
||||
{ password }
|
||||
</fui.Text>
|
||||
|
||||
</fui.Tooltip>
|
||||
</fui.TableCellLayout>
|
||||
|
||||
<fui.TableCellActions>
|
||||
<Copy32Regular className={ cls.copyIcon } />
|
||||
</fui.TableCellActions>
|
||||
|
||||
</fui.TableCell>
|
||||
</fui.TableRow>
|
||||
) }
|
||||
|
||||
</fui.TableBody>
|
||||
</fui.Table>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type PasswordListProps =
|
||||
{
|
||||
className?: string;
|
||||
passwords: string[];
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced password generator</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
html,
|
||||
body,
|
||||
#root > .fui-FluentProvider
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
p, h1, h2
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius: 4px;
|
||||
background: light-dark(#d1d1d1, #666666);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: light-dark(#c7c7c7, #757575);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover:active
|
||||
{
|
||||
background: light-dark(#b3b3b3, #6b6b6b);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "../../shared/App";
|
||||
import "./main.css";
|
||||
import Page from "./Page";
|
||||
|
||||
document.title = i18n.t("advanced.title");
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<App>
|
||||
<Page />
|
||||
</App>
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,16 @@
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
gap: tokens.spacingVerticalSNudge,
|
||||
},
|
||||
checkboxes:
|
||||
{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
gap: tokens.spacingVerticalXXS,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
import generatePassphrase, { PassphraseProps } from "@/utils/generators/generatePassphrase";
|
||||
import infoLabel from "@/utils/infoLabel";
|
||||
import { Checkbox, Field, Input, InputOnChangeData } from "@fluentui/react-components";
|
||||
import { ReactElement } from "react";
|
||||
import GeneratorForm from "../components/GeneratorForm";
|
||||
import { GeneratorProps } from "../Page";
|
||||
import { useStyles } from "./PassphraseSection.styles";
|
||||
|
||||
export default function PassphraseSection(props: GeneratorProps): ReactElement
|
||||
{
|
||||
const [wordCount, private_setWordCount] = useState<number | null>(2);
|
||||
const [swapCharacters, setSwapCharacters] = useState<boolean>(false);
|
||||
const [separate, setSeparate] = useState<boolean>(true);
|
||||
const [separator, setSeparator] = useState<string>("");
|
||||
const [allowRepeating, setAllowRepeating] = useState<boolean>(false);
|
||||
const [randomizeCase, setRandomizeCase] = useState<boolean>(false);
|
||||
|
||||
const config = useMemo<PassphraseProps>(() => ({
|
||||
wordCount: wordCount ?? 2,
|
||||
allowRepeating,
|
||||
swapCharacters,
|
||||
randomizeCase,
|
||||
separator: separate ? (separator ? separator : " ") : ""
|
||||
}), [wordCount, allowRepeating, swapCharacters, randomizeCase, separate, separator]);
|
||||
|
||||
const cls = useStyles();
|
||||
|
||||
const setWordCount = useCallback((_: any, e: InputOnChangeData) =>
|
||||
{
|
||||
const n = parseInt(e.value ?? "");
|
||||
private_setWordCount(isNaN(n) || n < 1 ? null : Math.min(n, 100));
|
||||
}, []);
|
||||
|
||||
const saveConfiguration = useCallback(
|
||||
async () => await browser.storage.sync.set({ AdvancedPassphraseOptions: config }),
|
||||
[config]
|
||||
);
|
||||
|
||||
const generate = useCallback((count: number) =>
|
||||
{
|
||||
const passwords: string[] = [];
|
||||
|
||||
for (let i = 0; i < count; i++)
|
||||
passwords.push(generatePassphrase(config));
|
||||
|
||||
props.onGenerated(passwords);
|
||||
}, [config, props.onGenerated]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
browser.storage.sync.get("AdvancedPassphraseOptions").then(({ AdvancedPassphraseOptions }) =>
|
||||
{
|
||||
if (!AdvancedPassphraseOptions)
|
||||
return;
|
||||
|
||||
private_setWordCount(AdvancedPassphraseOptions.wordCount ?? 2);
|
||||
setAllowRepeating(AdvancedPassphraseOptions.allowRepeating);
|
||||
setSwapCharacters(AdvancedPassphraseOptions.swapCharacters);
|
||||
setRandomizeCase(AdvancedPassphraseOptions.randomizeCase);
|
||||
setSeparate(!!AdvancedPassphraseOptions.separator);
|
||||
setSeparator(AdvancedPassphraseOptions.separator ?? "");
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<GeneratorForm onGenerate={ generate } onSave={ saveConfiguration }>
|
||||
<div className={ cls.root }>
|
||||
<Field label={ i18n.t("advanced.passphrase.length") }>
|
||||
<Input value={ wordCount?.toString() ?? "" } onChange={ setWordCount } />
|
||||
</Field>
|
||||
<div className={ cls.checkboxes }>
|
||||
<Checkbox label={ i18n.t("advanced.passphrase.replace") }
|
||||
checked={ swapCharacters } onChange={ (_, e) => setSwapCharacters(e.checked as boolean) } />
|
||||
<Checkbox label={ i18n.t("advanced.passphrase.random_case") }
|
||||
checked={ randomizeCase } onChange={ (_, e) => setRandomizeCase(e.checked as boolean) } />
|
||||
<Checkbox label={ infoLabel(i18n.t("advanced.passphrase.allow_repat.label"), i18n.t("advanced.passphrase.allow_repat.hint")) }
|
||||
checked={ allowRepeating } onChange={ (_, e) => setAllowRepeating(e.checked as boolean) } />
|
||||
|
||||
<div>
|
||||
<Checkbox label={ infoLabel(i18n.t("advanced.passphrase.separate_words.label"), i18n.t("advanced.passphrase.separate_words.hint")) }
|
||||
checked={ separate } onChange={ (_, e) => setSeparate(e.checked as boolean) } />
|
||||
<Input disabled={ !separate } size="small"
|
||||
value={ separator } onChange={ (_, e) => setSeparator(e.value) } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GeneratorForm>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import { CharacterHints, generatePassword } from "@/utils/generators/generatePassword";
|
||||
import infoLabel from "@/utils/infoLabel";
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import { ReactElement } from "react";
|
||||
import { GeneratorProps } from "../Page";
|
||||
import GeneratorForm from "../components/GeneratorForm";
|
||||
|
||||
// TODO: needs refactoring
|
||||
export default function PasswordSection(props: GeneratorProps): ReactElement
|
||||
{
|
||||
const [state, private_setState] = useState<PasswordSectionState>({
|
||||
length: 8,
|
||||
enableUppercase: true, uppercaseCount: 1,
|
||||
enableLowercase: true, lowercaseCount: 1,
|
||||
enableNumeric: true, numericCount: 1,
|
||||
enableSpecial: true, specialCount: 1,
|
||||
enableCustom: false, customCount: 1, customSet: "",
|
||||
|
||||
excludeSimilar: true,
|
||||
excludeAmbiguous: true,
|
||||
excludeRepeating: false,
|
||||
excludeCustom: false, excludeCustomSet: ""
|
||||
});
|
||||
|
||||
const cls = useStyles();
|
||||
|
||||
const setState = useCallback((newState: Partial<PasswordSectionState>) =>
|
||||
{
|
||||
private_setState({ ...state, ...newState });
|
||||
}, [state]);
|
||||
|
||||
const setLength = useCallback((_: any, e: fui.InputOnChangeData) =>
|
||||
{
|
||||
const n = parseInt(e.value ?? "");
|
||||
setState({ length: isNaN(n) || n < 1 ? null : n });
|
||||
}, [state]);
|
||||
|
||||
const saveConfiguration = useCallback(
|
||||
async () => await browser.storage.sync.set({ AdvancedPasswordOptions: state }),
|
||||
[state]
|
||||
);
|
||||
|
||||
const generate = useCallback((count: number) =>
|
||||
{
|
||||
const passwords: string[] = [];
|
||||
|
||||
for (let i = 0; i < count; i++)
|
||||
passwords.push(generatePassword({
|
||||
length: state.length ?? 8,
|
||||
custom: state.enableCustom ? state.customCount ?? 1 : 0,
|
||||
customSet: state.customSet,
|
||||
numeric: state.enableNumeric ? state.numericCount ?? 1 : 0,
|
||||
special: state.enableSpecial ? state.specialCount ?? 1 : 0,
|
||||
uppercase: state.enableUppercase ? state.uppercaseCount ?? 1 : 0,
|
||||
lowercase: state.enableLowercase ? state.lowercaseCount ?? 1 : 0,
|
||||
excludeAmbiguous: state.excludeAmbiguous,
|
||||
excludeCustom: state.excludeCustom ? state.excludeCustomSet : "",
|
||||
excludeRepeating: state.excludeRepeating,
|
||||
excludeSimilar: state.excludeSimilar,
|
||||
}));
|
||||
|
||||
props.onGenerated(passwords);
|
||||
}, [state, props.onGenerated]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
browser.storage.sync.get("AdvancedPasswordOptions").then(({ AdvancedPasswordOptions }) =>
|
||||
private_setState({ ...state, ...AdvancedPasswordOptions as PasswordSectionState }));
|
||||
}, []);
|
||||
|
||||
const checkboxControls = useCallback((key: keyof PasswordSectionState): Partial<fui.CheckboxProps> => ({
|
||||
checked: state[key] as boolean,
|
||||
onChange: (_, e) => setState({ [key]: e.checked as boolean })
|
||||
}), [state]);
|
||||
|
||||
const minInputControls = useCallback((enabledKey: keyof PasswordSectionState, key: keyof PasswordSectionState): Partial<fui.InputProps> => ({
|
||||
size: "small",
|
||||
disabled: !state[enabledKey],
|
||||
value: state[key]?.toString() ?? "",
|
||||
onChange: (_, e) => setState({ [key]: parseCount(e.value) })
|
||||
}), [state]);
|
||||
|
||||
return (
|
||||
<GeneratorForm onGenerate={ generate } onSave={ saveConfiguration }>
|
||||
<fui.Field label={ i18n.t("advanced.password.length") }>
|
||||
<fui.Input value={ state.length?.toString() ?? "" } onChange={ setLength } />
|
||||
</fui.Field>
|
||||
<fui.Table size="small" as="div">
|
||||
<fui.TableHeader as="div">
|
||||
<fui.TableRow as="div">
|
||||
<fui.TableHeaderCell as="div">{ i18n.t("common.sections.include") }</fui.TableHeaderCell>
|
||||
<fui.TableHeaderCell as="div">{ i18n.t("advanced.password.min_of_type") }</fui.TableHeaderCell>
|
||||
</fui.TableRow>
|
||||
</fui.TableHeader>
|
||||
<fui.TableBody as="div">
|
||||
<Row>
|
||||
<fui.Checkbox label={ i18n.t("common.characters.uppercase") } { ...checkboxControls("enableUppercase") } />
|
||||
<fui.Input { ...minInputControls("enableUppercase", "uppercaseCount") } />
|
||||
</Row>
|
||||
<Row>
|
||||
<fui.Checkbox label={ i18n.t("common.characters.lowercase") } { ...checkboxControls("enableLowercase") } />
|
||||
<fui.Input { ...minInputControls("enableLowercase", "lowercaseCount") } />
|
||||
</Row>
|
||||
<Row>
|
||||
<fui.Checkbox label={ i18n.t("common.characters.numeric") } { ...checkboxControls("enableNumeric") } />
|
||||
<fui.Input { ...minInputControls("enableNumeric", "numericCount") } />
|
||||
</Row>
|
||||
<Row>
|
||||
<fui.Checkbox label={ infoLabel(i18n.t("common.characters.special"), CharacterHints.special) } { ...checkboxControls("enableSpecial") } />
|
||||
<fui.Input { ...minInputControls("enableSpecial", "specialCount") } />
|
||||
</Row>
|
||||
<Row>
|
||||
<>
|
||||
<fui.Checkbox { ...checkboxControls("enableCustom") } />
|
||||
<fui.Input size="small" disabled={ !state.enableCustom }
|
||||
placeholder={ i18n.t("common.characters.custom") }
|
||||
value={ state.customSet } onChange={ (_, e) => setState({ customSet: e.value }) } />
|
||||
</>
|
||||
<fui.Input { ...minInputControls("enableCustom", "customCount") } />
|
||||
</Row>
|
||||
</fui.TableBody>
|
||||
</fui.Table>
|
||||
|
||||
<section className={ cls.section }>
|
||||
<fui.Text>{ i18n.t("common.sections.exclude") }</fui.Text>
|
||||
<fui.Checkbox label={ infoLabel(i18n.t("common.characters.similar"), CharacterHints.similar) } { ...checkboxControls("excludeSimilar") } />
|
||||
<fui.Checkbox label={ infoLabel(i18n.t("common.characters.ambiguous"), CharacterHints.ambiguous) } disabled={ !state.enableSpecial } { ...checkboxControls("excludeAmbiguous") } />
|
||||
<fui.Checkbox label={ infoLabel(i18n.t("common.characters.repeating.label"), i18n.t("common.characters.repeating.hint")) } { ...checkboxControls("excludeRepeating") } />
|
||||
<div>
|
||||
<fui.Checkbox { ...checkboxControls("excludeCustom") } />
|
||||
<fui.Input size="small" disabled={ !state.excludeCustom }
|
||||
placeholder={ i18n.t("common.characters.custom") }
|
||||
value={ state.excludeCustomSet } onChange={ (_, e) => setState({ excludeCustomSet: e.value }) } />
|
||||
</div>
|
||||
</section>
|
||||
</GeneratorForm>
|
||||
);
|
||||
}
|
||||
|
||||
function parseCount(value: string): number | null
|
||||
{
|
||||
const n = parseInt(value);
|
||||
return isNaN(n) || n < 1 ? null : Math.min(n, 100);
|
||||
};
|
||||
|
||||
function Row(props: { children: ReactElement[]; }): ReactElement
|
||||
{
|
||||
return (
|
||||
<fui.TableRow as="div">
|
||||
{ props.children.map((i, index) =>
|
||||
<fui.TableCell key={ index } as="div">
|
||||
{ i }
|
||||
</fui.TableCell>
|
||||
) }
|
||||
</fui.TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = fui.makeStyles({
|
||||
section:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
});
|
||||
|
||||
type PasswordSectionState =
|
||||
{
|
||||
length: number | null;
|
||||
enableUppercase: boolean;
|
||||
uppercaseCount: number | null;
|
||||
enableLowercase: boolean;
|
||||
lowercaseCount: number | null;
|
||||
enableNumeric: boolean;
|
||||
numericCount: number | null;
|
||||
enableSpecial: boolean;
|
||||
specialCount: number | null;
|
||||
enableCustom: boolean;
|
||||
customCount: number | null;
|
||||
|
||||
excludeSimilar: boolean;
|
||||
excludeAmbiguous: boolean;
|
||||
excludeRepeating: boolean;
|
||||
excludeCustom: boolean;
|
||||
|
||||
excludeCustomSet: string;
|
||||
customSet: string;
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
export default defineBackground(() => main());
|
||||
|
||||
async function main(): Promise<void>
|
||||
{
|
||||
await browser.contextMenus.removeAll();
|
||||
browser.contextMenus.onClicked.addListener(() => browser.action.openPopup());
|
||||
|
||||
const showMenu: boolean = (await storage.getItem<boolean>("sync:ContextMenu", { fallback: true }))!;
|
||||
updateMenus(showMenu);
|
||||
|
||||
storage.watch<boolean>("sync:ContextMenu", e => updateMenus(e!));
|
||||
}
|
||||
|
||||
async function updateMenus(showMenus: boolean): Promise<void>
|
||||
{
|
||||
await browser.contextMenus.removeAll();
|
||||
|
||||
if (showMenus)
|
||||
browser.contextMenus.create({
|
||||
id: "password-generator",
|
||||
title: i18n.t("manifest.name"),
|
||||
contexts: ["all"],
|
||||
});
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
export default defineContentScript({
|
||||
matches: ["<all_urls>"],
|
||||
runAt: "document_idle",
|
||||
main()
|
||||
{
|
||||
console.log("Password Generator: script loaded");
|
||||
|
||||
browser.runtime.onMessage.addListener((message: string, _, sendResponse) =>
|
||||
{
|
||||
if (message === "probe")
|
||||
// @ts-expect-error sendResponse has incorrect signature
|
||||
sendResponse(document.querySelectorAll("form input[type=password]").length);
|
||||
else
|
||||
document
|
||||
.querySelectorAll("form input[type=password]")
|
||||
.forEach(el => {
|
||||
(el as HTMLInputElement).value = message;
|
||||
(el as HTMLInputElement).focus();
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: tokens.spacingVerticalM,
|
||||
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
|
||||
},
|
||||
horizontalContainer:
|
||||
{
|
||||
display: "flex",
|
||||
gap: tokens.spacingHorizontalSNudge,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import { bmcDarkTheme, bmcLightTheme } from "@/utils/BmcTheme";
|
||||
import { getFeedbackLink, githubLinks, personalLinks } from "@/utils/links";
|
||||
import { useTheme } from "@/utils/useTheme";
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import { PersonFeedbackRegular } from "@fluentui/react-icons";
|
||||
import { ReactElement, ReactNode } from "react";
|
||||
import { useStyles } from "./AboutSection.styles";
|
||||
|
||||
export default function AboutSection(): ReactElement
|
||||
{
|
||||
const bmcTheme = useTheme(bmcLightTheme, bmcDarkTheme);
|
||||
const cls = useStyles();
|
||||
|
||||
return (
|
||||
<section className={ cls.root }>
|
||||
<header className={ cls.horizontalContainer }>
|
||||
<fui.Subtitle1 as="h1">{ i18n.t("manifest.name") }</fui.Subtitle1>
|
||||
<fui.Caption1 as="span">v{ browser.runtime.getManifest().version }</fui.Caption1>
|
||||
</header>
|
||||
|
||||
<fui.Text as="p">
|
||||
{ i18n.t("about.developed_by") } ({ link("@xfox111.net", personalLinks.social) })
|
||||
<br />
|
||||
{ i18n.t("about.licensed_under") } { link(i18n.t("about.mit_license"), githubLinks.license) }
|
||||
</fui.Text>
|
||||
|
||||
<fui.Text as="p">
|
||||
{ i18n.t("about.translation_cta.text") }<br />
|
||||
{ link(i18n.t("about.translation_cta.button"), githubLinks.translationGuide) }
|
||||
</fui.Text>
|
||||
|
||||
<fui.Text as="p">
|
||||
{ link(i18n.t("about.links.website"), personalLinks.website) } <br />
|
||||
{ link(i18n.t("about.links.source"), githubLinks.repository) } <br />
|
||||
{ link(i18n.t("about.links.changelog"), githubLinks.changelog) }
|
||||
</fui.Text>
|
||||
|
||||
<div className={ cls.horizontalContainer }>
|
||||
<fui.Button { ...buttonProps(getFeedbackLink(), <PersonFeedbackRegular />) }>
|
||||
{ i18n.t("about.cta.feedback") }
|
||||
</fui.Button>
|
||||
<fui.FluentProvider theme={ bmcTheme }>
|
||||
<fui.Button { ...buttonProps(personalLinks.donation, <img style={ { height: 20 } } src="bmc.svg" />) }>
|
||||
{ i18n.t("about.cta.sponsor") }
|
||||
</fui.Button>
|
||||
</fui.FluentProvider>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const link = (text: string, href: string): ReactNode => (
|
||||
<fui.Link target="_blank" href={ href }>{ text }</fui.Link>
|
||||
);
|
||||
|
||||
const buttonProps = (href: string, icon: JSX.Element): fui.ButtonProps => (
|
||||
{
|
||||
as: "a", target: "_blank", href,
|
||||
appearance: "primary", icon
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,38 @@
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: tokens.spacingVerticalMNudge,
|
||||
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,
|
||||
},
|
||||
checkboxContainer:
|
||||
{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
rangeContainer:
|
||||
{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr auto 1fr auto",
|
||||
alignItems: "center",
|
||||
gap: tokens.spacingHorizontalS,
|
||||
},
|
||||
rangeInput:
|
||||
{
|
||||
width: "100%",
|
||||
},
|
||||
excludeCustom:
|
||||
{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "auto 1fr",
|
||||
gap: tokens.spacingHorizontalS,
|
||||
alignItems: "center",
|
||||
},
|
||||
divider:
|
||||
{
|
||||
flexGrow: 0,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,128 @@
|
||||
import { CharacterHints } from "@/utils/generators/generatePassword";
|
||||
import { ExtensionOptions, GeneratorOptions, useStorage } from "@/utils/storage";
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import { ArrowUndoRegular } from "@fluentui/react-icons";
|
||||
import { ReactElement } from "react";
|
||||
import infoLabel from "../../utils/infoLabel";
|
||||
import { useStyles } from "./SettingsSection.styles";
|
||||
|
||||
export default function SettingsSection(): ReactElement
|
||||
{
|
||||
const { extOptions, generatorOptions, updateStorage } = useStorage();
|
||||
const cls = useStyles();
|
||||
|
||||
const resetRange = useCallback(() =>
|
||||
{
|
||||
updateStorage({
|
||||
MinLength: defaultOptions.extension.MinLength,
|
||||
MaxLength: defaultOptions.extension.MaxLength
|
||||
});
|
||||
}, []);
|
||||
|
||||
const setOption = (option: keyof (GeneratorOptions & ExtensionOptions)) =>
|
||||
(_: unknown, args: fui.CheckboxOnChangeData) =>
|
||||
updateStorage({ [option]: args.checked });
|
||||
|
||||
const updateNumberField = (key: keyof (ExtensionOptions & GeneratorOptions), defaultValue: number) =>
|
||||
(_: unknown, e: fui.InputOnChangeData): void =>
|
||||
{
|
||||
if (e.value.length >= 1)
|
||||
{
|
||||
const value = parseInt(e.value);
|
||||
|
||||
if (!isNaN(value) && value >= 0)
|
||||
updateStorage({ [key]: value });
|
||||
}
|
||||
else
|
||||
updateStorage({ [key]: defaultValue });
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={ cls.root }>
|
||||
|
||||
<fui.Field label={ i18n.t("settings.length.title") } hint={ i18n.t("settings.length.hint") }>
|
||||
<fui.Input
|
||||
value={ generatorOptions.Length.toString() }
|
||||
onChange={ updateNumberField("Length", 0) } />
|
||||
</fui.Field>
|
||||
|
||||
<fui.Field label={ i18n.t("settings.quick_range") }>
|
||||
<div className={ cls.rangeContainer }>
|
||||
<fui.Input
|
||||
input={ { className: cls.rangeInput } }
|
||||
value={ extOptions.MinLength.toString() }
|
||||
onChange={ updateNumberField("MinLength", defaultOptions.extension.MinLength) } />
|
||||
|
||||
<fui.Divider />
|
||||
|
||||
<fui.Input
|
||||
input={ { className: cls.rangeInput } }
|
||||
value={ extOptions.MaxLength.toString() }
|
||||
onChange={ updateNumberField("MaxLength", defaultOptions.extension.MaxLength) } />
|
||||
|
||||
<fui.Tooltip relationship="label" content={ i18n.t("common.actions.reset") }>
|
||||
<fui.Button
|
||||
appearance="subtle" icon={ <ArrowUndoRegular /> }
|
||||
onClick={ resetRange } />
|
||||
</fui.Tooltip>
|
||||
</div>
|
||||
</fui.Field>
|
||||
|
||||
<fui.Divider className={ cls.divider } />
|
||||
|
||||
<fui.Text>{ i18n.t("common.sections.include") }</fui.Text>
|
||||
<div className={ cls.checkboxContainer }>
|
||||
<fui.Checkbox label={ i18n.t("common.characters.uppercase") }
|
||||
checked={ generatorOptions.Uppercase }
|
||||
onChange={ setOption("Uppercase") } />
|
||||
<fui.Checkbox
|
||||
label={ i18n.t("common.characters.lowercase") }
|
||||
checked={ generatorOptions.Lowercase }
|
||||
onChange={ setOption("Lowercase") } />
|
||||
<fui.Checkbox
|
||||
label={ i18n.t("common.characters.numeric") }
|
||||
checked={ generatorOptions.Numeric }
|
||||
onChange={ setOption("Numeric") } />
|
||||
<fui.Checkbox
|
||||
label={ infoLabel(i18n.t("common.characters.special"), CharacterHints.special) }
|
||||
checked={ generatorOptions.Special }
|
||||
onChange={ setOption("Special") } />
|
||||
<div>
|
||||
<fui.Checkbox checked={ generatorOptions.Custom } onChange={ setOption("Custom") } />
|
||||
<fui.Input size="small" placeholder={ i18n.t("common.characters.custom") }
|
||||
value={ generatorOptions.IncludeCustomSet }
|
||||
onChange={ (_, e) => updateStorage({ IncludeCustomSet: e.value }) } />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fui.Text>{ i18n.t("common.sections.exclude") }</fui.Text>
|
||||
<div className={ cls.checkboxContainer }>
|
||||
<fui.Checkbox
|
||||
label={ infoLabel(i18n.t("common.characters.similar"), CharacterHints.similar) }
|
||||
checked={ generatorOptions.ExcludeSimilar }
|
||||
onChange={ setOption("ExcludeSimilar") } />
|
||||
<fui.Checkbox
|
||||
label={ infoLabel(i18n.t("common.characters.ambiguous"), CharacterHints.ambiguous) }
|
||||
disabled={ !generatorOptions.Special }
|
||||
checked={ generatorOptions.ExcludeAmbiguous }
|
||||
onChange={ setOption("ExcludeAmbiguous") } />
|
||||
<fui.Checkbox
|
||||
label={ infoLabel(i18n.t("common.characters.repeating.label"), i18n.t("common.characters.repeating.hint")) }
|
||||
checked={ generatorOptions.ExcludeRepeating }
|
||||
onChange={ setOption("ExcludeRepeating") } />
|
||||
<div>
|
||||
<fui.Checkbox checked={ generatorOptions.ExcludeCustom } onChange={ setOption("ExcludeCustom") } />
|
||||
<fui.Input size="small" placeholder={ i18n.t("common.characters.custom") }
|
||||
value={ generatorOptions.ExcludeCustomSet }
|
||||
onChange={ (_, e) => updateStorage({ ExcludeCustomSet: e.value }) } />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const defaultOptions =
|
||||
{
|
||||
generator: new GeneratorOptions(),
|
||||
extension: new ExtensionOptions()
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Settings - Password generator</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
html,
|
||||
body,
|
||||
#root > .fui-FluentProvider
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 450px;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
main
|
||||
{
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
section
|
||||
{
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
p, h1, h2
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius: 4px;
|
||||
background: light-dark(#d1d1d1, #666666);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: light-dark(#c7c7c7, #757575);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover:active
|
||||
{
|
||||
background: light-dark(#b3b3b3, #6b6b6b);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Tab, TabList } from "@fluentui/react-components";
|
||||
import { bundleIcon, FluentIcon, Info20Filled, Info20Regular, Settings20Filled, Settings20Regular } from "@fluentui/react-icons";
|
||||
import { ReactElement, StrictMode } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "../../shared/App";
|
||||
import AboutSection from "./AboutSection";
|
||||
import "./main.css";
|
||||
import SettingsSection from "./SettingsSection";
|
||||
|
||||
function Options(): ReactElement
|
||||
{
|
||||
const [selection, setSelection] = useState<string>("settings");
|
||||
|
||||
const SettingsIcon: FluentIcon = bundleIcon(Settings20Filled, Settings20Regular);
|
||||
const AboutIcon: FluentIcon = bundleIcon(Info20Filled, Info20Regular);
|
||||
|
||||
return (
|
||||
<main>
|
||||
<TabList selectedValue={ selection } onTabSelect={ (_, e) => setSelection(e.value as string) }>
|
||||
<Tab icon={ <SettingsIcon /> } content={ i18n.t("settings.title") } value="settings" />
|
||||
<Tab icon={ <AboutIcon /> } content={ i18n.t("about.title") } value="about" />
|
||||
</TabList>
|
||||
{ selection === "settings" && <SettingsSection /> }
|
||||
{ selection === "about" && <AboutSection /> }
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<App>
|
||||
<Options />
|
||||
</App>
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -1,30 +0,0 @@
|
||||
import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalS),
|
||||
},
|
||||
spinner:
|
||||
{
|
||||
alignSelf: "center",
|
||||
...shorthands.margin(tokens.spacingVerticalXXXL, 0),
|
||||
},
|
||||
accordionAnimation:
|
||||
{
|
||||
"> .fui-AccordionItem .fui-AccordionHeader__expandIcon > svg":
|
||||
{
|
||||
transitionProperty: "transform",
|
||||
transitionDuration: tokens.durationNormal,
|
||||
transitionTimingFunction: tokens.curveDecelerateMax,
|
||||
},
|
||||
"> .fui-AccordionItem > .fui-AccordionPanel":
|
||||
{
|
||||
animationName: "fadeIn",
|
||||
animationDuration: tokens.durationSlow,
|
||||
animationTimingFunction: tokens.curveDecelerateMin,
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import { StorageProvider } from "@/utils/storage";
|
||||
import { useTheme } from "@/utils/useTheme";
|
||||
import { Accordion, FluentProvider, Spinner } from "@fluentui/react-components";
|
||||
import { useState } from "react";
|
||||
import { useStyles } from "./App.styles";
|
||||
import AboutSection from "./sections/AboutSection";
|
||||
import GeneratorView from "./sections/GeneratorView";
|
||||
import SettingsSection from "./sections/SettingsSection";
|
||||
import Snow from "./specials/Snow";
|
||||
|
||||
const App: React.FC = () =>
|
||||
{
|
||||
const theme = useTheme();
|
||||
const cls = useStyles();
|
||||
const [selection, setSelection] = useState<string[]>([]);
|
||||
|
||||
return (
|
||||
<FluentProvider theme={ theme }>
|
||||
<main className={ cls.root }>
|
||||
<StorageProvider loader={ <Spinner size="large" className={ cls.spinner } /> }>
|
||||
<GeneratorView collapse={ selection.includes("settings") } />
|
||||
<Accordion
|
||||
openItems={ selection }
|
||||
onToggle={ (_, e) => setSelection(e.openItems as string[]) }
|
||||
collapsible>
|
||||
|
||||
<SettingsSection />
|
||||
<AboutSection />
|
||||
</Accordion>
|
||||
</StorageProvider>
|
||||
|
||||
<Snow />
|
||||
</main>
|
||||
</FluentProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
+6
-7
@@ -1,11 +1,6 @@
|
||||
import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
input:
|
||||
{
|
||||
fontFamily: tokens.fontFamilyMonospace,
|
||||
@@ -24,6 +19,10 @@ export const useStyles = makeStyles({
|
||||
},
|
||||
msgBar:
|
||||
{
|
||||
...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalM),
|
||||
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
|
||||
},
|
||||
msgBarBody:
|
||||
{
|
||||
whiteSpace: "break-spaces",
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,88 @@
|
||||
import { generatePassword } from "@/utils/generators/generatePassword";
|
||||
import { GeneratorOptions } from "@/utils/storage";
|
||||
import useTimeout from "@/utils/useTimeout";
|
||||
import { Button, Input, mergeClasses, MessageBar, MessageBarBody, Tooltip } from "@fluentui/react-components";
|
||||
import { ArrowClockwise20Regular, CheckmarkRegular, Copy20Regular } from "@fluentui/react-icons";
|
||||
import { ReactElement, useEffect, useState } from "react";
|
||||
import { useStyles } from "./GeneratorView.styles";
|
||||
|
||||
export default function GeneratorView({ options }: GeneratorViewProps): ReactElement
|
||||
{
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [refreshTimer, copyTimer] = [useTimeout(310), useTimeout(1000)];
|
||||
const cls = useStyles();
|
||||
|
||||
const refresh = useCallback(() =>
|
||||
{
|
||||
if (!options)
|
||||
return;
|
||||
|
||||
setError(null);
|
||||
try
|
||||
{
|
||||
setPassword(generatePassword({
|
||||
length: options.Length,
|
||||
uppercase: options.Uppercase,
|
||||
lowercase: options.Lowercase,
|
||||
numeric: options.Numeric,
|
||||
special: options.Special,
|
||||
custom: options.Custom,
|
||||
excludeSimilar: options.ExcludeSimilar,
|
||||
excludeAmbiguous: options.ExcludeAmbiguous,
|
||||
excludeRepeating: options.ExcludeRepeating,
|
||||
excludeCustom: options.ExcludeCustom ? options.ExcludeCustomSet : "",
|
||||
customSet: options.IncludeCustomSet
|
||||
}));
|
||||
}
|
||||
catch (e) { setError((e as Error).message); }
|
||||
|
||||
refreshTimer.trigger();
|
||||
}, [options]);
|
||||
|
||||
const copy = useCallback(async () =>
|
||||
{
|
||||
await window.navigator.clipboard.writeText(password);
|
||||
copyTimer.trigger();
|
||||
}, [password]);
|
||||
|
||||
useEffect(refresh, [options]);
|
||||
|
||||
if (error)
|
||||
return (
|
||||
<MessageBar intent="warning" className={ cls.msgBar }>
|
||||
<MessageBarBody className={ cls.msgBarBody }>{ error }</MessageBarBody>
|
||||
</MessageBar>
|
||||
);
|
||||
|
||||
return (
|
||||
<Input
|
||||
className={ cls.input }
|
||||
readOnly value={ password }
|
||||
contentAfter={ <>
|
||||
<Tooltip content={ i18n.t("common.actions.copy") } relationship="label">
|
||||
<Button
|
||||
appearance="subtle" onClick={ copy }
|
||||
icon={
|
||||
copyTimer.isActive ?
|
||||
<CheckmarkRegular className={ cls.copyIcon } /> :
|
||||
<Copy20Regular className={ cls.copyIcon } />
|
||||
} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={ i18n.t("popup.refresh") } relationship="label">
|
||||
<Button
|
||||
appearance="subtle" onClick={ refresh }
|
||||
icon={
|
||||
<ArrowClockwise20Regular className={ mergeClasses(refreshTimer.isActive && cls.refreshIcon) } />
|
||||
} />
|
||||
</Tooltip>
|
||||
</> } />
|
||||
);
|
||||
};
|
||||
|
||||
export type GeneratorViewProps =
|
||||
{
|
||||
options: GeneratorOptions | null;
|
||||
};
|
||||
+3
-3
@@ -1,16 +1,16 @@
|
||||
import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
|
||||
import { makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
characterOptionsContainer:
|
||||
{
|
||||
display: "flex",
|
||||
...shorthands.gap(tokens.spacingHorizontalXS),
|
||||
gap: tokens.spacingHorizontalXS,
|
||||
},
|
||||
options:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),
|
||||
gap: tokens.spacingVerticalS,
|
||||
},
|
||||
lengthContainer:
|
||||
{
|
||||
@@ -1,10 +1,10 @@
|
||||
import { GeneratorOptions, useStorage } from "@/utils/storage";
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import * as ic from "@fluentui/react-icons";
|
||||
import React from "react";
|
||||
import { ReactElement } from "react";
|
||||
import { useStyles } from "./QuickOptions.styles";
|
||||
|
||||
const QuickOptions: React.FC<IProps> = ({ onChange }) =>
|
||||
export default function QuickOptions({ onChange }: QuickOptionsProps): ReactElement
|
||||
{
|
||||
const { extOptions, generatorOptions } = useStorage();
|
||||
const [quickOpts, setOptions] = useState<GeneratorOptions>(generatorOptions);
|
||||
@@ -15,14 +15,13 @@ const QuickOptions: React.FC<IProps> = ({ onChange }) =>
|
||||
|
||||
const onCheckedValueChange = useCallback((_: unknown, e: fui.MenuCheckedValueChangeData): void =>
|
||||
{
|
||||
const opts: Partial<Omit<GeneratorOptions, "Length">> = {};
|
||||
const opts: Partial<Omit<GeneratorOptions, "Length" | "IncludeCustomSet" | "ExcludeCustomSet">> = {};
|
||||
|
||||
let keys = Object.keys(quickOpts).filter(i => i !== "Length") as (keyof Omit<GeneratorOptions, "Length">)[];
|
||||
|
||||
if (e.name === "include")
|
||||
keys = keys.filter(i => !i.startsWith("Exclude"));
|
||||
else
|
||||
keys = keys.filter(i => i.startsWith("Exclude"));
|
||||
const keys = Object.keys(quickOpts)
|
||||
.filter(i =>
|
||||
i !== "Length" && i !== "IncludeCustomSet" && i !== "ExcludeCustomSet" &&
|
||||
i.startsWith("Exclude") === (e.name === "exclude")
|
||||
) as (keyof Omit<GeneratorOptions, "Length" | "IncludeCustomSet" | "ExcludeCustomSet">)[];
|
||||
|
||||
for (const key of keys)
|
||||
opts[key] = e.checkedItems.includes(key);
|
||||
@@ -38,9 +37,6 @@ const QuickOptions: React.FC<IProps> = ({ onChange }) =>
|
||||
|
||||
return (
|
||||
<div className={ cls.options }>
|
||||
<fui.InfoLabel info={ i18n.t("generator.options.hint") }>
|
||||
{ i18n.t("generator.options.title") }
|
||||
</fui.InfoLabel>
|
||||
|
||||
<div className={ cls.lengthContainer }>
|
||||
<fui.Slider
|
||||
@@ -51,61 +47,79 @@ const QuickOptions: React.FC<IProps> = ({ onChange }) =>
|
||||
|
||||
<div className={ cls.characterOptionsContainer }>
|
||||
<fui.Menu
|
||||
positioning="after" hasCheckmarks
|
||||
positioning={ { position: "after", align: "center", offset: -48 } }
|
||||
checkedValues={ { include: checkedOptions } }
|
||||
onCheckedValueChange={ onCheckedValueChange }>
|
||||
|
||||
<fui.MenuTrigger disableButtonEnhancement>
|
||||
<fui.MenuButton appearance="subtle" icon={ <IncludeIcon /> }>
|
||||
{ i18n.t("generator.options.include") }
|
||||
{ i18n.t("popup.include") }
|
||||
</fui.MenuButton>
|
||||
</fui.MenuTrigger>
|
||||
|
||||
<fui.MenuPopover>
|
||||
<fui.MenuList>
|
||||
<fui.MenuItemCheckbox name="include" value="Uppercase" icon={ <ic.TextCaseUppercaseRegular /> }>
|
||||
{ i18n.t("settings.include.uppercase") }
|
||||
<fui.MenuItemCheckbox name="include" value="Uppercase">
|
||||
{ i18n.t("common.characters.uppercase") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuItemCheckbox name="include" value="Lowercase" icon={ <ic.TextCaseLowercaseRegular /> }>
|
||||
{ i18n.t("settings.include.lowercase") }
|
||||
<fui.MenuItemCheckbox name="include" value="Lowercase">
|
||||
{ i18n.t("common.characters.lowercase") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuItemCheckbox name="include" value="Numeric" icon={ <ic.NumberSymbolRegular /> }>
|
||||
{ i18n.t("settings.include.numeric") }
|
||||
<fui.MenuItemCheckbox name="include" value="Numeric">
|
||||
{ i18n.t("common.characters.numeric") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuItemCheckbox name="include" value="Special" icon={ <ic.MathSymbolsRegular /> }>
|
||||
{ i18n.t("settings.include.special") }
|
||||
<fui.MenuItemCheckbox name="include" value="Special">
|
||||
{ i18n.t("common.characters.special") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuSplitGroup>
|
||||
<fui.MenuItemCheckbox name="include" value="Custom"
|
||||
disabled={ generatorOptions.IncludeCustomSet.length < 1 }>
|
||||
|
||||
{ i18n.t("common.characters.custom") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuItem icon={ <ic.EditRegular /> }
|
||||
onClick={ () => browser.runtime.openOptionsPage() } />
|
||||
</fui.MenuSplitGroup>
|
||||
</fui.MenuList>
|
||||
</fui.MenuPopover>
|
||||
</fui.Menu>
|
||||
|
||||
<fui.Menu
|
||||
positioning="before"
|
||||
positioning={ { position: "after", align: "center", offset: -64 } }
|
||||
checkedValues={ { exclude: checkedOptions } }
|
||||
onCheckedValueChange={ onCheckedValueChange }>
|
||||
|
||||
<fui.MenuTrigger disableButtonEnhancement>
|
||||
<fui.MenuButton appearance="subtle" icon={ <ExcludeIcon /> }>
|
||||
{ i18n.t("generator.options.exclude") }
|
||||
{ i18n.t("popup.exclude") }
|
||||
</fui.MenuButton>
|
||||
</fui.MenuTrigger>
|
||||
|
||||
<fui.MenuPopover>
|
||||
<fui.MenuList>
|
||||
<fui.MenuItemCheckbox name="exclude" value="ExcludeSimilar">
|
||||
{ i18n.t("settings.exclude.similar") }
|
||||
{ i18n.t("common.characters.similar") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuItemCheckbox name="exclude" value="ExcludeAmbiguous" disabled={ !quickOpts.Special }>
|
||||
{ i18n.t("settings.exclude.ambiguous") }
|
||||
{ i18n.t("common.characters.ambiguous") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuItemCheckbox name="exclude" value="ExcludeRepeating">
|
||||
{ i18n.t("settings.exclude.repeating.title") }
|
||||
{ i18n.t("common.characters.repeating.label") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuSplitGroup>
|
||||
<fui.MenuItemCheckbox name="exclude" value="ExcludeCustom"
|
||||
disabled={ generatorOptions.ExcludeCustomSet.length < 1 }>
|
||||
|
||||
{ i18n.t("common.characters.custom") }
|
||||
</fui.MenuItemCheckbox>
|
||||
<fui.MenuItem icon={ <ic.EditRegular /> }
|
||||
onClick={ () => browser.runtime.openOptionsPage() } />
|
||||
</fui.MenuSplitGroup>
|
||||
</fui.MenuList>
|
||||
</fui.MenuPopover>
|
||||
</fui.Menu>
|
||||
|
||||
<fui.Tooltip content={ i18n.t("common.reset") } relationship="label">
|
||||
<fui.Tooltip content={ i18n.t("common.actions.reset") } relationship="label">
|
||||
<fui.Button appearance="subtle" icon={ <ic.ArrowUndoRegular /> } onClick={ () => setOptions(generatorOptions) } />
|
||||
</fui.Tooltip>
|
||||
</div>
|
||||
@@ -113,9 +127,7 @@ const QuickOptions: React.FC<IProps> = ({ onChange }) =>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickOptions;
|
||||
|
||||
interface IProps
|
||||
{
|
||||
onChange: (value: GeneratorOptions) => void;
|
||||
}
|
||||
export type QuickOptionsProps =
|
||||
{
|
||||
onChange: (value: GeneratorOptions) => void;
|
||||
};
|
||||
@@ -14,12 +14,6 @@ body
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p, ul, ol, li
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes scaleUpIn
|
||||
{
|
||||
from
|
||||
@@ -60,18 +54,3 @@ p, ul, ol, li
|
||||
filter: opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowfall
|
||||
{
|
||||
0%
|
||||
{
|
||||
transform: translate3d(var(--left-start), 0, 0);
|
||||
filter: opacity(.6);
|
||||
}
|
||||
|
||||
100%
|
||||
{
|
||||
transform: translate3d(var(--left-end), 610px, 0);
|
||||
filter: opacity(0);
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,62 @@
|
||||
import { GeneratorOptions } from "@/utils/storage";
|
||||
import { Button, Divider, makeStyles, tokens, Tooltip } from "@fluentui/react-components";
|
||||
import { bundleIcon, FluentIcon, Open20Filled, Open20Regular, Settings20Filled, Settings20Regular } from "@fluentui/react-icons";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./style.css";
|
||||
import App from "../../shared/App";
|
||||
import GeneratorView from "./GeneratorView";
|
||||
import "./main.css";
|
||||
import QuickOptions from "./QuickOptions";
|
||||
|
||||
function Popup(): React.ReactElement
|
||||
{
|
||||
const [options, setOptions] = useState<GeneratorOptions | null>(null);
|
||||
|
||||
const AdvancedIcon: FluentIcon = bundleIcon(Open20Filled, Open20Regular);
|
||||
const SettingsIcon: FluentIcon = bundleIcon(Settings20Filled, Settings20Regular);
|
||||
const cls = useStyles();
|
||||
|
||||
return (
|
||||
<main className={ cls.root }>
|
||||
<GeneratorView options={ options } />
|
||||
<QuickOptions onChange={ setOptions } />
|
||||
|
||||
<Divider />
|
||||
|
||||
<div className={ cls.actionsRoot }>
|
||||
<Button as="a" icon={ <AdvancedIcon /> } href="/advanced.html" target="_blank">
|
||||
{ i18n.t("popup.advanced") }
|
||||
</Button>
|
||||
<Tooltip relationship="label" content={ i18n.t("settings.title") }>
|
||||
<Button
|
||||
appearance="subtle" icon={ <SettingsIcon /> }
|
||||
onClick={ () => browser.runtime.openOptionsPage() } />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<App>
|
||||
<Popup />
|
||||
</App>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
|
||||
gap: tokens.spacingVerticalMNudge,
|
||||
},
|
||||
actionsRoot:
|
||||
{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr auto",
|
||||
gap: tokens.spacingHorizontalS,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
...shorthands.gap(tokens.spacingVerticalM),
|
||||
paddingBottom: tokens.spacingVerticalS,
|
||||
},
|
||||
horizontalContainer:
|
||||
{
|
||||
display: "flex",
|
||||
...shorthands.gap(tokens.spacingHorizontalSNudge),
|
||||
},
|
||||
});
|
||||
@@ -1,66 +0,0 @@
|
||||
import { bmcDarkTheme, bmcLightTheme } from "@/utils/BmcTheme";
|
||||
import { getFeedbackLink, githubLinks, personalLinks } from "@/utils/links";
|
||||
import { useTheme } from "@/utils/useTheme";
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import { InfoRegular, PersonFeedbackRegular } from "@fluentui/react-icons";
|
||||
import { useStyles } from "./AboutSection.styles";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
const link = (text: string, href: string): ReactNode => (
|
||||
<fui.Link target="_blank" href={ href }>{ text }</fui.Link>
|
||||
);
|
||||
|
||||
const buttonProps = (href: string, icon: JSX.Element): fui.ButtonProps => (
|
||||
{
|
||||
as: "a", target: "_blank", href,
|
||||
appearance: "primary", icon
|
||||
}
|
||||
);
|
||||
|
||||
const AboutSection: React.FC = () =>
|
||||
{
|
||||
const bmcTheme = useTheme(bmcLightTheme, bmcDarkTheme);
|
||||
const cls = useStyles();
|
||||
|
||||
return (
|
||||
<fui.AccordionItem value="about">
|
||||
<fui.AccordionHeader as="h2" icon={ <InfoRegular /> }>{ i18n.t("about.title") }</fui.AccordionHeader>
|
||||
<fui.AccordionPanel className={ cls.root }>
|
||||
<header className={ cls.horizontalContainer }>
|
||||
<fui.Subtitle1 as="h1">{ i18n.t("manifest.name") }</fui.Subtitle1>
|
||||
<fui.Caption1 as="span">v{ browser.runtime.getManifest().version }</fui.Caption1>
|
||||
</header>
|
||||
|
||||
<fui.Text as="p">
|
||||
{ i18n.t("about.developed_by") } ({ link("@xfox111", personalLinks.twitter) })
|
||||
<br />
|
||||
{ i18n.t("about.lincensed_under") } { link(i18n.t("about.mit_license"), githubLinks.license) }
|
||||
</fui.Text>
|
||||
|
||||
<fui.Text as="p">
|
||||
{ i18n.t("about.translation_cta.text") }<br />
|
||||
{ link(i18n.t("about.translation_cta.button"), githubLinks.translationGuide) }
|
||||
</fui.Text>
|
||||
|
||||
<fui.Text as="p">
|
||||
{ link(i18n.t("about.links.website"), personalLinks.website) } <br />
|
||||
{ link(i18n.t("about.links.source"), githubLinks.repository) } <br />
|
||||
{ link(i18n.t("about.links.changelog"), githubLinks.changelog) }
|
||||
</fui.Text>
|
||||
|
||||
<div className={ cls.horizontalContainer }>
|
||||
<fui.Button { ...buttonProps(getFeedbackLink(), <PersonFeedbackRegular />) }>
|
||||
{ i18n.t("about.cta.feedback") }
|
||||
</fui.Button>
|
||||
<fui.FluentProvider theme={ bmcTheme }>
|
||||
<fui.Button { ...buttonProps(personalLinks.donation, <img style={ { height: 20 } } src="bmc.svg" />) }>
|
||||
{ i18n.t("about.cta.sponsor") }
|
||||
</fui.Button>
|
||||
</fui.FluentProvider>
|
||||
</div>
|
||||
</fui.AccordionPanel>
|
||||
</fui.AccordionItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutSection;
|
||||
@@ -1,112 +0,0 @@
|
||||
import { GeneratePassword } from "@/utils/PasswordGenerator";
|
||||
import { GeneratorOptions, useStorage } from "@/utils/storage";
|
||||
import useTimeout from "@/utils/useTimeout";
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import * as ic from "@fluentui/react-icons";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useStyles } from "./GeneratorView.styles";
|
||||
import QuickOptions from "./QuickOptions";
|
||||
|
||||
const GeneratorView: React.FC<{ collapse: boolean }> = props =>
|
||||
{
|
||||
const { generatorOptions } = useStorage();
|
||||
const [options, setOptions] = useState<GeneratorOptions>(generatorOptions);
|
||||
const [showInsert, setShowInsert] = useState<boolean>(false);
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [refreshTimer, copyTimer, insertTimer] = [useTimeout(310), useTimeout(1000), useTimeout(1000)];
|
||||
const cls = useStyles();
|
||||
|
||||
const refresh = useCallback(() =>
|
||||
{
|
||||
setError(null);
|
||||
try { setPassword(GeneratePassword(options)); }
|
||||
catch (e) { setError((e as Error).message); }
|
||||
}, [options]);
|
||||
|
||||
const copy = useCallback(async () =>
|
||||
{
|
||||
await window.navigator.clipboard.writeText(password);
|
||||
copyTimer.trigger();
|
||||
}, [password]);
|
||||
|
||||
const insert = useCallback(async () =>
|
||||
{
|
||||
const tabId: number = (await browser.tabs.query({ active: true, currentWindow: true }))[0].id!;
|
||||
await browser.tabs.sendMessage(tabId, password);
|
||||
insertTimer.trigger();
|
||||
copy();
|
||||
}, [password]);
|
||||
|
||||
useEffect(() => setOptions(generatorOptions), [generatorOptions]);
|
||||
useEffect(refresh, [options]);
|
||||
useEffect(refreshTimer.trigger, [password]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const tabId: number = (await browser.tabs.query({ active: true, currentWindow: true }))[0].id!;
|
||||
const fieldCount: number = await browser.tabs.sendMessage(tabId, "probe");
|
||||
|
||||
if (fieldCount > 0)
|
||||
setShowInsert(true);
|
||||
}
|
||||
catch { }
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className={ cls.root }>
|
||||
{ error ?
|
||||
<fui.MessageBar intent="warning" className={ cls.msgBar }>
|
||||
<fui.MessageBarBody>{ error }</fui.MessageBarBody>
|
||||
</fui.MessageBar>
|
||||
:
|
||||
<fui.Input
|
||||
className={ cls.input }
|
||||
readOnly value={ password }
|
||||
contentAfter={ <>
|
||||
<fui.Tooltip content={ i18n.t("common.copy") } relationship="label">
|
||||
<fui.Button
|
||||
appearance="subtle" onClick={ copy }
|
||||
icon={
|
||||
copyTimer.isActive ?
|
||||
<ic.CheckmarkRegular className={ cls.copyIcon } /> :
|
||||
<ic.CopyRegular className={ cls.copyIcon } />
|
||||
} />
|
||||
</fui.Tooltip>
|
||||
|
||||
<fui.Tooltip content={ i18n.t("generator.refresh") } relationship="label">
|
||||
<fui.Button
|
||||
appearance="subtle" onClick={ refresh }
|
||||
icon={
|
||||
<ic.ArrowClockwiseRegular className={ fui.mergeClasses(refreshTimer.isActive && cls.refreshIcon) } />
|
||||
} />
|
||||
</fui.Tooltip>
|
||||
|
||||
{ showInsert &&
|
||||
<fui.Tooltip content={ i18n.t("generator.insert") } relationship="label">
|
||||
<fui.Button
|
||||
appearance="subtle" onClick={ insert }
|
||||
icon={
|
||||
insertTimer.isActive ?
|
||||
<ic.CheckmarkRegular className={ cls.copyIcon } /> :
|
||||
<ic.ArrowRightRegular className={ cls.copyIcon } />
|
||||
} />
|
||||
</fui.Tooltip>
|
||||
}
|
||||
</> } />
|
||||
}
|
||||
|
||||
{ !props.collapse &&
|
||||
<QuickOptions onChange={ e => setOptions(e) } />
|
||||
}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneratorView;
|
||||
@@ -1,26 +0,0 @@
|
||||
import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
root:
|
||||
{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
...shorthands.gap(tokens.spacingVerticalS),
|
||||
},
|
||||
checkboxContainer:
|
||||
{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
rangeContainer:
|
||||
{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr auto 1fr auto",
|
||||
alignItems: "center",
|
||||
...shorthands.gap(tokens.spacingHorizontalS),
|
||||
},
|
||||
rangeInput:
|
||||
{
|
||||
width: "100%",
|
||||
},
|
||||
});
|
||||
@@ -1,138 +0,0 @@
|
||||
import { CharacterHints } from "@/utils/PasswordGenerator";
|
||||
import { ExtensionOptions, GeneratorOptions, useStorage } from "@/utils/storage";
|
||||
import * as fui from "@fluentui/react-components";
|
||||
import { ArrowUndoRegular, SettingsRegular } from "@fluentui/react-icons";
|
||||
import { useStyles } from "./SettingsSection.styles";
|
||||
|
||||
// FIXME: Remove ts-ignore comments once slots override fix is released
|
||||
// Tracker: https://github.com/microsoft/fluentui/issues/27090
|
||||
const infoLabel = (content: string, hint: string) => ({
|
||||
children: (_: unknown, slotProps: fui.LabelProps) => (
|
||||
<fui.InfoLabel { ...slotProps } info={ hint }>{ content }</fui.InfoLabel>
|
||||
)
|
||||
});
|
||||
|
||||
const defaultOptions =
|
||||
{
|
||||
generator: new GeneratorOptions(),
|
||||
extension: new ExtensionOptions()
|
||||
};
|
||||
|
||||
const SettingsSection: React.FC = () =>
|
||||
{
|
||||
const { extOptions, generatorOptions, updateStorage } = useStorage();
|
||||
const cls = useStyles();
|
||||
|
||||
const resetRange = useCallback(() =>
|
||||
{
|
||||
updateStorage({
|
||||
MinLength: defaultOptions.extension.MinLength,
|
||||
MaxLength: defaultOptions.extension.MaxLength
|
||||
});
|
||||
}, []);
|
||||
|
||||
const setOption = (option: keyof (GeneratorOptions & ExtensionOptions)) =>
|
||||
(_: unknown, args: fui.CheckboxOnChangeData) =>
|
||||
updateStorage({ [option]: args.checked });
|
||||
|
||||
const updateNumberField = (key: keyof (ExtensionOptions & GeneratorOptions), defaultValue: number) =>
|
||||
(_: unknown, e: fui.InputOnChangeData): void =>
|
||||
{
|
||||
if (e.value.length >= 1)
|
||||
{
|
||||
const value = parseInt(e.value);
|
||||
|
||||
if (!isNaN(value) && value >= 0)
|
||||
updateStorage({ [key]: value });
|
||||
}
|
||||
else
|
||||
updateStorage({ [key]: defaultValue });
|
||||
};
|
||||
|
||||
return (
|
||||
<fui.AccordionItem value="settings">
|
||||
<fui.AccordionHeader as="h2" icon={ <SettingsRegular /> }>{ i18n.t("settings.title") }</fui.AccordionHeader>
|
||||
|
||||
<fui.AccordionPanel className={ cls.root }>
|
||||
|
||||
<fui.Field label={ i18n.t("settings.length.title") } hint={ i18n.t("settings.length.hint") }>
|
||||
<fui.Input
|
||||
value={ generatorOptions.Length.toString() }
|
||||
onChange={ updateNumberField("Length", 0) } />
|
||||
</fui.Field>
|
||||
|
||||
<fui.Field label={ i18n.t("settings.quick_range") }>
|
||||
<div className={ cls.rangeContainer }>
|
||||
<fui.Input
|
||||
input={ { className: cls.rangeInput } }
|
||||
value={ extOptions.MinLength.toString() }
|
||||
onChange={ updateNumberField("MinLength", defaultOptions.extension.MinLength) } />
|
||||
|
||||
<fui.Divider />
|
||||
|
||||
<fui.Input
|
||||
input={ { className: cls.rangeInput } }
|
||||
value={ extOptions.MaxLength.toString() }
|
||||
onChange={ updateNumberField("MaxLength", defaultOptions.extension.MaxLength) } />
|
||||
|
||||
<fui.Tooltip relationship="label" content={ i18n.t("common.reset") }>
|
||||
<fui.Button
|
||||
appearance="subtle" icon={ <ArrowUndoRegular /> }
|
||||
onClick={ resetRange } />
|
||||
</fui.Tooltip>
|
||||
</div>
|
||||
</fui.Field>
|
||||
|
||||
<fui.Divider />
|
||||
|
||||
<fui.Text>{ i18n.t("settings.include.title") }</fui.Text>
|
||||
<div className={ cls.checkboxContainer }>
|
||||
<fui.Checkbox label={ i18n.t("settings.include.uppercase") }
|
||||
checked={ generatorOptions.Uppercase }
|
||||
onChange={ setOption("Uppercase") } />
|
||||
<fui.Checkbox
|
||||
label={ i18n.t("settings.include.lowercase") }
|
||||
checked={ generatorOptions.Lowercase }
|
||||
onChange={ setOption("Lowercase") } />
|
||||
<fui.Checkbox
|
||||
label={ i18n.t("settings.include.numeric") }
|
||||
checked={ generatorOptions.Numeric }
|
||||
onChange={ setOption("Numeric") } />
|
||||
<fui.Checkbox
|
||||
label={ i18n.t("settings.include.special") }
|
||||
checked={ generatorOptions.Special }
|
||||
onChange={ setOption("Special") } />
|
||||
</div>
|
||||
|
||||
<fui.Text>{ i18n.t("settings.exclude.title") }</fui.Text>
|
||||
<div className={ cls.checkboxContainer }>
|
||||
<fui.Checkbox
|
||||
// @ts-expect-error See FIXME
|
||||
label={ infoLabel(i18n.t("settings.exclude.similar"), CharacterHints.Similar) }
|
||||
checked={ generatorOptions.ExcludeSimilar }
|
||||
onChange={ setOption("ExcludeSimilar") } />
|
||||
<fui.Checkbox
|
||||
// @ts-expect-error See FIXME
|
||||
label={ infoLabel(i18n.t("settings.exclude.ambiguous"), CharacterHints.Ambiguous) }
|
||||
disabled={ !generatorOptions.Special }
|
||||
checked={ generatorOptions.ExcludeAmbiguous }
|
||||
onChange={ setOption("ExcludeAmbiguous") } />
|
||||
<fui.Checkbox
|
||||
// @ts-expect-error See FIXME
|
||||
label={ infoLabel(i18n.t("settings.exclude.repeating.title"), i18n.t("settings.exclude.repeating.hint")) }
|
||||
checked={ generatorOptions.ExcludeRepeating }
|
||||
onChange={ setOption("ExcludeRepeating") } />
|
||||
</div>
|
||||
|
||||
<fui.Checkbox
|
||||
label={ i18n.t("settings.context_menu") }
|
||||
checked={ extOptions.ContextMenu }
|
||||
onChange={ setOption("ContextMenu") } />
|
||||
|
||||
</fui.AccordionPanel>
|
||||
|
||||
</fui.AccordionItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsSection;
|
||||
@@ -1,46 +0,0 @@
|
||||
import { GriffelStyle, makeStyles, tokens } from "@fluentui/react-components";
|
||||
|
||||
const random = (max: number): number => Math.floor(Math.random() * max);
|
||||
|
||||
export const SNOWFLAKES_NUM: number = 100;
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
snow:
|
||||
{
|
||||
position: "absolute",
|
||||
overflow: "hidden",
|
||||
pointerEvents: "none",
|
||||
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
},
|
||||
snowflake:
|
||||
{
|
||||
"--size": "1px",
|
||||
width: "var(--size)",
|
||||
height: "var(--size)",
|
||||
backgroundColor: tokens.colorScrollbarOverlay,
|
||||
borderRadius: tokens.borderRadiusCircular,
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
},
|
||||
...[...Array(SNOWFLAKES_NUM)].reduce(
|
||||
(acc, _, i): Record<string, GriffelStyle> => ({
|
||||
...acc,
|
||||
[`snowflake-${i}`]: {
|
||||
"--size": `${random(5)}px`,
|
||||
"--left-start": `${random(20) - 10}vw`,
|
||||
"--left-end": `${random(20) - 10}vw`,
|
||||
left: `${random(100)}vw`,
|
||||
animationName: "snowfall",
|
||||
animationDuration: `${5 + random(10)}s`,
|
||||
animationTimingFunction: "linear",
|
||||
animationIterationCount: "infinite",
|
||||
animationDelay: `-${random(10)}s`,
|
||||
},
|
||||
}),
|
||||
{},
|
||||
),
|
||||
});
|
||||
@@ -1,20 +0,0 @@
|
||||
import { mergeClasses } from "@fluentui/react-components";
|
||||
import { SNOWFLAKES_NUM, useStyles } from "./Snow.styles";
|
||||
|
||||
const Snow: React.FC = () =>
|
||||
{
|
||||
const cls = useStyles();
|
||||
|
||||
if (![0, 11].includes(new Date().getMonth()))
|
||||
return null;
|
||||
|
||||
return (
|
||||
<div className={ cls.snow }>
|
||||
{ [...Array(SNOWFLAKES_NUM)].map((_, i) =>
|
||||
<div key={ i } className={ mergeClasses(cls.snowflake, cls[`snowflake-${i}`]) } />
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Snow;
|
||||
Reference in New Issue
Block a user