diff --git a/packages/lib/src/components/SetPassword/SetPasswordForm.module.css b/packages/lib/src/components/SetPassword/SetPasswordForm.module.css index 75c78913..83537089 100644 --- a/packages/lib/src/components/SetPassword/SetPasswordForm.module.css +++ b/packages/lib/src/components/SetPassword/SetPasswordForm.module.css @@ -18,5 +18,23 @@ */ .set-password-form__text-input--label { - font-weight: var(--mantine-font-weight-bold); + font-weight: 500; + margin-bottom: 4px; +} + +.set-password-form__text-input { + transition: border-color 0.2s ease; +} + +.set-password-form__text-input:focus { + border-color: var(--mantine-color-blue-6); +} + +.set-password-form__submit-button { + margin-top: 16px; + transition: background-color 0.2s ease; +} + +.set-password-form__submit-button:hover { + background-color: var(--mantine-color-blue-7); } diff --git a/packages/lib/src/components/SetPassword/SetPasswordForm.tsx b/packages/lib/src/components/SetPassword/SetPasswordForm.tsx index e6ea88b1..3c72405a 100644 --- a/packages/lib/src/components/SetPassword/SetPasswordForm.tsx +++ b/packages/lib/src/components/SetPassword/SetPasswordForm.tsx @@ -24,22 +24,31 @@ import { SetPasswordFormType, SetPasswordInput, } from '@frachtwerk/essencium-types' -import { Button, Stack } from '@mantine/core' +import { Button, Stack, Text } from '@mantine/core' import { useTranslation } from 'next-i18next' -import type { JSX } from 'react' +import { type ChangeEvent, type JSX, useState } from 'react' import { useZodForm } from '../../hooks' import { ControlledPasswordInput } from '../Form' +import { PasswordStrengthIndicator } from '../PasswordStrengthIndicator/PasswordStrengthIndicator' import classes from './SetPasswordForm.module.css' type Props = { handleSetPassword: (password: SetPasswordInput['password']) => void + isAdmin?: boolean } -export function SetPasswordForm({ handleSetPassword }: Props): JSX.Element { +/** + * SetPasswordForm component for handling password setting and validation + * @param handleSetPassword - Callback function to handle password submission + * @param isAdmin - Optional flag to indicate if the user is an admin (affects password requirements) + */ +export function SetPasswordForm({ handleSetPassword, isAdmin }: Props): JSX.Element { const { t } = useTranslation() + const [passwordValue, setPasswordValue] = useState(null) + const [isPasswordFocused, setIsPasswordFocused] = useState(false) - const { handleSubmit, control } = useZodForm({ + const { handleSubmit, control, formState: { errors } } = useZodForm({ schema: setPasswordFormSchema, }) @@ -49,17 +58,33 @@ export function SetPasswordForm({ handleSetPassword }: Props): JSX.Element { return (
- - + + + ) => { + setPasswordValue(event.target.value) + }} + onFocus={() => setIsPasswordFocused(true)} + onBlur={() => setIsPasswordFocused(false)} + placeholder={String(t('setPasswordView.form.newPassword'))} + label={t('setPasswordView.form.newPassword')} + withAsterisk + error={errors.password?.message} + classNames={{ + label: classes['set-password-form__text-input--label'], + input: classes['set-password-form__text-input'], + }} + /> + -