add password toggle icon for all password inputs & use share folder checkbox for remember password in login page.
This commit is contained in:
@@ -103,6 +103,11 @@ export default function AccountSettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const passwordToggleLabels = {
|
||||
show: tAuth('showPassword'),
|
||||
hide: tAuth('hidePassword'),
|
||||
};
|
||||
|
||||
if (!isAuthReady || !user) {
|
||||
return (
|
||||
<p className="text-text-secondary text-sm">{tCommon('loadingEllipsis')}</p>
|
||||
@@ -139,6 +144,7 @@ export default function AccountSettingsPage() {
|
||||
placeholder={tAuth('passwordPlaceholder')}
|
||||
error={errors.currentPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -149,6 +155,7 @@ export default function AccountSettingsPage() {
|
||||
placeholder={tAuth('passwordPlaceholder')}
|
||||
error={errors.newPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
|
||||
<Input
|
||||
@@ -158,6 +165,7 @@ export default function AccountSettingsPage() {
|
||||
placeholder={tAuth('passwordPlaceholder')}
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
|
||||
@@ -93,6 +93,11 @@ function AcceptInviteContent() {
|
||||
}
|
||||
}
|
||||
|
||||
const passwordToggleLabels = {
|
||||
show: t('showPassword'),
|
||||
hide: t('hidePassword'),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md surface-card p-6 space-y-5">
|
||||
@@ -134,12 +139,14 @@ function AcceptInviteContent() {
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
<Input
|
||||
label={t('labelConfirmPassword')}
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
<Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
|
||||
{t('activateAccount')}
|
||||
|
||||
@@ -154,6 +154,11 @@ function AcceptOrganizationInviteContent() {
|
||||
}
|
||||
};
|
||||
|
||||
const passwordToggleLabels = {
|
||||
show: t('showPassword'),
|
||||
hide: t('hidePassword'),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
@@ -226,6 +231,7 @@ function AcceptOrganizationInviteContent() {
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
<Input
|
||||
label={t('confirmPassword')}
|
||||
@@ -234,6 +240,7 @@ function AcceptOrganizationInviteContent() {
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
<Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
|
||||
{tCommon('continue')}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { Mail, Lock } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { getRememberedEmail } from '@/lib/auth/rememberMe';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Checkbox } from '@/components/ui/shared/Checkbox';
|
||||
import { Input } from '@/components/ui/shared/Input';
|
||||
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
|
||||
|
||||
@@ -48,6 +49,8 @@ export default function LoginPage() {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<LoginForm>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
@@ -57,6 +60,8 @@ export default function LoginPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const rememberMe = watch('rememberMe');
|
||||
|
||||
const onSubmit = async (data: LoginForm) => {
|
||||
try {
|
||||
setError(null);
|
||||
@@ -114,20 +119,18 @@ export default function LoginPage() {
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={{
|
||||
show: t('showPassword'),
|
||||
hide: t('hidePassword'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember-me"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40"
|
||||
{...register('rememberMe')}
|
||||
/>
|
||||
<label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
|
||||
{t('rememberMe')}
|
||||
</label>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={rememberMe}
|
||||
onChange={(checked) => setValue('rememberMe', checked)}
|
||||
label={t('rememberMe')}
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
|
||||
{t('forgotPassword')}
|
||||
|
||||
@@ -115,6 +115,11 @@ export default function RegisterPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const passwordToggleLabels = {
|
||||
show: t('showPassword'),
|
||||
hide: t('hidePassword'),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="absolute top-4 right-4">
|
||||
@@ -189,6 +194,7 @@ export default function RegisterPage() {
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
<Input
|
||||
label={t('confirmPassword')}
|
||||
@@ -197,6 +203,7 @@ export default function RegisterPage() {
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
passwordToggleLabels={passwordToggleLabels}
|
||||
/>
|
||||
<Button type="button" variant="primary" onClick={handleNext} fullWidth>
|
||||
{tCommon('continue')}
|
||||
|
||||
Reference in New Issue
Block a user