XFox111
diff --git a/‎.github/workflows/cd_pipeline.yaml‎
Lines changed: 2 additions & 8 deletions b/‎.github/workflows/cd_pipeline.yaml‎
Lines changed: 2 additions & 8 deletions
diff --git a/‎LICENSE‎
Lines changed: 1 addition & 1 deletion b/‎LICENSE‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎README.md‎
Lines changed: 4 additions & 5 deletions b/‎README.md‎
Lines changed: 4 additions & 5 deletions
diff --git a/‎entrypoints/advanced/Page.styles.ts‎
Lines changed: 59 additions & 0 deletions b/‎entrypoints/advanced/Page.styles.ts‎
Lines changed: 59 additions & 0 deletions
diff --git a/‎entrypoints/advanced/Page.tsx‎
Lines changed: 58 additions & 0 deletions b/‎entrypoints/advanced/Page.tsx‎
Lines changed: 58 additions & 0 deletions
diff --git a/‎entrypoints/advanced/components/GeneratorForm.styles.ts‎
Lines changed: 22 additions & 0 deletions b/‎entrypoints/advanced/components/GeneratorForm.styles.ts‎
Lines changed: 22 additions & 0 deletions
diff --git a/‎entrypoints/advanced/components/GeneratorForm.tsx‎
Lines changed: 91 additions & 0 deletions b/‎entrypoints/advanced/components/GeneratorForm.tsx‎
Lines changed: 91 additions & 0 deletions
diff --git a/‎entrypoints/advanced/components/PasswordList.styles.ts‎
Lines changed: 50 additions & 0 deletions b/‎entrypoints/advanced/components/PasswordList.styles.ts‎
Lines changed: 50 additions & 0 deletions
@@ -101,16 +101,10 @@ jobs:
         with:
           name: chrome
 
-      - name: Get version from package.json
-        id: get_version
-        run: |
-          extname=`ls password-generator-*-chrome.zip`
-          echo "filename=$extname" >> "$GITHUB_OUTPUT"
-
-      - uses: wdzeng/chrome-extension@v1.2.4
+      - uses: wdzeng/chrome-extension@v1.3.0
         with:
           extension-id: jnjobgjobffgmgfnkpkjfjkkfhfikmfl
-          zip-path: ${{ steps.get_version.outputs.filename }}
+          zip-path: password-generator-*-chrome.zip
           client-id: ${{ secrets.CHROME_CLIENT_ID }}
           client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
           refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}
 
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Eugene Fox
+Copyright (c) 2025 Eugene Fox
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 
@@ -9,15 +9,14 @@
 	<img alt="Password generator">
 </picture>
 
-Extension for web browsers which helps you to easily generate strong passwords in one click
+Extension for web browsers which helps you to easily generate strong and customizable passwords in a few clicks
 
 ## Features
 - Customizable generator
 - Clean and simple UI
 - Dark mode
-- **NEW:** Insert and copy generated password in one click
-
-![Demo](https://cdn.xfox111.net/projects/pwdgen/demo.gif)
+- **NEW:** Advanced password generator
+- **NEW:** Passphrase generator
 
 ## Languages
 - Chinese (Simplified)
@@ -93,4 +92,4 @@ If you are interested in fixing issues and contributing directly to the code bas
 [![GitHub followers](https://img.shields.io/github/followers/xfox111?label=Follow%20@xfox111&style=social)](https://github.com/xfox111)
 [![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-%40xfox111-orange)](https://buymeacoffee.com/xfox111)
 
-> ©2024 Eugene Fox. Licensed under [MIT license](https://github.com/XFox111/PasswordGeneratorExtension/blob/main/LICENSE)
+> ©2025 Eugene Fox. Licensed under [MIT license](https://github.com/XFox111/PasswordGeneratorExtension/blob/main/LICENSE)
@@ -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,
+	}
+});