diff --git a/.github/workflows/cd_pipeline.yaml b/.github/workflows/cd_pipeline.yaml index 849890e..0394912 100644 --- a/.github/workflows/cd_pipeline.yaml +++ b/.github/workflows/cd_pipeline.yaml @@ -105,7 +105,7 @@ jobs: with: name: packed-chrome - - uses: wdzeng/chrome-extension@v1.2.1 + - uses: wdzeng/chrome-extension@v1.2.2 with: extension-id: jnjobgjobffgmgfnkpkjfjkkfhfikmfl zip-path: PasswordGenerator-chrome.zip @@ -123,7 +123,7 @@ jobs: with: name: packed-chrome - - uses: wdzeng/edge-addon@v1.2.2 + - uses: wdzeng/edge-addon@v1.2.3 with: product-id: ${{ secrets.EDGE_PRODUCT_ID }} zip-path: PasswordGenerator-chrome.zip @@ -141,7 +141,7 @@ jobs: with: name: packed-firefox - - uses: wdzeng/firefox-addon@v1.0.3 + - uses: wdzeng/firefox-addon@v1.0.4 with: addon-guid: ${{ secrets.FIREFOX_EXT_UUID }} xpi-path: PasswordGenerator-firefox.zip diff --git a/.vscode/settings.json b/.vscode/settings.json index 71ed60d..f2cb992 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -15,7 +15,7 @@ "editor.insertSpaces": false, "files.insertFinalNewline": true, "editor.codeActionsOnSave": { - "source.organizeImports": true + "source.organizeImports": "explicit" }, "files.eol": "\n", "files.trimFinalNewlines": true, diff --git a/package.json b/package.json index 5628d37..24cdc01 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "password-generator", - "version": "3.0.2", + "version": "3.1.0", "private": true, "type": "module", "scripts": { @@ -9,32 +9,32 @@ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0" }, "dependencies": { - "@fluentui/react-components": "^9.43.3", - "@fluentui/react-icons": "^2.0.224", + "@fluentui/react-components": "^9.46.4", + "@fluentui/react-icons": "^2.0.226", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "@types/webextension-polyfill": "^0.10.7", - "@typescript-eslint/eslint-plugin": "^6.16.0", - "@typescript-eslint/parser": "^6.16.0", - "@vitejs/plugin-react-swc": "^3.5.0", + "@typescript-eslint/eslint-plugin": "^6.21.0", + "@typescript-eslint/parser": "^6.21.0", + "@vitejs/plugin-react-swc": "^3.6.0", "eslint": "^8.56.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "sass": "^1.69.5", "typescript": "^5.3.3", - "vite": "^5.0.10", - "vite-plugin-static-copy": "^1.0.0", + "vite": "^5.1.0", + "vite-plugin-static-copy": "^1.0.1", "vite-plugin-svgr": "^4.2.0", - "vite-plugin-web-extension": "^4.1.0", + "vite-plugin-web-extension": "^4.1.1", "webextension-polyfill": "^0.10.0" }, "resolutions": { "postcss": "^8.4.31", - "tough-cookie": "^4.1.3" + "tough-cookie": "^4.1.3", + "scheduler": "^0.20.0" } } diff --git a/src/App.tsx b/src/App.tsx index c5b622a..417c53c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,18 +6,24 @@ import SettingsSection from "./Components/SettingsSection"; import Specials from "./Specials/Specials"; import { StorageProvider } from "./Utils/Storage"; import { useTheme } from "./Utils/Theme"; +import { useState } from "react"; export default function App(): JSX.Element { const theme = useTheme(); const cls = useStyles(); + const [selection, setSelection] = useState([]); return (
}> - - + + setSelection(e.openItems as string[]) } + collapsible + className={ cls.accordionAnimation }> diff --git a/src/Components/AboutSection.tsx b/src/Components/AboutSection.tsx index def8b2e..f956166 100644 --- a/src/Components/AboutSection.tsx +++ b/src/Components/AboutSection.tsx @@ -10,7 +10,7 @@ import { useStyles } from "./AboutSection.styles"; export default function AboutSection(): JSX.Element { - const theme = useTheme(bmcLightTheme, bmcDarkTheme); + const bmcTheme = useTheme(bmcLightTheme, bmcDarkTheme); const cls = useStyles(); const link = (text: string, href: string): JSX.Element => ( @@ -54,7 +54,7 @@ export default function AboutSection(): JSX.Element ) }> { loc("about@feedback") } - + ) }> { loc("about@sponsor") } diff --git a/src/Components/GeneratorView.styles.ts b/src/Components/GeneratorView.styles.ts index 02d0ede..17cba24 100644 --- a/src/Components/GeneratorView.styles.ts +++ b/src/Components/GeneratorView.styles.ts @@ -17,17 +17,6 @@ export const useStyles = makeStyles({ alignItems: "center", paddingRight: tokens.spacingHorizontalM, }, - optionsSpacing: - { - ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), - }, - optionsLabel: - { - "> div[role=note].fui-InfoButton__info": - { - zIndex: 1, - }, - }, copyIcon: { animationName: "scaleUpIn", @@ -39,5 +28,20 @@ export const useStyles = makeStyles({ animationName: "spin", animationDuration: tokens.durationSlow, animationTimingFunction: tokens.curveEasyEaseMax, - } + }, + msgBar: + { + ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalM), + }, + options: + { + display: "flex", + flexDirection: "column", + ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), + }, + characterOptionsContainer: + { + display: "flex", + ...shorthands.gap(tokens.spacingHorizontalXS), + }, }); diff --git a/src/Components/GeneratorView.tsx b/src/Components/GeneratorView.tsx index eb23563..4c5a95e 100644 --- a/src/Components/GeneratorView.tsx +++ b/src/Components/GeneratorView.tsx @@ -1,6 +1,5 @@ -import { Button, Checkbox, Input, Slider, Text, Tooltip, mergeClasses } from "@fluentui/react-components"; -import { Alert, InfoLabel } from "@fluentui/react-components/unstable"; -import { ArrowClockwiseRegular, ArrowUndoRegular, CheckmarkRegular, CopyRegular } from "@fluentui/react-icons"; +import * as fui from "@fluentui/react-components"; +import * as Icons from "@fluentui/react-icons"; import { useEffect, useState } from "react"; import GeneratorOptions from "../Models/GeneratorOptions"; import { GetLocaleString as loc } from "../Utils/Localization"; @@ -9,22 +8,24 @@ import { useStorage } from "../Utils/Storage"; import { useTimeout } from "../Utils/Timeout"; import { useStyles } from "./GeneratorView.styles"; -type QuickOptions = Pick; - -export default function GeneratorView(): JSX.Element +export default function GeneratorView(props: { collapse: boolean; }): JSX.Element { - const { generatorOptions } = useStorage(); + const { generatorOptions, extOptions } = useStorage(); const [password, setPassword] = useState(""); - const [quickOpts, _setOpts] = useState(generatorOptions); + const [quickOpts, _setOpts] = useState(generatorOptions); const [error, setError] = useState(null); const [refreshTimer, copyTimer] = [useTimeout(310), useTimeout(1000)]; + const checkedOptions = Object.keys(quickOpts).filter(k => quickOpts[k as keyof GeneratorOptions] as boolean); const cls = useStyles(); + const IncludeIcon: Icons.FluentIcon = Icons.bundleIcon(Icons.AddCircleFilled, Icons.AddCircleRegular); + const ExcludeIcon: Icons.FluentIcon = Icons.bundleIcon(Icons.SubtractCircleFilled, Icons.SubtractCircleRegular); + const resetOptions = (): void => _setOpts(generatorOptions); - const setOptions = (opts: Partial) => + const setOptions = (opts: Partial) => _setOpts({ ...quickOpts, ...opts }); function RefreshPassword(): void @@ -42,64 +43,129 @@ export default function GeneratorView(): JSX.Element copyTimer.trigger(); } + function OnCheckedValueChange(_: unknown, e: fui.MenuCheckedValueChangeData): void + { + const opts: Partial> = {}; + + let keys = Object.keys(quickOpts).filter(i => i !== "Length") as (keyof Omit)[]; + + if (e.name === "include") + keys = keys.filter(i => !i.startsWith("Exclude")); + else + keys = keys.filter(i => i.startsWith("Exclude")); + + for (const key of keys) + opts[key] = e.checkedItems.includes(key); + + setOptions(opts); + } + useEffect(resetOptions, [generatorOptions]); useEffect(RefreshPassword, [generatorOptions, quickOpts]); useEffect(refreshTimer.trigger, [password]); - const actionButtons: JSX.Element = <> - -