From 6e894dd765efc12b27bd1d84bd3c27b9aec00ada Mon Sep 17 00:00:00 2001 From: wisse Date: Sat, 15 Mar 2025 19:31:57 +0100 Subject: [PATCH 01/16] Fix typescript strict flag errors (untested) --- .github/workflows/lints_tests.yml | 2 + ui/Makefile | 9 +- ui/src/components/Alert.tsx | 2 +- ui/src/components/BooleanInput.tsx | 6 +- ui/src/components/Button.tsx | 2 +- ui/src/components/LoginModal.tsx | 2 +- ui/src/components/ProfileMenu.tsx | 4 +- ui/src/components/Table.tsx | 8 +- ui/src/components/ThemeSwitcher.tsx | 2 +- ui/src/context/LocaleProvider.tsx | 9 +- ui/src/context/UserProvider.tsx | 6 +- ui/src/index.tsx | 4 + ui/src/pages/{BasePage.tsx => Base.tsx} | 0 ...gotPasswordPage.tsx => ForgotPassword.tsx} | 0 ui/src/pages/{LandingPage.tsx => Landing.tsx} | 0 .../pages/{NotFoundPage.tsx => NotFound.tsx} | 0 ...esetPasswordPage.tsx => ResetPassword.tsx} | 5 +- ui/src/pages/SearchParams.ts | 6 + .../{VerifyEmailPage.tsx => VerifyEmail.tsx} | 10 +- .../admin_page/{AdminPage.tsx => Admin.tsx} | 0 ui/src/pages/admin_page/UsersAdmin.tsx | 22 ++- .../user_account_page/ChangePasswordModal.tsx | 6 +- .../{UserAccountPage.tsx => UserAccount.tsx} | 22 +-- .../modals/ChangePassword.tsx | 170 ++++++++++++++++++ .../DeleteAccount.tsx} | 16 +- .../Disable2FA.tsx} | 14 +- .../Enable2FA.tsx} | 18 +- ui/src/routes.tsx | 20 +-- ui/tsconfig.json | 8 +- 29 files changed, 288 insertions(+), 85 deletions(-) rename ui/src/pages/{BasePage.tsx => Base.tsx} (100%) rename ui/src/pages/{ForgotPasswordPage.tsx => ForgotPassword.tsx} (100%) rename ui/src/pages/{LandingPage.tsx => Landing.tsx} (100%) rename ui/src/pages/{NotFoundPage.tsx => NotFound.tsx} (100%) rename ui/src/pages/{ResetPasswordPage.tsx => ResetPassword.tsx} (97%) create mode 100644 ui/src/pages/SearchParams.ts rename ui/src/pages/{VerifyEmailPage.tsx => VerifyEmail.tsx} (89%) rename ui/src/pages/admin_page/{AdminPage.tsx => Admin.tsx} (100%) rename ui/src/pages/user_account_page/{UserAccountPage.tsx => UserAccount.tsx} (89%) create mode 100644 ui/src/pages/user_account_page/modals/ChangePassword.tsx rename ui/src/pages/user_account_page/{DeleteAccountModal.tsx => modals/DeleteAccount.tsx} (75%) rename ui/src/pages/user_account_page/{Disable2FAModal.tsx => modals/Disable2FA.tsx} (83%) rename ui/src/pages/user_account_page/{Enable2FAModal.tsx => modals/Enable2FA.tsx} (87%) diff --git a/.github/workflows/lints_tests.yml b/.github/workflows/lints_tests.yml index ff3404f..da496bd 100644 --- a/.github/workflows/lints_tests.yml +++ b/.github/workflows/lints_tests.yml @@ -30,6 +30,8 @@ jobs: - name: Lint run: cd ui && make lint + + lint-api: runs-on: ubuntu-latest diff --git a/ui/Makefile b/ui/Makefile index 6e67fcb..358e8f1 100644 --- a/ui/Makefile +++ b/ui/Makefile @@ -15,9 +15,16 @@ format: ## Format code with eslint and prettier pnpm eslint $(LINT_FILES) --fix pnpm prettier --write $(LINT_FILES) -lint: ## Run lint check with eslint and prettier +lint: ## Run lint check with eslint, prettier and typescript pnpm eslint $(LINT_FILES) pnpm prettier --check $(LINT_FILES) + pnpm tsc + +ts_check: ## Run the typescript compiler + pnpm tsc + +ts_watch: ## Run the typescript compiler in watch mode + pnpm tsc --watch formatlint: format lint ## First format code, then run linters diff --git a/ui/src/components/Alert.tsx b/ui/src/components/Alert.tsx index d7ee7e4..dd7779e 100644 --- a/ui/src/components/Alert.tsx +++ b/ui/src/components/Alert.tsx @@ -3,7 +3,7 @@ import { clsx } from 'clsx' interface AlertProps { type: 'info' | 'error' | 'success' | 'warning' - message: string + message?: string extraClasses?: string } diff --git a/ui/src/components/BooleanInput.tsx b/ui/src/components/BooleanInput.tsx index 11d32e4..b0af0ea 100644 --- a/ui/src/components/BooleanInput.tsx +++ b/ui/src/components/BooleanInput.tsx @@ -1,6 +1,6 @@ import { JSX, splitProps, JSXElement } from 'solid-js' -type BooleanInputProps = { +export function BooleanInput(props: { name: string type: 'checkbox' label?: string @@ -10,9 +10,7 @@ type BooleanInputProps = { ref: (element: HTMLInputElement) => void onInput: JSX.EventHandler onChange: JSX.EventHandler -} - -export function BooleanInput(props: BooleanInputProps): JSXElement { +}): JSXElement { const [, inputProps] = splitProps(props, ['value', 'label', 'error']) return (
diff --git a/ui/src/components/Button.tsx b/ui/src/components/Button.tsx index 9c855b7..ea6120d 100644 --- a/ui/src/components/Button.tsx +++ b/ui/src/components/Button.tsx @@ -24,7 +24,7 @@ export function Button(props: { props.class )} type={props.type ?? 'button'} - onClick={() => props.onClick()} + onClick={() => props.onClick?.()} > {props.children} diff --git a/ui/src/components/LoginModal.tsx b/ui/src/components/LoginModal.tsx index d830954..829bdbc 100644 --- a/ui/src/components/LoginModal.tsx +++ b/ui/src/components/LoginModal.tsx @@ -72,7 +72,7 @@ export function LoginModal(props: ModalBaseProps): JSXElement { } const onTotpLogin: SubmitHandler = async (values) => { - const response = await totpLogin(currentEmail(), values.totpCode) + const response = await totpLogin(currentEmail() ?? '', values.totpCode) if (response.status !== 200) { setResponse(totpForm, { diff --git a/ui/src/components/ProfileMenu.tsx b/ui/src/components/ProfileMenu.tsx index 70c030a..dc5c200 100644 --- a/ui/src/components/ProfileMenu.tsx +++ b/ui/src/components/ProfileMenu.tsx @@ -35,7 +35,7 @@ export function ProfileMenu(): JSXElement { return (
- {user().email} + {user()?.email} @@ -47,7 +47,7 @@ export function ProfileMenu(): JSXElement { - +
  • diff --git a/ui/src/components/Table.tsx b/ui/src/components/Table.tsx index f21e1ea..70e324f 100644 --- a/ui/src/components/Table.tsx +++ b/ui/src/components/Table.tsx @@ -20,6 +20,8 @@ export function Table(props: { headers?: (string | JSXElement)[] children: (JSXElement | string)[] | JSXElement }): JSXElement { + const headerLength = () => (props.headers?.length ? props.headers.length : 0) + return (
    @@ -28,11 +30,7 @@ export function Table(props: { {(header, index) => ( - )} diff --git a/ui/src/components/ThemeSwitcher.tsx b/ui/src/components/ThemeSwitcher.tsx index 5967b06..545b6b1 100644 --- a/ui/src/components/ThemeSwitcher.tsx +++ b/ui/src/components/ThemeSwitcher.tsx @@ -2,7 +2,7 @@ import { createSignal, createEffect, JSXElement } from 'solid-js' export function ThemeSwitcher(): JSXElement { const [isDark, setIsDark] = createSignal( - JSON.parse(localStorage.getItem('isDark')) ?? false + JSON.parse(localStorage.getItem('isDark') ?? '') ?? false ) createEffect(() => { diff --git a/ui/src/context/LocaleProvider.tsx b/ui/src/context/LocaleProvider.tsx index e5d78b9..ba36eb4 100644 --- a/ui/src/context/LocaleProvider.tsx +++ b/ui/src/context/LocaleProvider.tsx @@ -42,6 +42,8 @@ export function LocaleProvider(props: { children: JSXElement }) { return await fetchDictionary(locale) }) + const translationsAccessor = () => translations() ?? defaultDict + const t = i18n.translator(() => translations() ?? {}) const updateLocale = async (newLocale: Locale) => { @@ -55,7 +57,12 @@ export function LocaleProvider(props: { children: JSXElement }) { return ( | null + user: Accessor setUser: (user: User | null) => void fetchUser: () => Promise loading: Accessor @@ -40,9 +40,7 @@ export const UserProvider = (props: { children: JSXElement }) => { }) return ( - + {props.children} ) diff --git a/ui/src/index.tsx b/ui/src/index.tsx index fb2aef4..6245e12 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -15,6 +15,10 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) { ) } +if (root === null) { + throw new Error('Root element is null') +} + const RootLayout = (props: ParentProps) => ( diff --git a/ui/src/pages/BasePage.tsx b/ui/src/pages/Base.tsx similarity index 100% rename from ui/src/pages/BasePage.tsx rename to ui/src/pages/Base.tsx diff --git a/ui/src/pages/ForgotPasswordPage.tsx b/ui/src/pages/ForgotPassword.tsx similarity index 100% rename from ui/src/pages/ForgotPasswordPage.tsx rename to ui/src/pages/ForgotPassword.tsx diff --git a/ui/src/pages/LandingPage.tsx b/ui/src/pages/Landing.tsx similarity index 100% rename from ui/src/pages/LandingPage.tsx rename to ui/src/pages/Landing.tsx diff --git a/ui/src/pages/NotFoundPage.tsx b/ui/src/pages/NotFound.tsx similarity index 100% rename from ui/src/pages/NotFoundPage.tsx rename to ui/src/pages/NotFound.tsx diff --git a/ui/src/pages/ResetPasswordPage.tsx b/ui/src/pages/ResetPassword.tsx similarity index 97% rename from ui/src/pages/ResetPasswordPage.tsx rename to ui/src/pages/ResetPassword.tsx index ab2da98..acf073e 100644 --- a/ui/src/pages/ResetPasswordPage.tsx +++ b/ui/src/pages/ResetPassword.tsx @@ -19,6 +19,7 @@ import { } from '@modular-forms/solid' import { getErrorMessage, resetPassword } from '../api' +import { getSingleParam } from './SearchParams' type PasswordResetFormData = { password: string @@ -35,8 +36,8 @@ export function ResetPasswordPage(): JSXElement { values ) => { const response = await resetPassword( - searchParams.email, - searchParams.reset_token, + getSingleParam(searchParams.email), + getSingleParam(searchParams.reset_token), values.password ) diff --git a/ui/src/pages/SearchParams.ts b/ui/src/pages/SearchParams.ts new file mode 100644 index 0000000..e72d555 --- /dev/null +++ b/ui/src/pages/SearchParams.ts @@ -0,0 +1,6 @@ +/** + * Obtain a single search param when using solidjs searchParams + */ +export function getSingleParam(param: string | string[] | undefined): string { + return Array.isArray(param) ? (param[0] ?? '') : (param ?? '') +} diff --git a/ui/src/pages/VerifyEmailPage.tsx b/ui/src/pages/VerifyEmail.tsx similarity index 89% rename from ui/src/pages/VerifyEmailPage.tsx rename to ui/src/pages/VerifyEmail.tsx index c486ccf..cf4501b 100644 --- a/ui/src/pages/VerifyEmailPage.tsx +++ b/ui/src/pages/VerifyEmail.tsx @@ -7,6 +7,7 @@ import { TopBar } from '../components/TopBar' import { useUser } from '../context/UserProvider' import { useLocale } from '../context/LocaleProvider' import { getErrorMessage, verifyEmail } from '../api' +import { getSingleParam } from './SearchParams' export function VerifyEmailPage(): JSXElement { const { t } = useLocale() @@ -16,16 +17,15 @@ export function VerifyEmailPage(): JSXElement { const [loading, setLoading] = createSignal(true) const [success, setSuccess] = createSignal(false) - const [errorMsg, setErrorMsg] = createSignal(null) + const [errorMsg, setErrorMsg] = createSignal() onMount(async () => { setLoading(true) setSuccess(false) - setErrorMsg(null) const response = await verifyEmail( - searchParams.email, - searchParams.verification_token + getSingleParam(searchParams.email), + getSingleParam(searchParams.verification_tokean) ) if (response.status !== 200) { @@ -52,7 +52,7 @@ export function VerifyEmailPage(): JSXElement { - +
    diff --git a/ui/src/pages/admin_page/AdminPage.tsx b/ui/src/pages/admin_page/Admin.tsx similarity index 100% rename from ui/src/pages/admin_page/AdminPage.tsx rename to ui/src/pages/admin_page/Admin.tsx diff --git a/ui/src/pages/admin_page/UsersAdmin.tsx b/ui/src/pages/admin_page/UsersAdmin.tsx index 3d47f19..86b3e85 100644 --- a/ui/src/pages/admin_page/UsersAdmin.tsx +++ b/ui/src/pages/admin_page/UsersAdmin.tsx @@ -121,7 +121,7 @@ export function UsersAdmin(): JSXElement { ]} > - + {(user) => { return ( <> @@ -176,17 +176,21 @@ export function UsersAdmin(): JSXElement { ) } -interface DeleteUserModalProps extends ModalBaseProps { - user: UserAttributes - onDelete: () => void -} - -function DeleteUserModal(props: DeleteUserModalProps): JSXElement { +function DeleteUserModal( + props: { + user: UserAttributes | null + onDelete: () => void + } & ModalBaseProps +): JSXElement { const { t } = useLocale() const [deleteForm, Delete] = createForm() const handleDelete = async () => { + if (props.user === null || props.user.id === null) { + return + } + const response = await deleteUser(props.user.id) if (response.status !== 200) { @@ -209,7 +213,7 @@ function DeleteUserModal(props: DeleteUserModalProps): JSXElement { onClose={props.onClose} >

    {t('delete_user_confirmation')}

    -

    {props.user.email}

    +

    {props.user?.email}

    @@ -338,7 +342,7 @@ function CreateUserModal(props: CreateUserModalProps): JSXElement { diff --git a/ui/src/pages/user_account_page/ChangePasswordModal.tsx b/ui/src/pages/user_account_page/ChangePasswordModal.tsx index 7bff948..b43d5aa 100644 --- a/ui/src/pages/user_account_page/ChangePasswordModal.tsx +++ b/ui/src/pages/user_account_page/ChangePasswordModal.tsx @@ -1,4 +1,3 @@ -import { User, UserAttributes } from '../../models/User' import { createEffect, JSXElement, Show } from 'solid-js' import { useUser } from '../../context/UserProvider' import { useLocale } from '../../context/LocaleProvider' @@ -20,6 +19,7 @@ import { Alert } from '../../components/Alert' import { TextInput } from '../../components/TextInput' import { Modal, ModalBaseProps } from '../../components/Modal' import { Button } from '../../components/Button' +import { User, UserAttributes } from '../../models/User' type ChangePasswordFormData = { currentPassword: string @@ -64,7 +64,9 @@ export function ChangePasswordModal(props: ModalBaseProps): JSXElement { createEffect(() => { if (saved()) { if (changePasswordForm.response.status === 'success') { - setUser(new User(changePasswordForm.response.data)) + if (changePasswordForm.response.data !== undefined) { + setUser(new User(changePasswordForm.response.data)) + } } } }) diff --git a/ui/src/pages/user_account_page/UserAccountPage.tsx b/ui/src/pages/user_account_page/UserAccount.tsx similarity index 89% rename from ui/src/pages/user_account_page/UserAccountPage.tsx rename to ui/src/pages/user_account_page/UserAccount.tsx index f425891..fed4f14 100644 --- a/ui/src/pages/user_account_page/UserAccountPage.tsx +++ b/ui/src/pages/user_account_page/UserAccount.tsx @@ -5,10 +5,10 @@ import { clsx } from 'clsx' import { resendVerificationMail } from '../../api' -import { ChangePasswordModal } from './ChangePasswordModal' -import { Enable2FAModal } from './Enable2FAModal' -import { Disable2FAModal } from './Disable2FAModal' -import { DeleteAccountModal } from './DeleteAccountModal' +import { ChangePasswordModal } from './modals/ChangePassword' +import { Enable2FAModal } from './modals/Enable2FA' +import { Disable2FAModal } from './modals/Disable2FA' +import { DeleteAccountModal } from './modals/DeleteAccount' import { createModalState } from '../../components/Modal' import { Table, TableRow } from '../../components/Table' import { Button } from '../../components/Button' @@ -27,7 +27,7 @@ export function UserAccountPage(): JSXElement { return ( <>
    - +

    {t('this_user_is_an_admin')} @@ -35,7 +35,9 @@ export function UserAccountPage(): JSXElement {

    + {header}
    - ]} /> + ]} + /> - {user().twoFactorEnabled ? t('yes') : t('no')} + {user()?.twoFactorEnabled ? t('yes') : t('no')}

    , openModal('enable2FA')} @@ -110,7 +112,7 @@ function VerifyEmailButton(): JSXElement { return (

    @@ -159,7 +161,7 @@ function Toggle2FAButton(props: { return ( <> - +

    + + + + ) +} diff --git a/ui/src/pages/user_account_page/DeleteAccountModal.tsx b/ui/src/pages/user_account_page/modals/DeleteAccount.tsx similarity index 75% rename from ui/src/pages/user_account_page/DeleteAccountModal.tsx rename to ui/src/pages/user_account_page/modals/DeleteAccount.tsx index 55ac39c..3d885e5 100644 --- a/ui/src/pages/user_account_page/DeleteAccountModal.tsx +++ b/ui/src/pages/user_account_page/modals/DeleteAccount.tsx @@ -1,12 +1,12 @@ import { createSignal, JSXElement, Show } from 'solid-js' import { useNavigate } from '@solidjs/router' -import { useUser } from '../../context/UserProvider' -import { useLocale } from '../../context/LocaleProvider' +import { useUser } from '../../../context/UserProvider' +import { useLocale } from '../../../context/LocaleProvider' -import { deleteAccount, getErrorMessage } from '../../api' -import { Modal, ModalBaseProps } from '../../components/Modal' -import { Alert } from '../../components/Alert' -import { Button } from '../../components/Button' +import { deleteAccount, getErrorMessage } from '../../../api' +import { Modal, ModalBaseProps } from '../../../components/Modal' +import { Alert } from '../../../components/Alert' +import { Button } from '../../../components/Button' export function DeleteAccountModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() @@ -15,11 +15,11 @@ export function DeleteAccountModal(props: ModalBaseProps): JSXElement { const navigate = useNavigate() const [deleting, setDeleting] = createSignal(false) - const [errorMsg, setErrorMsg] = createSignal(null) + const [errorMsg, setErrorMsg] = createSignal(undefined) const onDeleteAccount = async () => { setDeleting(true) - setErrorMsg(null) + setErrorMsg(undefined) const response = await deleteAccount() if (response.status !== 200) { diff --git a/ui/src/pages/user_account_page/Disable2FAModal.tsx b/ui/src/pages/user_account_page/modals/Disable2FA.tsx similarity index 83% rename from ui/src/pages/user_account_page/Disable2FAModal.tsx rename to ui/src/pages/user_account_page/modals/Disable2FA.tsx index f1d8f9a..cd53ea1 100644 --- a/ui/src/pages/user_account_page/Disable2FAModal.tsx +++ b/ui/src/pages/user_account_page/modals/Disable2FA.tsx @@ -1,7 +1,7 @@ import { JSXElement, Show } from 'solid-js' -import { disable2FA, getErrorMessage } from '../../api' -import { useUser } from '../../context/UserProvider' -import { useLocale } from '../../context/LocaleProvider' +import { disable2FA, getErrorMessage } from '../../../api' +import { useUser } from '../../../context/UserProvider' +import { useLocale } from '../../../context/LocaleProvider' import { required, @@ -13,10 +13,10 @@ import { SubmitHandler, } from '@modular-forms/solid' -import { Alert } from '../../components/Alert' -import { Modal, ModalBaseProps } from '../../components/Modal' -import { TextInput } from '../../components/TextInput' -import { Button } from '../../components/Button' +import { Alert } from '../../../components/Alert' +import { Modal, ModalBaseProps } from '../../../components/Modal' +import { TextInput } from '../../../components/TextInput' +import { Button } from '../../../components/Button' type TotpFormData = { totpCode: string diff --git a/ui/src/pages/user_account_page/Enable2FAModal.tsx b/ui/src/pages/user_account_page/modals/Enable2FA.tsx similarity index 87% rename from ui/src/pages/user_account_page/Enable2FAModal.tsx rename to ui/src/pages/user_account_page/modals/Enable2FA.tsx index c2eee48..c0a8cab 100644 --- a/ui/src/pages/user_account_page/Enable2FAModal.tsx +++ b/ui/src/pages/user_account_page/modals/Enable2FA.tsx @@ -1,7 +1,7 @@ import { createSignal, onMount, JSXElement, Show } from 'solid-js' -import { enable2FA, generate2FASecret, getErrorMessage } from '../../api' -import { useUser } from '../../context/UserProvider' -import { useLocale } from '../../context/LocaleProvider' +import { enable2FA, generate2FASecret, getErrorMessage } from '../../../api' +import { useUser } from '../../../context/UserProvider' +import { useLocale } from '../../../context/LocaleProvider' import { required, @@ -13,10 +13,10 @@ import { SubmitHandler, } from '@modular-forms/solid' -import { Alert } from '../../components/Alert' -import { Modal, ModalBaseProps } from '../../components/Modal' -import { TextInput } from '../../components/TextInput' -import { Button } from '../../components/Button' +import { Alert } from '../../../components/Alert' +import { Modal, ModalBaseProps } from '../../../components/Modal' +import { TextInput } from '../../../components/TextInput' +import { Button } from '../../../components/Button' type TotpFormData = { totpCode: string @@ -26,8 +26,8 @@ export function Enable2FAModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() const { fetchUser } = useUser() - const [totpSecret, setTotpSecret] = createSignal(null) - const [qrCode, setQrCode] = createSignal(null) + const [totpSecret, setTotpSecret] = createSignal('') + const [qrCode, setQrCode] = createSignal('') const [totpForm, Totp] = createForm() diff --git a/ui/src/routes.tsx b/ui/src/routes.tsx index 9fcbc46..5e1c69a 100644 --- a/ui/src/routes.tsx +++ b/ui/src/routes.tsx @@ -4,15 +4,15 @@ import { Navigate } from '@solidjs/router' import type { RouteDefinition } from '@solidjs/router' import { useUser } from './context/UserProvider' -import { AdminPage } from './pages/admin_page/AdminPage' -import { LandingPage } from './pages/LandingPage' +import { AdminPage } from './pages/admin_page/Admin' +import { LandingPage } from './pages/Landing' import { Home } from './pages/Home' -import { BasePage } from './pages/BasePage' -import { UserAccountPage } from './pages/user_account_page/UserAccountPage' -import { ForgotPasswordPage } from './pages/ForgotPasswordPage' -import { ResetPasswordPage } from './pages/ResetPasswordPage' -import { VerifyEmailPage } from './pages/VerifyEmailPage' -import { NotFoundPage } from './pages/NotFoundPage' +import { BasePage } from './pages/Base' +import { UserAccountPage } from './pages/user_account_page/UserAccount' +import { ForgotPasswordPage } from './pages/ForgotPassword' +import { ResetPasswordPage } from './pages/ResetPassword' +import { VerifyEmailPage } from './pages/VerifyEmail' +import { NotFoundPage } from './pages/NotFound' function ProtectedRoute(props: { component: Component @@ -22,10 +22,10 @@ function ProtectedRoute(props: { return ( }> - + - + diff --git a/ui/tsconfig.json b/ui/tsconfig.json index ba12e96..df42de8 100644 --- a/ui/tsconfig.json +++ b/ui/tsconfig.json @@ -1,14 +1,18 @@ { + "include": ["*", "src/**/*"], "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "node", + "forceConsistentCasingInFileNames": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, + "skipLibCheck": true, "jsx": "preserve", + "strict": true, "jsxImportSource": "solid-js", "types": ["vite/client"], "noEmit": true, - "isolatedModules": true, - }, + "isolatedModules": true + } } From 108bf0280822fadde144ae874a96b429bb3790f5 Mon Sep 17 00:00:00 2001 From: wisse Date: Sun, 16 Mar 2025 09:35:20 +0100 Subject: [PATCH 02/16] Remove duplicate password modal --- .../user_account_page/ChangePasswordModal.tsx | 172 ------------------ 1 file changed, 172 deletions(-) delete mode 100644 ui/src/pages/user_account_page/ChangePasswordModal.tsx diff --git a/ui/src/pages/user_account_page/ChangePasswordModal.tsx b/ui/src/pages/user_account_page/ChangePasswordModal.tsx deleted file mode 100644 index 42514ec..0000000 --- a/ui/src/pages/user_account_page/ChangePasswordModal.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import { createEffect, JSXElement, Show } from 'solid-js' -import { useUser } from '../../context/UserProvider' -import { useLocale } from '../../context/LocaleProvider' - -import { changePassword, getErrorMessage } from '../../api' -import { - clearResponse, - createForm, - getValue, - minLength, - pattern, - reset, - setResponse, - required, - SubmitHandler, -} from '@modular-forms/solid' - -import { Alert } from '../../components/Alert' -import { TextInput } from '../../components/TextInput' -import { Modal, ModalBaseProps } from '../../components/Modal' -import { Button } from '../../components/Button' -import { User, UserAttributes } from '../../models/User' - -type ChangePasswordFormData = { - currentPassword: string - newPassword: string - confirmNewPassword: string -} - -export function ChangePasswordModal(props: ModalBaseProps): JSXElement { - const { t } = useLocale() - - const [changePasswordForm, { Form, Field }] = createForm< - ChangePasswordFormData, - UserAttributes - >() - - const { setUser } = useUser() - - const saved = () => { - return changePasswordForm.submitted === true - } - - const newPassword = () => { - return getValue(changePasswordForm, 'newPassword', { - shouldActive: false, - shouldTouched: true, - shouldDirty: true, - shouldValid: true, - }) - } - - /** - * Custom validator that checks whether the new password matches the new password. - */ - const mustMatch = ( - error: string - ): ((value: string | undefined) => string) => { - return (value: string | undefined) => { - return value !== newPassword() ? error : '' - } - } - - createEffect(() => { - if (saved()) { - if (changePasswordForm.response.status === 'success') { - if (changePasswordForm.response.data !== undefined) { - setUser(new User(changePasswordForm.response.data)) - } - } - } - }) - - const onSubmit: SubmitHandler = async (values) => { - const response = await changePassword( - values.currentPassword, - values.newPassword - ) - - if (response.status !== 200) { - setResponse(changePasswordForm, { - status: 'error', - message: t(await getErrorMessage(response)), - }) - - return - } - - const data = await response.json() - - setResponse(changePasswordForm, { - status: 'success', - data: data, - }) - - props.onClose() - - clearResponse(changePasswordForm) - reset(changePasswordForm) - } - - return ( - -
    - - {(field, props) => ( - } - /> - )} - - - {(field, props) => ( - } - /> - )} - - - {(field, props) => ( - } - /> - )} - - - - - - -

    -
    - - - ) -} From 9d5889d87954b7655ee37a6c440636169c682589 Mon Sep 17 00:00:00 2001 From: wisse Date: Sun, 16 Mar 2025 09:56:48 +0100 Subject: [PATCH 03/16] Add margin to verified e-mail --- ui/package.json | 10 ++++++++++ ui/src/pages/user_account_page/UserAccount.tsx | 4 +++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/ui/package.json b/ui/package.json index 49e8049..397d761 100644 --- a/ui/package.json +++ b/ui/package.json @@ -31,5 +31,15 @@ "typescript-eslint": "^8.26.1", "vite": "^6.2.1", "vite-plugin-solid": "^2.11.6" + }, + "pnpm": { + "ignoredBuiltDependencies": [ + "cypress", + "esbuild" + ], + "onlyBuiltDependencies": [ + "cypress", + "esbuild" + ] } } diff --git a/ui/src/pages/user_account_page/UserAccount.tsx b/ui/src/pages/user_account_page/UserAccount.tsx index 17b80d6..2e7d0b4 100644 --- a/ui/src/pages/user_account_page/UserAccount.tsx +++ b/ui/src/pages/user_account_page/UserAccount.tsx @@ -159,7 +159,9 @@ function VerifyEmailButton(props: { } > - +
    + +
    ) From 5cf718628bdcb9c3358259fbd85006afcd0de812 Mon Sep 17 00:00:00 2001 From: wisse Date: Sun, 16 Mar 2025 20:41:54 +0100 Subject: [PATCH 04/16] WIP: Started on implementing generic submit handler --- ui/src/api.tsx | 124 +++++++++++------ ui/src/components/LoginModal.tsx | 128 +++++++----------- ui/src/components/RegisterModal.tsx | 79 ++++------- ui/src/form_helpers.ts | 87 ++++++++++++ ui/src/pages/ResetPassword.tsx | 66 +++------ ui/src/pages/admin_page/UsersAdmin.tsx | 89 ++++-------- .../modals/ChangePassword.tsx | 84 ++++-------- .../modals/DeleteAccount.tsx | 66 ++++----- .../user_account_page/modals/Disable2FA.tsx | 63 +++------ .../user_account_page/modals/Enable2FA.tsx | 73 ++++------ 10 files changed, 395 insertions(+), 464 deletions(-) create mode 100644 ui/src/form_helpers.ts diff --git a/ui/src/api.tsx b/ui/src/api.tsx index 330ca7a..a4a9958 100644 --- a/ui/src/api.tsx +++ b/ui/src/api.tsx @@ -1,26 +1,28 @@ import { PaginationResult } from './models/Base' import { UserAttributes } from './models/User' -import { TranslationKeys } from './context/LocaleProvider' +import { TranslationKeys, useLocale } from './context/LocaleProvider' interface ErrorData { error: number message: string } -export async function getErrorMessage( - response: Response -): Promise { - const errorData: ErrorData = await response.json() - return errorMessages[errorData.error] || 'an_unknown_error_occurred' +export function getErrorMessage(response: ErrorData): string { + const { t } = useLocale() + + return t(errorMessages[response.error]) || t('an_unknown_error_occurred') } -export async function changePassword( - currentPassword: string, +export type ChangePasswordData = { + currentPassword: string newPassword: string -) { + confirmNewPassword: string +} + +export async function changePassword(data: ChangePasswordData) { return post('api/change_password', { - current_password: currentPassword, - new_password: newPassword, + current_password: data.currentPassword, + new_password: data.newPassword, }) } @@ -34,33 +36,47 @@ export async function getUsers( page: number, perPage: number ): Promise> { - const response = await get(`api/users?page=${page}&per_page=${perPage}`) - return response.json() + return await get(`api/users?page=${page}&per_page=${perPage}`).then( + (response) => response.json() + ) } -export async function resetPassword( - email: string, - resetToken: string, +export type ResetPasswordData = { + email: string + resetToken: string newPassword: string -) { + checkPassword: string +} + +export async function resetPassword(data: ResetPasswordData) { return post('api/reset_password', { - email: email, - reset_token: resetToken, - new_password: newPassword, + email: data.email, + reset_token: data.resetToken, + new_password: data.newPassword, }) } -export async function passwordLogin(email: string, password: string) { +export type PasswordLoginData = { + email: string + password: string +} + +export async function passwordLogin(data: PasswordLoginData) { return post('api/login', { - email: email, - password: password, + email: data.email, + password: data.password, }) } -export async function totpLogin(email: string, totpCode: string) { +export type TotpLoginData = { + totpCode: string + email: string +} + +export async function totpLogin(data: TotpLoginData) { return post('api/login_2fa', { - email: email, - totp_code: totpCode, + email: data.email, + totp_code: data.totpCode, }) } @@ -72,10 +88,16 @@ export async function deleteAccount() { return _delete('api/delete_account') } -export async function register(email: string, password: string) { +export type RegisterUserData = { + email: string + password: string + checkPassword: string +} + +export async function register(data: RegisterUserData) { return post('api/register', { - email: email, - password: password, + email: data.email, + password: data.password, }) } @@ -83,16 +105,26 @@ export async function generate2FASecret() { return get('api/generate_2fa_secret') } -export async function enable2FA(totpSecret: string, totpCode: string) { +export type Enable2FAData = { + totpSecret: string + totpCode: string +} + +export async function enable2FA(data: Enable2FAData) { + console.log(data) return post('api/enable_2fa', { - totp_secret: totpSecret, - totp_code: totpCode, + totp_secret: data.totpSecret, + totp_code: data.totpCode, }) } -export async function disable2FA(totpCode: string) { +export type Disable2FAData = { + totpCode: string +} + +export async function disable2FA(data: Disable2FAData) { return post('api/disable_2fa', { - totp_code: totpCode, + totp_code: data.totpCode, }) } @@ -111,20 +143,26 @@ export async function whoAmI() { return get('api/whoami') } -export async function createUser( - email: string, - password: string, +export type CreateUserFormData = { + email: string + password: string isAdmin: boolean -) { +} + +export async function createUser(data: CreateUserFormData) { return post(`api/users`, { - email: email, - password: password, - is_admin: isAdmin, + email: data.email, + password: data.password, + is_admin: data.isAdmin, }) } -export async function deleteUser(userId: number) { - return _delete(`api/user/${userId}`) +export type DeleteUserData = { + userID: number +} + +export async function deleteUser(data: DeleteUserData) { + return _delete(`api/user/${data.userID}`) } export async function get(url: string) { diff --git a/ui/src/components/LoginModal.tsx b/ui/src/components/LoginModal.tsx index e1148d7..90baf64 100644 --- a/ui/src/components/LoginModal.tsx +++ b/ui/src/components/LoginModal.tsx @@ -1,115 +1,83 @@ import { JSXElement, createSignal, Show } from 'solid-js' import { useNavigate, A } from '@solidjs/router' +import { pattern, email, required, setValue } from '@modular-forms/solid' + import { - clearResponse, - createForm, - reset, - pattern, - email, - required, - setResponse, - SubmitHandler, -} from '@modular-forms/solid' - -import { getErrorMessage, passwordLogin, totpLogin } from '../api' - -import { User } from '../models/User' + passwordLogin, + PasswordLoginData, + totpLogin, + TotpLoginData, +} from '../api' + +import { User, UserAttributes } from '../models/User' import { useUser } from '../context/UserProvider' import { useLocale } from '../context/LocaleProvider' import { Alert } from './Alert' import { TextInput } from './TextInput' import { Modal, ModalBaseProps } from './Modal' import { Button } from './Button' - -type LoginFormData = { - email: string - password: string -} - -type TotpFormData = { - totpCode: string -} +import { createFormWithSubmit } from '../form_helpers' export function LoginModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() const { setUser } = useUser() - const [currentEmail, setCurrentEmail] = createSignal(null) - const [loginForm, Login] = createForm() - const [totpForm, Totp] = createForm() - const [at2FAStep, setAt2FAStep] = createSignal(false) + const [closed, setClose] = createSignal(false) const navigate = useNavigate() - let loginModalRef: HTMLDialogElement | undefined + const [loginForm, onLoginSubmit, Login] = createFormWithSubmit< + PasswordLoginData, + UserAttributes + >({ + action: passwordLogin, + onFinish: (response) => { + if (response === undefined) { + return + } + const user = new User(response) - const onPasswordLogin: SubmitHandler = async (values) => { - const response = await passwordLogin(values.email, values.password) + if (user.twoFactorEnabled) { + setAt2FAStep(true) + setValue(totpForm, 'email', user.email) - if (response.status !== 200) { - setResponse(loginForm, { - status: 'error', - message: t(await getErrorMessage(response)), - }) - return - } + return + } - const data = await response.json() - const user = new User(data) - setResponse(loginForm, { status: 'success', data: data }) - setCurrentEmail(values.email) + setUser(user) + setClose(true) + navigate('/home') + }, + }) + + const [totpForm, onTotpSubmit, Totp] = createFormWithSubmit< + TotpLoginData, + UserAttributes + >({ + action: totpLogin, + onFinish: (response) => { + if (response === undefined) { + return + } + const user = new User(response) - if (user.twoFactorEnabled) { - setAt2FAStep(true) - } else { setUser(user) - loginModalRef?.close() - onClose() + setClose(true) navigate('/home') - } - } - - const onTotpLogin: SubmitHandler = async (values) => { - const response = await totpLogin(currentEmail() ?? '', values.totpCode) - - if (response.status !== 200) { - setResponse(totpForm, { - status: 'error', - message: (await response.json()).error_message, - }) - return - } - - const data = await response.json() - const user = new User(data) - setResponse(loginForm, { status: 'success', data: data }) - - setUser(user) - loginModalRef?.close() - onClose() - navigate('/home') - } - - const onClose = () => { - clearResponse(loginForm) - clearResponse(totpForm) - reset(loginForm) - reset(totpForm) - setAt2FAStep(false) - } + }, + }) return ( { - onClose() props.onClose() }} > - +
    - + () + const [state, onSubmit, {Form, Field}] = createFormWithSubmit< + RegisterUserData, + UserAttributes + >({ + action: register, + onFinish: (response) => { + if (response !== undefined) { + setUser(new User(response)) + } + + navigate('/home') + }, + }) const navigate = useNavigate() const newPassword = () => { - return getValue(registerForm, 'password', { + return getValue(state, 'password', { shouldActive: false, shouldTouched: true, shouldDirty: true, @@ -56,42 +58,17 @@ export function RegisterModal(props: ModalBaseProps): JSXElement { } } - const onSubmit: SubmitHandler = async (values) => { - const response = await register(values.email, values.password) - - if (response.status !== 200) { - setResponse(registerForm, { - status: 'error', - message: t(await getErrorMessage(response)), - }) - return - } - - const data = await response.json() - setUser(new User(data)) - setResponse(registerForm, { status: 'success', data: data }) - - onClose() - navigate('/home') - } - - const onClose = () => { - clearResponse(registerForm) - reset(registerForm) - } - return ( { - onClose() props.onClose() }} > - +
    - } /> )} - + - } /> )} - + - @@ -145,10 +122,10 @@ export function RegisterModal(props: ModalBaseProps): JSXElement { icon={} /> )} - + - - + +
    @@ -157,11 +134,11 @@ export function RegisterModal(props: ModalBaseProps): JSXElement { type="submit" class="w-full" color="primary" - isLoading={registerForm.submitting} + isLoading={state.submitting} />
    -     +     ) } diff --git a/ui/src/form_helpers.ts b/ui/src/form_helpers.ts new file mode 100644 index 0000000..97ccdb3 --- /dev/null +++ b/ui/src/form_helpers.ts @@ -0,0 +1,87 @@ +import { + clearResponse, + createForm, + FieldArrayPath, + FieldArrayProps, + FieldPath, + FieldPathValue, + FieldProps, + FieldValues, + FormOptions, + FormProps, + FormStore, + MaybeValue, + PartialKey, + reset, + ResponseData, + setResponse, +} from '@modular-forms/solid' +import { JSXElement } from 'solid-js' +import { getErrorMessage } from './api' + +export function createFormWithSubmit< + TType extends FieldValues, + TResponse extends ResponseData = undefined, +>(options: { + action: (values: TType) => Promise + onFinish?: (respone?: TResponse) => void | Promise + formOptions?: FormOptions +}): [ + FormStore, + (values: TType) => void, + { + Form: (props: Omit, 'of'>) => JSXElement + Field: >( + props: FieldPathValue extends MaybeValue + ? PartialKey< + Omit, 'of'>, + 'type' + > + : Omit, 'of'> + ) => JSXElement + FieldArray: >( + props: Omit, 'of'> + ) => JSXElement + }, +] { + const [store, { Form, Field, FieldArray }] = createForm( + options.formOptions + ) + + const onSubmit = createSubmitHandler({ + form: store, + action: options.action, + onFinish: options.onFinish, + }) + + return [store, onSubmit, { Form, Field, FieldArray }] +} + +export function createSubmitHandler< + TType extends FieldValues, + TResponse extends ResponseData = undefined, +>(options: { + form: FormStore + action: (values: TType) => Promise + onFinish?: (response: TResponse | undefined) => void | Promise +}): (values: TType) => void { + return async (values: TType) => { + const response = await options.action(values) + const data = await response.json() + + if (response.status !== 200) { + setResponse(options.form, { + status: 'error', + message: getErrorMessage(data), + }) + + return + } + + setResponse(options.form, { status: 'success', data: data }) + + await options.onFinish?.(options.form.response.data) + clearResponse(options.form) + reset(options.form) + } +} diff --git a/ui/src/pages/ResetPassword.tsx b/ui/src/pages/ResetPassword.tsx index ab1bf7b..79ff9e5 100644 --- a/ui/src/pages/ResetPassword.tsx +++ b/ui/src/pages/ResetPassword.tsx @@ -7,53 +7,31 @@ import { Alert } from '../components/Alert' import { useLocale } from '../context/LocaleProvider' -import { - getValue, - createForm, - required, - minLength, - pattern, - setResponse, - SubmitHandler, -} from '@modular-forms/solid' - -import { getErrorMessage, resetPassword } from '../api' +import { getValue, required, minLength, pattern } from '@modular-forms/solid' + +import { resetPassword, ResetPasswordData } from '../api' import { getSingleParam } from './SearchParams' import { Button } from '../components/Button' - -type PasswordResetFormData = { - password: string - checkPassword: string -} +import { createFormWithSubmit } from '../form_helpers' export function ResetPasswordPage(): JSXElement { const { t } = useLocale() const [searchParams] = useSearchParams() - const [resetPasswordForm, ResetPassword] = createForm() - - const onResetPassword: SubmitHandler = async ( - values - ) => { - const response = await resetPassword( - getSingleParam(searchParams.email), - getSingleParam(searchParams.reset_token), - values.password - ) - - if (response.status !== 200) { - setResponse(resetPasswordForm, { - status: 'error', - message: t(await getErrorMessage(response)), - }) - return - } - setResponse(resetPasswordForm, { status: 'success' }) - } + const [resetPasswordForm, onSubmit, { Form, Field }] = + createFormWithSubmit({ + action: resetPassword, + formOptions: { + initialValues: { + email: getSingleParam(searchParams.email), + resetToken: getSingleParam(searchParams.resetToken), + }, + }, + }) const newPassword = () => { - return getValue(resetPasswordForm, 'password', { + return getValue(resetPasswordForm, 'newPassword', { shouldActive: false, shouldTouched: true, shouldDirty: true, @@ -79,9 +57,9 @@ export function ResetPasswordPage(): JSXElement {
    - - + } /> )} - + - } /> )} - +
    @@ -158,7 +136,7 @@ export function ResetPasswordPage(): JSXElement { color="primary" />
    -     +
    diff --git a/ui/src/pages/admin_page/UsersAdmin.tsx b/ui/src/pages/admin_page/UsersAdmin.tsx index 51f6ec1..99d809a 100644 --- a/ui/src/pages/admin_page/UsersAdmin.tsx +++ b/ui/src/pages/admin_page/UsersAdmin.tsx @@ -3,7 +3,13 @@ import { createSignal, createResource, JSXElement, Show, For } from 'solid-js' import { UserAttributes } from '../../models/User' import { Alert } from '../../components/Alert' import { Pagination } from '../../components/Pagination' -import { createUser, getUsers, deleteUser } from '../../api' +import { + createUser, + getUsers, + deleteUser, + CreateUserFormData, + DeleteUserData, +} from '../../api' import { BooleanInput } from '../../components/BooleanInput' import { TextInput } from '../../components/TextInput' @@ -12,19 +18,16 @@ import { createModalState, Modal, ModalBaseProps } from '../../components/Modal' import { useLocale } from '../../context/LocaleProvider' import { - clearResponse, createForm, - reset, pattern, email, minLength, required, - setResponse, - SubmitHandler, } from '@modular-forms/solid' import { Table, TableRow } from '../../components/Table' import { Tooltip } from '../../components/Tooltip' import { Button } from '../../components/Button' +import { createFormWithSubmit, createSubmitHandler } from '../../form_helpers' export function UsersAdmin(): JSXElement { const { t } = useLocale() @@ -182,28 +185,16 @@ function DeleteUserModal( } & ModalBaseProps ): JSXElement { const { t } = useLocale() + const user = () => props.user - const [deleteForm, Delete] = createForm() - - const handleDelete = async () => { - if (props.user === null || props.user.id === null) { - return - } - - const response = await deleteUser(props.user.id) - - if (response.status !== 200) { - setResponse(deleteForm, { - status: 'error', - message: (await response.json()).error_message, - }) - return - } - - setResponse(deleteForm, { status: 'success' }) - props.onClose() - props.onDelete() - } + const [deleteForm, onSubmit, Delete] = createFormWithSubmit({ + action: deleteUser, + onFinish: () => { + props.onDelete() + props.onClose() + }, + formOptions: { initialValues: { userID: user()?.id ?? 0 } }, + }) return ( {t('delete_user_confirmation')}

    {props.user?.email}

    - + @@ -246,45 +237,25 @@ interface CreateUserModalProps extends ModalBaseProps { onCreate: () => void } -type CreateUserFormData = { - email: string - password: string - isAdmin: boolean -} - function CreateUserModal(props: CreateUserModalProps): JSXElement { const { t } = useLocale() const [createUserForm, Create] = createForm() - const handleCreate: SubmitHandler = async (values) => { - const response = await createUser( - values.email, - values.password, - values.isAdmin - ) - - if (response.status !== 200) { - setResponse(createUserForm, { - status: 'error', - message: (await response.json()).error_message, - }) - return - } - - setResponse(createUserForm, { status: 'success' }) - onClose() - props.onCreate() - } - - const onClose = () => { - reset(createUserForm) - clearResponse(createUserForm) - props.onClose() - } + const handleCreate = createSubmitHandler({ + form: createUserForm, + action: createUser, + onFinish: () => { + props.onClose() + }, + }) return ( - + props.onClose()} + >
    () - - const { setUser } = useUser() + >({ + action: changePassword, + onFinish: () => { + props.onClose() + }, + }) - const saved = () => { - return changePasswordForm.submitted === true + const onClose = () => { + reset(state) + props.onClose() } const newPassword = () => { - return getValue(changePasswordForm, 'newPassword', { + return getValue(state, 'newPassword', { shouldActive: false, shouldTouched: true, shouldDirty: true, @@ -62,49 +58,17 @@ export function ChangePasswordModal(props: ModalBaseProps): JSXElement { } createEffect(() => { - if (saved()) { - if (changePasswordForm.response.status === 'success') { - if (changePasswordForm.response.data !== undefined) { - setUser(new User(changePasswordForm.response.data)) + if (state.submitted === true) { + if (state.response.status === 'success') { + if (state.response.data !== undefined) { + setUser(new User(state.response.data)) } } } }) - const onSubmit: SubmitHandler = async (values) => { - const response = await changePassword( - values.currentPassword, - values.newPassword - ) - - if (response.status !== 200) { - setResponse(changePasswordForm, { - status: 'error', - message: t(await getErrorMessage(response)), - }) - - return - } - - const data = await response.json() - - setResponse(changePasswordForm, { - status: 'success', - data: data, - }) - - props.onClose() - - clearResponse(changePasswordForm) - reset(changePasswordForm) - } - return ( - +
    {(field, props) => ( @@ -155,8 +119,8 @@ export function ChangePasswordModal(props: ModalBaseProps): JSXElement { )} - - + +
    @@ -164,7 +128,7 @@ export function ChangePasswordModal(props: ModalBaseProps): JSXElement { label={t('change_password')} type="submit" color="primary" - isLoading={changePasswordForm.submitting} + isLoading={state.submitting} />
    diff --git a/ui/src/pages/user_account_page/modals/DeleteAccount.tsx b/ui/src/pages/user_account_page/modals/DeleteAccount.tsx index 6cff259..1937c0f 100644 --- a/ui/src/pages/user_account_page/modals/DeleteAccount.tsx +++ b/ui/src/pages/user_account_page/modals/DeleteAccount.tsx @@ -1,12 +1,13 @@ -import { createSignal, JSXElement, Show } from 'solid-js' +import { JSXElement, Show } from 'solid-js' import { useNavigate } from '@solidjs/router' import { useUser } from '../../../context/UserProvider' import { useLocale } from '../../../context/LocaleProvider' -import { deleteAccount, getErrorMessage } from '../../../api' +import { deleteAccount } from '../../../api' import { Modal, ModalBaseProps } from '../../../components/Modal' import { Alert } from '../../../components/Alert' import { Button } from '../../../components/Button' +import { createFormWithSubmit } from '../../../form_helpers' export function DeleteAccountModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() @@ -14,24 +15,13 @@ export function DeleteAccountModal(props: ModalBaseProps): JSXElement { const navigate = useNavigate() - const [deleting, setDeleting] = createSignal(false) - const [errorMsg, setErrorMsg] = createSignal(undefined) - - const onDeleteAccount = async () => { - setDeleting(true) - setErrorMsg(undefined) - - const response = await deleteAccount() - if (response.status !== 200) { - setErrorMsg(t(await getErrorMessage(response))) - setDeleting(false) - return - } - - setUser(null) - setDeleting(false) - navigate('/home') - } + const [state, onSubmit, { Form }] = createFormWithSubmit({ + action: deleteAccount, + onFinish: () => { + setUser(null) + navigate('/home') + }, + }) return ( {t('are_you_sure_you_want_to_delete_your_account')}

    {t('this_action_cannot_be_undone')}

    - - + + -
    -
    +
    +
    +
    +     ) } diff --git a/ui/src/pages/user_account_page/modals/Disable2FA.tsx b/ui/src/pages/user_account_page/modals/Disable2FA.tsx index 56a26bf..5bb9949 100644 --- a/ui/src/pages/user_account_page/modals/Disable2FA.tsx +++ b/ui/src/pages/user_account_page/modals/Disable2FA.tsx @@ -1,55 +1,28 @@ import { JSXElement, Show } from 'solid-js' -import { disable2FA, getErrorMessage } from '../../../api' +import { disable2FA, Disable2FAData } from '../../../api' import { useUser } from '../../../context/UserProvider' import { useLocale } from '../../../context/LocaleProvider' -import { - required, - pattern, - createForm, - clearResponse, - reset, - setResponse, - SubmitHandler, -} from '@modular-forms/solid' +import { required, pattern } from '@modular-forms/solid' import { Alert } from '../../../components/Alert' import { Modal, ModalBaseProps } from '../../../components/Modal' import { TextInput } from '../../../components/TextInput' import { Button } from '../../../components/Button' - -type TotpFormData = { - totpCode: string -} +import { createFormWithSubmit } from '../../../form_helpers' export function Disable2FAModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() const { fetchUser } = useUser() - const [totpForm, Totp] = createForm() - - const onDisable2FA: SubmitHandler = async (values) => { - const response = await disable2FA(values.totpCode) - - if (response.status !== 200) { - setResponse(totpForm, { - status: 'error', - message: t(await getErrorMessage(response)), - }) - return - } - - await fetchUser() - setResponse(totpForm, { status: 'success' }) - - onClose() - props.onClose() - } - - const onClose = () => { - clearResponse(totpForm) - reset(totpForm) - } + const [state, onSubmit, { Form, Field }] = + createFormWithSubmit({ + action: disable2FA, + onFinish: () => { + fetchUser() + props.onClose() + }, + }) return ( - - + } /> )} - + - - + +
    @@ -90,10 +63,10 @@ export function Disable2FAModal(props: ModalBaseProps): JSXElement { label={t('disable_2fa')} type="submit" color="primary" - isLoading={totpForm.submitting} + isLoading={state.submitting} />
    -     +
    ) diff --git a/ui/src/pages/user_account_page/modals/Enable2FA.tsx b/ui/src/pages/user_account_page/modals/Enable2FA.tsx index 55e8190..56dc496 100644 --- a/ui/src/pages/user_account_page/modals/Enable2FA.tsx +++ b/ui/src/pages/user_account_page/modals/Enable2FA.tsx @@ -1,76 +1,59 @@ import { createSignal, onMount, JSXElement, Show } from 'solid-js' -import { enable2FA, generate2FASecret, getErrorMessage } from '../../../api' +import { enable2FA, Enable2FAData, generate2FASecret } from '../../../api' import { useUser } from '../../../context/UserProvider' import { useLocale } from '../../../context/LocaleProvider' -import { - required, - pattern, - createForm, - clearResponse, - reset, - setResponse, - SubmitHandler, -} from '@modular-forms/solid' +import { required, pattern, setValue, getValue } from '@modular-forms/solid' import { Alert } from '../../../components/Alert' import { Modal, ModalBaseProps } from '../../../components/Modal' import { TextInput } from '../../../components/TextInput' import { Button } from '../../../components/Button' - -type TotpFormData = { - totpCode: string -} +import { createFormWithSubmit } from '../../../form_helpers' export function Enable2FAModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() const { fetchUser } = useUser() - const [totpSecret, setTotpSecret] = createSignal('') const [qrCode, setQrCode] = createSignal('') - const [totpForm, Totp] = createForm() + const [state, onSubmit, { Form, Field }] = + createFormWithSubmit({ + action: enable2FA, + onFinish: () => { + fetchUser() + props.onClose() + }, + formOptions:{initialValues: {totpSecret: ""}} + }) const fetchQRCode = async () => { const response = await generate2FASecret() const data = await response.json() setQrCode(data.qr_code) - setTotpSecret(data.totp_secret) - } - const onEnable2FA: SubmitHandler = async (values) => { - const response = await enable2FA(totpSecret(), values.totpCode) + // TODO this is not correctly set yet. + setValue(state, 'totpSecret', data.totp_secret, { shouldTouched: true, shouldDirty: true}) - if (response.status !== 200) { - setResponse(totpForm, { - status: 'error', - message: t(await getErrorMessage(response)), + console.log( + getValue(state, 'totpSecret', { + shouldDirty: false, + shouldTouched: false, + shouldValid: false, + shouldActive: false, }) - return - } - - await fetchUser() - setResponse(totpForm, { status: 'success' }) - - onClose() - props.onClose() + ) } onMount(() => { fetchQRCode() }) - const onClose = () => { - clearResponse(totpForm) - reset(totpForm) - } - return ( { - onClose() props.onClose() }} > @@ -107,8 +90,8 @@ export function Enable2FAModal(props: ModalBaseProps): JSXElement { {t('enter_the_6_digit_code_generated_by_your_authenticator_app')}

    - - + } /> )} - + - - + +
    @@ -135,10 +118,10 @@ export function Enable2FAModal(props: ModalBaseProps): JSXElement { label={t('enable_2fa')} type="submit" color="primary" - isLoading={totpForm.submitting} + isLoading={state.submitting} />
    -     +
    ) From da5c96283d709889e743a5bc2a11b9717cb0787b Mon Sep 17 00:00:00 2001 From: wisse Date: Mon, 17 Mar 2025 08:27:34 +0100 Subject: [PATCH 05/16] WIP: Hack field setter --- ui/src/pages/user_account_page/modals/Enable2FA.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/ui/src/pages/user_account_page/modals/Enable2FA.tsx b/ui/src/pages/user_account_page/modals/Enable2FA.tsx index 56dc496..3684319 100644 --- a/ui/src/pages/user_account_page/modals/Enable2FA.tsx +++ b/ui/src/pages/user_account_page/modals/Enable2FA.tsx @@ -33,7 +33,14 @@ export function Enable2FAModal(props: ModalBaseProps): JSXElement { setQrCode(data.qr_code) // TODO this is not correctly set yet. - setValue(state, 'totpSecret', data.totp_secret, { shouldTouched: true, shouldDirty: true}) + setValue(state, 'totpSecret', data.totp_secret) + + // Dirty hack to get the fieldsette to work + if (state.internal.fields.totpSecret !== undefined) { + state.internal.fields.totpSecret.dirty.set(true) + state.internal.fields.totpSecret.touched.set(true) + state.internal.fields.totpSecret.active.set(true) + } console.log( getValue(state, 'totpSecret', { From 24ff1b02dc0d139f86e68e4aa44132479260789f Mon Sep 17 00:00:00 2001 From: wisse Date: Mon, 17 Mar 2025 20:37:05 +0100 Subject: [PATCH 06/16] Add additional data setter --- ui/src/components/LoginModal.tsx | 8 +++--- ui/src/form_helpers.ts | 20 ++++++++++++--- .../user_account_page/modals/Enable2FA.tsx | 25 +++---------------- 3 files changed, 24 insertions(+), 29 deletions(-) diff --git a/ui/src/components/LoginModal.tsx b/ui/src/components/LoginModal.tsx index 90baf64..230ef9c 100644 --- a/ui/src/components/LoginModal.tsx +++ b/ui/src/components/LoginModal.tsx @@ -1,7 +1,7 @@ import { JSXElement, createSignal, Show } from 'solid-js' import { useNavigate, A } from '@solidjs/router' -import { pattern, email, required, setValue } from '@modular-forms/solid' +import { pattern, email, required } from '@modular-forms/solid' import { passwordLogin, @@ -24,7 +24,7 @@ export function LoginModal(props: ModalBaseProps): JSXElement { const { setUser } = useUser() const [at2FAStep, setAt2FAStep] = createSignal(false) - const [closed, setClose] = createSignal(false) + const [closed, setClose] = createSignal() const navigate = useNavigate() @@ -41,7 +41,7 @@ export function LoginModal(props: ModalBaseProps): JSXElement { if (user.twoFactorEnabled) { setAt2FAStep(true) - setValue(totpForm, 'email', user.email) + setData({ email: user.email }) return } @@ -52,7 +52,7 @@ export function LoginModal(props: ModalBaseProps): JSXElement { }, }) - const [totpForm, onTotpSubmit, Totp] = createFormWithSubmit< + const [totpForm, onTotpSubmit, Totp, setData] = createFormWithSubmit< TotpLoginData, UserAttributes >({ diff --git a/ui/src/form_helpers.ts b/ui/src/form_helpers.ts index 97ccdb3..5294780 100644 --- a/ui/src/form_helpers.ts +++ b/ui/src/form_helpers.ts @@ -16,9 +16,13 @@ import { ResponseData, setResponse, } from '@modular-forms/solid' -import { JSXElement } from 'solid-js' +import { Accessor, createSignal, JSXElement, Setter } from 'solid-js' import { getErrorMessage } from './api' +/** + * TODO + * + */ export function createFormWithSubmit< TType extends FieldValues, TResponse extends ResponseData = undefined, @@ -43,18 +47,22 @@ export function createFormWithSubmit< props: Omit, 'of'> ) => JSXElement }, + Setter>, ] { const [store, { Form, Field, FieldArray }] = createForm( options.formOptions ) + const [data, setData] = createSignal>() + const onSubmit = createSubmitHandler({ form: store, action: options.action, onFinish: options.onFinish, + additionalData: data, }) - return [store, onSubmit, { Form, Field, FieldArray }] + return [store, onSubmit, { Form, Field, FieldArray }, setData] } export function createSubmitHandler< @@ -64,9 +72,15 @@ export function createSubmitHandler< form: FormStore action: (values: TType) => Promise onFinish?: (response: TResponse | undefined) => void | Promise + additionalData?: Accessor> }): (values: TType) => void { return async (values: TType) => { - const response = await options.action(values) + let merged = values + if (options.additionalData !== undefined) { + merged = { ...options.additionalData(), ...values } + } + + const response = await options.action(merged) const data = await response.json() if (response.status !== 200) { diff --git a/ui/src/pages/user_account_page/modals/Enable2FA.tsx b/ui/src/pages/user_account_page/modals/Enable2FA.tsx index 3684319..94c6bd9 100644 --- a/ui/src/pages/user_account_page/modals/Enable2FA.tsx +++ b/ui/src/pages/user_account_page/modals/Enable2FA.tsx @@ -3,7 +3,7 @@ import { enable2FA, Enable2FAData, generate2FASecret } from '../../../api' import { useUser } from '../../../context/UserProvider' import { useLocale } from '../../../context/LocaleProvider' -import { required, pattern, setValue, getValue } from '@modular-forms/solid' +import { required, pattern, } from '@modular-forms/solid' import { Alert } from '../../../components/Alert' import { Modal, ModalBaseProps } from '../../../components/Modal' @@ -17,39 +17,20 @@ export function Enable2FAModal(props: ModalBaseProps): JSXElement { const [qrCode, setQrCode] = createSignal('') - const [state, onSubmit, { Form, Field }] = + const [state, onSubmit, { Form, Field }, setData] = createFormWithSubmit({ action: enable2FA, onFinish: () => { fetchUser() props.onClose() }, - formOptions:{initialValues: {totpSecret: ""}} }) const fetchQRCode = async () => { const response = await generate2FASecret() const data = await response.json() setQrCode(data.qr_code) - - // TODO this is not correctly set yet. - setValue(state, 'totpSecret', data.totp_secret) - - // Dirty hack to get the fieldsette to work - if (state.internal.fields.totpSecret !== undefined) { - state.internal.fields.totpSecret.dirty.set(true) - state.internal.fields.totpSecret.touched.set(true) - state.internal.fields.totpSecret.active.set(true) - } - - console.log( - getValue(state, 'totpSecret', { - shouldDirty: false, - shouldTouched: false, - shouldValid: false, - shouldActive: false, - }) - ) + setData({totpSecret: data.totp_secret}) } onMount(() => { From 7fc4b2c68fada188fb24bb64a2c79debf6ff98e8 Mon Sep 17 00:00:00 2001 From: wisse Date: Tue, 18 Mar 2025 07:43:08 +0100 Subject: [PATCH 07/16] Cleanup --- ui/src/api.tsx | 17 +++--- ui/src/pages/ForgotPassword.tsx | 53 +++++------------ ui/src/pages/ResetPassword.tsx | 13 +++-- ui/src/pages/admin_page/UsersAdmin.tsx | 80 ++++++++++++-------------- 4 files changed, 68 insertions(+), 95 deletions(-) diff --git a/ui/src/api.tsx b/ui/src/api.tsx index a4a9958..e1187d1 100644 --- a/ui/src/api.tsx +++ b/ui/src/api.tsx @@ -1,6 +1,5 @@ import { PaginationResult } from './models/Base' import { UserAttributes } from './models/User' -import { TranslationKeys, useLocale } from './context/LocaleProvider' interface ErrorData { error: number @@ -8,9 +7,7 @@ interface ErrorData { } export function getErrorMessage(response: ErrorData): string { - const { t } = useLocale() - - return t(errorMessages[response.error]) || t('an_unknown_error_occurred') + return errorMessages[response.error] || 'an_unknown_error_occurred' } export type ChangePasswordData = { @@ -26,9 +23,13 @@ export async function changePassword(data: ChangePasswordData) { }) } -export async function forgotPassword(email: string) { +export type ForgotPasswordData = { + email: string +} + +export async function forgotPassword(data: ForgotPasswordData) { return post('api/forgot_password', { - email: email, + email: data.email, }) } @@ -143,13 +144,13 @@ export async function whoAmI() { return get('api/whoami') } -export type CreateUserFormData = { +export type CreateUserData = { email: string password: string isAdmin: boolean } -export async function createUser(data: CreateUserFormData) { +export async function createUser(data: CreateUserData) { return post(`api/users`, { email: data.email, password: data.password, diff --git a/ui/src/pages/ForgotPassword.tsx b/ui/src/pages/ForgotPassword.tsx index ec22972..a588354 100644 --- a/ui/src/pages/ForgotPassword.tsx +++ b/ui/src/pages/ForgotPassword.tsx @@ -6,42 +6,19 @@ import { TopBar } from '../components/TopBar' import { TextInput } from '../components/TextInput' import { useLocale } from '../context/LocaleProvider' -import { - createForm, - email, - required, - setResponse, - SubmitHandler, -} from '@modular-forms/solid' +import { email, required } from '@modular-forms/solid' -import { forgotPassword, getErrorMessage } from '../api' +import { forgotPassword, ForgotPasswordData } from '../api' import { Button } from '../components/Button' - -type ForgotPasswordFormData = { - email: string -} +import { createFormWithSubmit } from '../form_helpers' export function ForgotPasswordPage(): JSXElement { const { t } = useLocale() - const [forgotPasswordForm, ForgotPassword] = - createForm() - - const onPasswordReset: SubmitHandler = async ( - values - ) => { - const response = await forgotPassword(values.email) - - if (response.status !== 200) { - setResponse(forgotPasswordForm, { - status: 'error', - message: t(await getErrorMessage(response)), - }) - return - } - - setResponse(forgotPasswordForm, { status: 'success' }) - } + const [state, onSubmit, { Form, Field }] = + createFormWithSubmit({ + action: forgotPassword, + }) return ( <> @@ -55,8 +32,8 @@ export function ForgotPasswordPage(): JSXElement {
    - - + } /> )} - + - +
    - +
    @@ -105,10 +82,10 @@ export function ForgotPasswordPage(): JSXElement { label={t('send_reset_email')} color="primary" type="submit" - isLoading={forgotPasswordForm.submitting} + isLoading={state.submitting} />
    -     +
    diff --git a/ui/src/pages/ResetPassword.tsx b/ui/src/pages/ResetPassword.tsx index 79ff9e5..10af90d 100644 --- a/ui/src/pages/ResetPassword.tsx +++ b/ui/src/pages/ResetPassword.tsx @@ -19,7 +19,7 @@ export function ResetPasswordPage(): JSXElement { const [searchParams] = useSearchParams() - const [resetPasswordForm, onSubmit, { Form, Field }] = + const [state, onSubmit, { Form, Field }] = createFormWithSubmit({ action: resetPassword, formOptions: { @@ -30,8 +30,9 @@ export function ResetPasswordPage(): JSXElement { }, }) + // TODO this could be shared. const newPassword = () => { - return getValue(resetPasswordForm, 'newPassword', { + return getValue(state, 'newPassword', { shouldActive: false, shouldTouched: true, shouldDirty: true, @@ -105,7 +106,7 @@ export function ResetPasswordPage(): JSXElement { )} - +
    - +
    @@ -131,7 +132,7 @@ export function ResetPasswordPage(): JSXElement {
    - + ) } @@ -240,15 +236,13 @@ interface CreateUserModalProps extends ModalBaseProps { function CreateUserModal(props: CreateUserModalProps): JSXElement { const { t } = useLocale() - const [createUserForm, Create] = createForm() - - const handleCreate = createSubmitHandler({ - form: createUserForm, - action: createUser, - onFinish: () => { - props.onClose() - }, - }) + const [state, onSubmit, { Form, Field }] = + createFormWithSubmit({ + action: createUser, + onFinish: () => { + props.onClose() + }, + }) return ( props.onClose()} >
    - - + } /> )} - + - } /> )} - + - + {(field, props) => ( )} - + - - + +
    @@ -321,10 +315,10 @@ function CreateUserModal(props: CreateUserModalProps): JSXElement { type="submit" color="primary" class="mt-4 w-full" - isLoading={createUserForm.submitting} + isLoading={state.submitting} />
    -     +
    ) From 4aa1db9165f5a40717098525ed79afa0e07c2313 Mon Sep 17 00:00:00 2001 From: wisse Date: Thu, 20 Mar 2025 19:15:53 +0100 Subject: [PATCH 08/16] WIP: Share password matcher --- ui/src/components/RegisterModal.tsx | 5 +- ui/src/form_helpers.ts | 16 +++++- ui/src/pages/ResetPassword.tsx | 28 +++------- .../modals/ChangePassword.tsx | 52 ++++--------------- ui/src/validators.ts | 9 ++++ 5 files changed, 43 insertions(+), 67 deletions(-) create mode 100644 ui/src/validators.ts diff --git a/ui/src/components/RegisterModal.tsx b/ui/src/components/RegisterModal.tsx index cb16c65..48c44a0 100644 --- a/ui/src/components/RegisterModal.tsx +++ b/ui/src/components/RegisterModal.tsx @@ -24,8 +24,9 @@ import { createFormWithSubmit } from '../form_helpers' export function RegisterModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() const { setUser } = useUser() + const navigate = useNavigate() - const [state, onSubmit, {Form, Field}] = createFormWithSubmit< + const [state, onSubmit, { Form, Field }] = createFormWithSubmit< RegisterUserData, UserAttributes >({ @@ -39,8 +40,6 @@ export function RegisterModal(props: ModalBaseProps): JSXElement { }, }) - const navigate = useNavigate() - const newPassword = () => { return getValue(state, 'password', { shouldActive: false, diff --git a/ui/src/form_helpers.ts b/ui/src/form_helpers.ts index 5294780..8ccfbbb 100644 --- a/ui/src/form_helpers.ts +++ b/ui/src/form_helpers.ts @@ -3,18 +3,20 @@ import { createForm, FieldArrayPath, FieldArrayProps, - FieldPath, FieldPathValue, FieldProps, FieldValues, FormOptions, FormProps, FormStore, + FieldPath, + getValue, MaybeValue, PartialKey, reset, ResponseData, setResponse, + Maybe, } from '@modular-forms/solid' import { Accessor, createSignal, JSXElement, Setter } from 'solid-js' import { getErrorMessage } from './api' @@ -48,6 +50,7 @@ export function createFormWithSubmit< ) => JSXElement }, Setter>, + (name: FieldPath) => Maybe>> ] { const [store, { Form, Field, FieldArray }] = createForm( options.formOptions @@ -55,6 +58,15 @@ export function createFormWithSubmit< const [data, setData] = createSignal>() + const accessor = (name: FieldPath) => { + return getValue(store, name, { + shouldActive: false, + shouldTouched: true, + shouldDirty: true, + shouldValid: true, + }) + } + const onSubmit = createSubmitHandler({ form: store, action: options.action, @@ -62,7 +74,7 @@ export function createFormWithSubmit< additionalData: data, }) - return [store, onSubmit, { Form, Field, FieldArray }, setData] + return [store, onSubmit, { Form, Field, FieldArray }, setData, accessor] } export function createSubmitHandler< diff --git a/ui/src/pages/ResetPassword.tsx b/ui/src/pages/ResetPassword.tsx index 10af90d..2cdc272 100644 --- a/ui/src/pages/ResetPassword.tsx +++ b/ui/src/pages/ResetPassword.tsx @@ -1,4 +1,4 @@ -import { JSXElement, Show } from 'solid-js' +import { JSXElement, Show } from 'solid-js' import { A, useSearchParams } from '@solidjs/router' import { TopBar } from '../components/TopBar' @@ -7,19 +7,21 @@ import { Alert } from '../components/Alert' import { useLocale } from '../context/LocaleProvider' -import { getValue, required, minLength, pattern } from '@modular-forms/solid' +import { required, minLength, pattern } from '@modular-forms/solid' import { resetPassword, ResetPasswordData } from '../api' import { getSingleParam } from './SearchParams' import { Button } from '../components/Button' import { createFormWithSubmit } from '../form_helpers' +import { mustMatch } from '../validators' + export function ResetPasswordPage(): JSXElement { const { t } = useLocale() const [searchParams] = useSearchParams() - const [state, onSubmit, { Form, Field }] = + const [state, onSubmit, { Form, Field }, setData, getValue] = createFormWithSubmit({ action: resetPassword, formOptions: { @@ -30,23 +32,7 @@ export function ResetPasswordPage(): JSXElement { }, }) - // TODO this could be shared. - const newPassword = () => { - return getValue(state, 'newPassword', { - shouldActive: false, - shouldTouched: true, - shouldDirty: true, - shouldValid: true, - }) - } - - const mustMatch = ( - error: string - ): ((value: string | undefined) => string) => { - return (value: string | undefined) => { - return value !== newPassword() ? error : '' - } - } + const newPassword = () => getValue('newPassword') return ( <> @@ -91,7 +77,7 @@ export function ResetPasswordPage(): JSXElement { name="checkPassword" validate={[ required(t('please_confirm_your_new_password')), - mustMatch(t('passwords_do_not_match')), + mustMatch(newPassword)(t('passwords_do_not_match')), ]} > {(field, props) => ( diff --git a/ui/src/pages/user_account_page/modals/ChangePassword.tsx b/ui/src/pages/user_account_page/modals/ChangePassword.tsx index 5f4b116..d17ef3d 100644 --- a/ui/src/pages/user_account_page/modals/ChangePassword.tsx +++ b/ui/src/pages/user_account_page/modals/ChangePassword.tsx @@ -4,58 +4,26 @@ import { useUser } from '../../../context/UserProvider' import { useLocale } from '../../../context/LocaleProvider' import { changePassword, ChangePasswordData } from '../../../api' -import { - getValue, - minLength, - pattern, - required, - reset, -} from '@modular-forms/solid' +import { minLength, pattern, required } from '@modular-forms/solid' import { Alert } from '../../../components/Alert' import { TextInput } from '../../../components/TextInput' import { Modal, ModalBaseProps } from '../../../components/Modal' import { Button } from '../../../components/Button' import { createFormWithSubmit } from '../../../form_helpers' +import { mustMatch } from '../../../validators' export function ChangePasswordModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() const { setUser } = useUser() - const [state, onSubmit, { Form, Field }] = createFormWithSubmit< - ChangePasswordData, - UserAttributes - >({ - action: changePassword, - onFinish: () => { - props.onClose() - }, - }) - - const onClose = () => { - reset(state) - props.onClose() - } - - const newPassword = () => { - return getValue(state, 'newPassword', { - shouldActive: false, - shouldTouched: true, - shouldDirty: true, - shouldValid: true, + const [state, onSubmit, { Form, Field }, setData, getValue] = + createFormWithSubmit({ + action: changePassword, + onFinish: () => { + props.onClose() + }, }) - } - - /** - * Custom validator that checks whether the new password matches the new password. - */ - const mustMatch = ( - error: string - ): ((value: string | undefined) => string) => { - return (value: string | undefined) => { - return value !== newPassword() ? error : '' - } - } createEffect(() => { if (state.submitted === true) { @@ -67,6 +35,8 @@ export function ChangePasswordModal(props: ModalBaseProps): JSXElement { } }) + const newPassword = () => getValue('newPassword') + return (
    @@ -105,7 +75,7 @@ export function ChangePasswordModal(props: ModalBaseProps): JSXElement { {(field, props) => ( ) { + return (error: string): ((value: string | undefined) => string) => { + return (value: string | undefined) => { + return value !== match() ? error : '' + } + } +} From 66f5a74d7565381c194cef18795d1db40dfbfc73 Mon Sep 17 00:00:00 2001 From: wisse Date: Fri, 21 Mar 2025 21:08:39 +0100 Subject: [PATCH 09/16] Working towards cleanup --- ui/src/api.tsx | 3 +- ui/src/components/Alert.tsx | 13 ++- ui/src/components/LoginModal.tsx | 35 ++++---- ui/src/components/RegisterModal.tsx | 11 +-- ui/src/context/LocaleProvider.tsx | 1 + ui/src/form_helpers.ts | 90 ++++++++++++------- ui/src/pages/ForgotPassword.tsx | 19 ++-- ui/src/pages/ResetPassword.tsx | 33 +++---- ui/src/pages/VerifyEmail.tsx | 7 +- ui/src/pages/admin_page/UsersAdmin.tsx | 66 +++++++++----- .../modals/ChangePassword.tsx | 28 +++--- .../modals/DeleteAccount.tsx | 8 +- .../user_account_page/modals/Disable2FA.tsx | 21 +++-- .../user_account_page/modals/Enable2FA.tsx | 26 +++--- 14 files changed, 222 insertions(+), 139 deletions(-) diff --git a/ui/src/api.tsx b/ui/src/api.tsx index e1187d1..dedb31f 100644 --- a/ui/src/api.tsx +++ b/ui/src/api.tsx @@ -1,3 +1,4 @@ +import { TranslationKey, TranslationKeys } from './context/LocaleProvider' import { PaginationResult } from './models/Base' import { UserAttributes } from './models/User' @@ -6,7 +7,7 @@ interface ErrorData { message: string } -export function getErrorMessage(response: ErrorData): string { +export function getErrorMessage(response: ErrorData): TranslationKey { return errorMessages[response.error] || 'an_unknown_error_occurred' } diff --git a/ui/src/components/Alert.tsx b/ui/src/components/Alert.tsx index dd7779e..960126c 100644 --- a/ui/src/components/Alert.tsx +++ b/ui/src/components/Alert.tsx @@ -1,13 +1,18 @@ import { JSXElement } from 'solid-js' import { clsx } from 'clsx' +import { TranslationKey, TranslationKeys, useLocale } from '../context/LocaleProvider' interface AlertProps { type: 'info' | 'error' | 'success' | 'warning' - message?: string - extraClasses?: string + message?: TranslationKeys | string + class?: string } export function Alert(props: AlertProps): JSXElement { + const { t } = useLocale() + const message = () => + t(props.message as TranslationKey) ?? props.message + const types = { info: { alert: 'alert-info', icon: 'fa-circle-info' }, error: { alert: 'alert-error', icon: 'fa-circle-xmark' }, @@ -18,10 +23,10 @@ export function Alert(props: AlertProps): JSXElement { return ( ) } diff --git a/ui/src/components/LoginModal.tsx b/ui/src/components/LoginModal.tsx index 230ef9c..af47300 100644 --- a/ui/src/components/LoginModal.tsx +++ b/ui/src/components/LoginModal.tsx @@ -17,7 +17,7 @@ import { Alert } from './Alert' import { TextInput } from './TextInput' import { Modal, ModalBaseProps } from './Modal' import { Button } from './Button' -import { createFormWithSubmit } from '../form_helpers' +import { createFormState } from '../form_helpers' export function LoginModal(props: ModalBaseProps): JSXElement { const { t } = useLocale() @@ -28,10 +28,11 @@ export function LoginModal(props: ModalBaseProps): JSXElement { const navigate = useNavigate() - const [loginForm, onLoginSubmit, Login] = createFormWithSubmit< - PasswordLoginData, - UserAttributes - >({ + const { + state: loginState, + onSubmit: onLoginSubmit, + components: Login, + } = createFormState({ action: passwordLogin, onFinish: (response) => { if (response === undefined) { @@ -41,7 +42,7 @@ export function LoginModal(props: ModalBaseProps): JSXElement { if (user.twoFactorEnabled) { setAt2FAStep(true) - setData({ email: user.email }) + setEmail({ email: user.email }) return } @@ -52,10 +53,12 @@ export function LoginModal(props: ModalBaseProps): JSXElement { }, }) - const [totpForm, onTotpSubmit, Totp, setData] = createFormWithSubmit< - TotpLoginData, - UserAttributes - >({ + const { + state: totpSate, + setter: setEmail, + onSubmit: onTotpSubmit, + components: Totp, + } = createFormState({ action: totpLogin, onFinish: (response) => { if (response === undefined) { @@ -113,8 +116,8 @@ export function LoginModal(props: ModalBaseProps): JSXElement { )} - - + + @@ -131,7 +134,7 @@ export function LoginModal(props: ModalBaseProps): JSXElement { type="submit" color="primary" class="w-full" - isLoading={loginForm.submitting} + isLoading={loginState.submitting} /> @@ -163,14 +166,14 @@ export function LoginModal(props: ModalBaseProps): JSXElement { )} - - + +
    diff --git a/ui/src/pages/ResetPassword.tsx b/ui/src/pages/ResetPassword.tsx index 2cdc272..578a494 100644 --- a/ui/src/pages/ResetPassword.tsx +++ b/ui/src/pages/ResetPassword.tsx @@ -1,4 +1,4 @@ -import { JSXElement, Show } from 'solid-js' +import { JSXElement, Show } from 'solid-js' import { A, useSearchParams } from '@solidjs/router' import { TopBar } from '../components/TopBar' @@ -12,27 +12,30 @@ import { required, minLength, pattern } from '@modular-forms/solid' import { resetPassword, ResetPasswordData } from '../api' import { getSingleParam } from './SearchParams' import { Button } from '../components/Button' -import { createFormWithSubmit } from '../form_helpers' +import { createFormState } from '../form_helpers' import { mustMatch } from '../validators' - export function ResetPasswordPage(): JSXElement { const { t } = useLocale() const [searchParams] = useSearchParams() - const [state, onSubmit, { Form, Field }, setData, getValue] = - createFormWithSubmit({ - action: resetPassword, - formOptions: { - initialValues: { - email: getSingleParam(searchParams.email), - resetToken: getSingleParam(searchParams.resetToken), - }, + const { + state, + onSubmit, + accessor, + components: { Form, Field }, + } = createFormState({ + action: resetPassword, + formOptions: { + initialValues: { + email: getSingleParam(searchParams.email), + resetToken: getSingleParam(searchParams.resetToken), }, - }) + }, + }) - const newPassword = () => getValue('newPassword') + const newPassword = () => accessor().newPassword return ( <> @@ -97,7 +100,7 @@ export function ResetPasswordPage(): JSXElement {     @@ -107,7 +110,7 @@ export function ResetPasswordPage(): JSXElement {     diff --git a/ui/src/pages/VerifyEmail.tsx b/ui/src/pages/VerifyEmail.tsx index cf4501b..7a1f035 100644 --- a/ui/src/pages/VerifyEmail.tsx +++ b/ui/src/pages/VerifyEmail.tsx @@ -29,7 +29,8 @@ export function VerifyEmailPage(): JSXElement { ) if (response.status !== 200) { - setErrorMsg(t(await getErrorMessage(response))) + const data = await response.json() + setErrorMsg(t(getErrorMessage(data))) } else { await fetchUser() setSuccess(true) @@ -54,7 +55,7 @@ export function VerifyEmailPage(): JSXElement {
    - +
    @@ -63,7 +64,7 @@ export function VerifyEmailPage(): JSXElement {     diff --git a/ui/src/pages/admin_page/UsersAdmin.tsx b/ui/src/pages/admin_page/UsersAdmin.tsx index 2fb14a3..be3828c 100644 --- a/ui/src/pages/admin_page/UsersAdmin.tsx +++ b/ui/src/pages/admin_page/UsersAdmin.tsx @@ -15,13 +15,13 @@ import { BooleanInput } from '../../components/BooleanInput' import { TextInput } from '../../components/TextInput' import { createModalState, Modal, ModalBaseProps } from '../../components/Modal' -import { useLocale } from '../../context/LocaleProvider' +import { TranslationKeys, useLocale } from '../../context/LocaleProvider' import { pattern, email, minLength, required } from '@modular-forms/solid' import { Table, TableRow } from '../../components/Table' import { Tooltip } from '../../components/Tooltip' import { Button } from '../../components/Button' -import { createFormWithSubmit } from '../../form_helpers' +import { createFormState } from '../../form_helpers' export function UsersAdmin(): JSXElement { const { t } = useLocale() @@ -147,7 +147,7 @@ export function UsersAdmin(): JSXElement { @@ -181,16 +181,18 @@ function DeleteUserModal( const { t } = useLocale() const user = () => props.user - const [state, onSubmit, { Form }] = createFormWithSubmit( - { - action: deleteUser, - onFinish: () => { - props.onDelete() - props.onClose() - }, - formOptions: { initialValues: { userID: user()?.id ?? 0 } }, - } - ) + const { + state, + onSubmit, + components: { Form }, + } = createFormState({ + action: deleteUser, + onFinish: () => { + props.onDelete() + props.onClose() + }, + formOptions: { initialValues: { userID: user()?.id ?? 0 } }, + }) return ( ({ - action: createUser, - onFinish: () => { - props.onClose() - }, - }) + const { + state, + onSubmit, + components: { Form, Field }, + } = createFormState({ + action: createUser, + onFinish: () => { + props.onClose() + }, + }) return ( props.onClose()} >
    + + - - - -
    + * + * ); + * ``` */ export function createFormState< TType extends FieldValues, @@ -105,6 +187,15 @@ export function createFormState< } } +/** + * Creates a submit handler function for a form + * + * @param options.form - The form store that manages form state + * @param options.action - Function that processes form submission and sends data to server + * @param options.onFinish - Optional callback to run after successful submission + * @param options.additionalData - Optional accessor to merge additional data with form values + * @returns A function that handles form submission + */ export function createSubmitHandler< TType extends FieldValues, TResponse extends ResponseData = undefined, From 008a2ff064487b3992a11e3b4465b1b6386207a1 Mon Sep 17 00:00:00 2001 From: Swopper050 Date: Fri, 28 Mar 2025 13:54:13 +0100 Subject: [PATCH 14/16] Really fix lint --- ui/src/components/RegisterModal.tsx | 8 +------ ui/src/form_helpers.ts | 36 ++++++++++++++--------------- 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/ui/src/components/RegisterModal.tsx b/ui/src/components/RegisterModal.tsx index 1bbf76f..1f9a3c1 100644 --- a/ui/src/components/RegisterModal.tsx +++ b/ui/src/components/RegisterModal.tsx @@ -1,12 +1,7 @@ import { JSXElement, Show } from 'solid-js' import { useNavigate } from '@solidjs/router' -import { - minLength, - pattern, - email, - required, -} from '@modular-forms/solid' +import { minLength, pattern, email, required } from '@modular-forms/solid' import { register, RegisterUserData } from '../api' @@ -44,7 +39,6 @@ export function RegisterModal(props: ModalBaseProps): JSXElement { const newPassword = () => accessor().checkPassword - return ( { * The form store that provides access to the state of the form's data */ state: FormStore - + /** * The callback that will be called when the form is submitted by the user */ onSubmit: (values: TType) => void - + /** * A setter for write access to the form data, bypassing user input */ setter: Setter> - + /** * An accessor for reading the current form values */ accessor: Accessor> - + /** * The form UI components used to build the form */ @@ -64,7 +64,7 @@ interface FormState { * The Form component that wraps the entire form */ Form: (props: Omit, 'of'>) => JSXElement - + /** * The Field component used for individual form fields */ @@ -76,7 +76,7 @@ interface FormState { > : Omit, 'of'> ) => JSXElement - + /** * The FieldArray component used for array-type form fields */ @@ -88,23 +88,23 @@ interface FormState { /** * Creates a form state that encapsulates form functionality - * + * * @param options.action - Function that handles form submission by sending data to the server * @param options.onFinish - Optional callback that runs after successful form submission * @param options.formOptions - Optional configuration options for the form * @returns FormState object with form state, submission handler, and helper components - * + * * @example * ```tsx * type LoginForm = { * email: string; * password: string; * } - * - * const { - * components: { Form, Field }, - * onSubmit, - * state + * + * const { + * components: { Form, Field }, + * onSubmit, + * state * } = createFormState({ * action: async (values) => { * return await fetch('/api/login', { @@ -119,7 +119,7 @@ interface FormState { * } * } * }); - * + * * return ( * * @@ -133,7 +133,7 @@ interface FormState { * /> * )} * - * + * * * {(field, props) => ( * { * /> * )} * - * + * * @@ -189,7 +189,7 @@ export function createFormState< /** * Creates a submit handler function for a form - * + * * @param options.form - The form store that manages form state * @param options.action - Function that processes form submission and sends data to server * @param options.onFinish - Optional callback to run after successful submission From 6b77f6031ff9fca9640b36d188aeeaa8281bfeff Mon Sep 17 00:00:00 2001 From: Swopper050 Date: Tue, 1 Apr 2025 12:22:33 +0200 Subject: [PATCH 15/16] Use data tags and commands for cypress tests --- ui/cypress/e2e/admin.cy.js | 138 ++++++------------------- ui/cypress/support/commands.js | 32 +++++- ui/src/components/Alert.tsx | 5 +- ui/src/components/Button.tsx | 2 + ui/src/components/LoginModal.tsx | 9 +- ui/src/components/ProfileMenu.tsx | 15 ++- ui/src/components/TopBar.tsx | 4 + ui/src/pages/admin_page/UsersAdmin.tsx | 7 ++ 8 files changed, 96 insertions(+), 116 deletions(-) diff --git a/ui/cypress/e2e/admin.cy.js b/ui/cypress/e2e/admin.cy.js index bfb1e88..83e9862 100644 --- a/ui/cypress/e2e/admin.cy.js +++ b/ui/cypress/e2e/admin.cy.js @@ -6,125 +6,45 @@ describe('admin', () => { it('Create new user', () => { cy.visit('/') - cy.get('.hidden > :nth-child(1)').click(); - - cy.wait(100); - - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').clear('ad'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('admin@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('admin'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - - cy.wait(100); - - cy.get('.text').click(); - cy.get('p.text-success').click(); - cy.get('thead > tr > .text-end > .btn').click(); - - cy.wait(100); - - cy.get('#email').clear('te'); - cy.get('#email').type('test@test.nl'); - cy.get('#password').clear(); - cy.get('#password').type('Testing1'); - cy.get('.modal-action > .btn').click(); - - cy.wait(100); - - cy.get(':nth-child(3) > summary.btn').click(); - cy.wait(50); - cy.get('.menu > :nth-child(3) > .btn').click(); - cy.wait(50); - cy.get('.hidden > :nth-child(1)').click(); - cy.wait(50); - - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input').click(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('test@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('Testing1'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - - cy.wait(50); - + cy.login("admin@test.nl", "admin") + cy.navigateToAdminPanel() + cy.createUser("user@test.nl", "Testing1", false) + cy.logout() + cy.login("user@test.nl", "Testing1") cy.url().should('include', '/home') }) it('Create another admin', function() { - cy.visit('/'); - cy.get('.hidden > :nth-child(1)').click(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('admin@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('admin'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - cy.get('.text').click(); - cy.get('p.text-success').click(); - cy.get('thead > tr > .text-end').click(); - cy.get('.modal-box').click(); - cy.get('#email').clear('ad'); - cy.get('#email').type('admin2@test.nl'); - cy.get('#password').clear(); - cy.get('#password').type('Testing1'); - cy.get('.checkbox').check(); - cy.get('.modal-action > .btn').click(); - cy.get('.text').click(); - cy.get('.menu > :nth-child(3) > .btn').click(); - cy.get('.hidden > :nth-child(1)').click(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('admin2@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('Testing1'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - cy.get('.text').click(); - cy.get(':nth-child(2) > .btn > .fa-solid').click(); + cy.visit('/') + cy.login("admin@test.nl", "admin") + cy.navigateToAdminPanel() + cy.createUser("another@admin.nl", "AdminAwesome1", true) + cy.logout() + cy.login("another@admin.nl", "AdminAwesome1") + cy.navigateToAdminPanel() cy.url().should('include', '/admin-panel') }); it('Delete user', function() { cy.visit('/'); - cy.get('.hidden > :nth-child(1)').click(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').clear('ad'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('admin@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('admin'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - cy.get('.text').click(); - cy.get('p.text-success').click(); - cy.get('thead > tr > .text-end > .btn > .fa-solid').click(); - cy.get('#email').clear('te'); - cy.get('#email').type('test@test.nl'); - cy.get('#password').clear(); - cy.get('#password').type('Testing1'); - cy.get('.modal-action > .btn').click(); - cy.get('.text').click(); - cy.get('.menu > :nth-child(3) > .btn').click(); - cy.get('.hidden > :nth-child(1)').click(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').clear('te'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('test@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('Testing1'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - cy.get('.text').click(); - cy.get('[open=""] > .menu > :nth-child(2) > .btn').click(); - cy.get('.hidden > :nth-child(1)').click(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').clear('ad'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('admin@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('admin'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - cy.get('.text').click(); - cy.get('p.text-success').click(); - cy.get(':nth-child(2) > .text-end > .btn > .fa-solid').click(); - cy.get('.btn-error').click(); - cy.get('.text').click(); - cy.get('.menu > :nth-child(3) > .btn > .fa-solid').click(); - cy.get('.hidden > :nth-child(1)').click(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').clear('te'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(1) > .input > #email').type('test@test.nl'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').clear(); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > :nth-child(2) > .input > #password').type('Testing1'); - cy.get('.modal-open > .modal-box > form.w-full > .space-y-4 > .modal-action > .btn').click(); - cy.get('.alert span').should('contain.text', 'Could not login with the given email and password'); + cy.login("admin@test.nl", "admin") + cy.navigateToAdminPanel() + cy.createUser("user@test.nl", "Testing1", false) + cy.logout() + + cy.login("user@test.nl", "Testing1") + cy.url().should('include', '/home') + cy.logout() + + cy.login("admin@test.nl", "admin") + cy.navigateToAdminPanel() + + cy.deleteUser("user@test.nl") + cy.logout() + + cy.login("user@test.nl", "Testing1") + cy.get('[data-cy="login-error"]').should('contain.text', 'Could not login with the given email and password'); }); }) diff --git a/ui/cypress/support/commands.js b/ui/cypress/support/commands.js index 66ea16e..42edc1c 100644 --- a/ui/cypress/support/commands.js +++ b/ui/cypress/support/commands.js @@ -22,4 +22,34 @@ // // // -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) \ No newline at end of file +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) + +Cypress.Commands.addAll({ + login(email, password) { + cy.get('[data-cy="open-login-modal"]').click(); + cy.get('[data-cy="login-email"]').type(email); + cy.get('[data-cy="login-password"]').type(password); + cy.get('[data-cy="login-button"]').click(); + }, + logout() { + cy.get('[data-cy="toggle-profile-menu-dropdown"').click(); + cy.get('[data-cy="logout"]').click(); + }, + navigateToAdminPanel() { + cy.get('[data-cy="toggle-profile-menu-dropdown"').click(); + cy.get('[data-cy="admin-panel"]').click(); + }, + createUser(email, password, isAdmin) { + cy.get('[data-cy="create-new-user"]').click(); + cy.get('[data-cy="new-user-email"]').type(email); + cy.get('[data-cy="new-user-password"]').type(password); + if (isAdmin) { + cy.get('[data-cy="new-user-admin"]').check(); + } + cy.get('[data-cy="submit-new-user"]').click(); + }, + deleteUser(email) { + cy.get(`[data-cy="delete-user-${email}"]`).click(); + cy.get(`[data-cy="delete-user"]`).click(); + } +}) diff --git a/ui/src/components/Alert.tsx b/ui/src/components/Alert.tsx index d1dc8b0..6911b38 100644 --- a/ui/src/components/Alert.tsx +++ b/ui/src/components/Alert.tsx @@ -1,4 +1,4 @@ -import { JSXElement } from 'solid-js' +import { JSXElement, JSX } from 'solid-js' import { clsx } from 'clsx' import { TranslationKey, useLocale } from '../context/LocaleProvider' @@ -8,7 +8,7 @@ interface AlertProps { class?: string } -export function Alert(props: AlertProps): JSXElement { +export function Alert(props: AlertProps & JSX.HTMLAttributes): JSXElement { const { t } = useLocale() const translated = () => t((props.message as TranslationKey) ?? '') @@ -25,6 +25,7 @@ export function Alert(props: AlertProps): JSXElement { diff --git a/ui/src/components/ProfileMenu.tsx b/ui/src/components/ProfileMenu.tsx index dc5c200..0c91952 100644 --- a/ui/src/components/ProfileMenu.tsx +++ b/ui/src/components/ProfileMenu.tsx @@ -34,14 +34,18 @@ export function ProfileMenu(): JSXElement { return (
    - + {user()?.email}
    • - + {t('account')} @@ -49,7 +53,11 @@ export function ProfileMenu(): JSXElement {
    • - +

      {t('admin_panel')}

       @@ -65,6 +73,7 @@ export function ProfileMenu(): JSXElement { loggingOut() && 'btn-disabled' )} onClick={onLogout} + data-cy="logout" > setOpenLoginModal(true)} + data-cy="open-login-modal" > {t('login')} @@ -61,6 +62,7 @@ export function TopBar(): JSXElement { @@ -108,6 +110,7 @@ export function TopBar(): JSXElement { setOpenLoginModal(true) setSidebarOpen(false) }} + data-cy="open-login-modal-mobile" >