feature: localization's first implmentation done. all frontend hardcoded text is now localized.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Suspense, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Link, useRouter } from '@/i18n/navigation';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useForm, type FieldErrors, type UseFormRegister, type UseFormSetValue } from 'react-hook-form';
|
||||
@@ -14,33 +15,47 @@ import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDeta
|
||||
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
|
||||
import { organizationApi } from '@/lib/api/organization';
|
||||
|
||||
const acceptOrganizationInviteSchema = z
|
||||
.object({
|
||||
ownerName: z.string().min(2, 'Name must be at least 2 characters'),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number'),
|
||||
confirmPassword: z.string(),
|
||||
organizationName: z.string().min(2, 'Organization name must be at least 2 characters'),
|
||||
organizationEmail: z.string().email('Please enter a valid organization email'),
|
||||
organizationType: z.enum(['CLINIC', 'LAB'], {
|
||||
message: 'Please select organization type',
|
||||
}),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ['confirmPassword'],
|
||||
});
|
||||
|
||||
type AcceptOrganizationInviteForm = z.infer<typeof acceptOrganizationInviteSchema>;
|
||||
type AcceptOrganizationInviteForm = {
|
||||
ownerName: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
organizationName: string;
|
||||
organizationEmail: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
};
|
||||
|
||||
function AcceptOrganizationInviteContent() {
|
||||
const t = useTranslations('auth');
|
||||
const tCommon = useTranslations('common');
|
||||
const tValidation = useTranslations('validation');
|
||||
const params = useSearchParams();
|
||||
const router = useRouter();
|
||||
const token = useMemo(() => params.get('token') || '', [params]);
|
||||
|
||||
const acceptOrganizationInviteSchema = useMemo(
|
||||
() =>
|
||||
z
|
||||
.object({
|
||||
ownerName: z.string().min(2, tValidation('nameMinLength')),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, tValidation('passwordMinLength'))
|
||||
.regex(/[A-Z]/, tValidation('passwordUppercase'))
|
||||
.regex(/[0-9]/, tValidation('passwordNumber')),
|
||||
confirmPassword: z.string(),
|
||||
organizationName: z.string().min(2, tValidation('organizationNameMinLength')),
|
||||
organizationEmail: z.string().email(tValidation('organizationEmailInvalid')),
|
||||
organizationType: z.enum(['CLINIC', 'LAB'], {
|
||||
message: tValidation('organizationTypeRequired'),
|
||||
}),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: tValidation('passwordsDoNotMatch'),
|
||||
path: ['confirmPassword'],
|
||||
}),
|
||||
[tValidation],
|
||||
);
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
@@ -77,7 +92,7 @@ function AcceptOrganizationInviteContent() {
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
setLoading(false);
|
||||
setError('Invalid invitation link');
|
||||
setError(t('invalidInvitationLink'));
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -96,16 +111,16 @@ function AcceptOrganizationInviteContent() {
|
||||
organizationType: res.data.organizationType,
|
||||
});
|
||||
if (res.data.status === 'ACCEPTED') {
|
||||
setSuccess('This invitation is already accepted. You can log in now.');
|
||||
setSuccess(t('invitationAlreadyAccepted'));
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
|
||||
setError(message || 'Could not load invitation');
|
||||
setError(message || t('errorLoadInvitation'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [token, reset]);
|
||||
}, [token, reset, t]);
|
||||
|
||||
const handleNext = async () => {
|
||||
const isValid = await trigger(['ownerName', 'password', 'confirmPassword']);
|
||||
@@ -129,11 +144,11 @@ function AcceptOrganizationInviteContent() {
|
||||
organizationEmail: data.organizationEmail.trim(),
|
||||
organizationType: data.organizationType,
|
||||
});
|
||||
setSuccess('Invitation accepted. Redirecting to login...');
|
||||
setSuccess(t('organizationAcceptedRedirect'));
|
||||
setTimeout(() => router.replace('/login'), 1000);
|
||||
} catch (e: unknown) {
|
||||
const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
|
||||
setError(message || 'Could not accept invitation');
|
||||
setError(message || t('errorAcceptInvitation'));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
@@ -143,15 +158,15 @@ function AcceptOrganizationInviteContent() {
|
||||
<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">
|
||||
<Link href="/" className="flex justify-center">
|
||||
<span className="text-3xl font-semibold text-text-primary">DyoLink</span>
|
||||
<span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
|
||||
</Link>
|
||||
<h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
|
||||
Accept organization invitation
|
||||
{t('acceptOrganizationTitle')}
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-text-secondary">
|
||||
Already have an account?{' '}
|
||||
{t('alreadyHaveAccount')}{' '}
|
||||
<Link href="/login" className="font-medium text-primary hover:opacity-90">
|
||||
Sign in
|
||||
{t('signInLink')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
@@ -159,13 +174,13 @@ function AcceptOrganizationInviteContent() {
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="surface-card py-8 px-4 sm:px-10">
|
||||
{loading ? (
|
||||
<p className="text-sm text-text-secondary">Loading invitation...</p>
|
||||
<p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
|
||||
) : (
|
||||
<>
|
||||
{inviteInfo && (
|
||||
<div className="mb-6 rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
|
||||
<p>
|
||||
Invited by:{' '}
|
||||
{t('invitedBy')}{' '}
|
||||
<span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -191,37 +206,37 @@ function AcceptOrganizationInviteContent() {
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Input
|
||||
label="Owner email"
|
||||
label={t('ownerEmail')}
|
||||
value={inviteInfo?.ownerEmail ?? ''}
|
||||
readOnly
|
||||
disabled
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Full name"
|
||||
label={t('fullName')}
|
||||
{...register('ownerName')}
|
||||
placeholder="John Doe"
|
||||
placeholder={t('namePlaceholder')}
|
||||
error={errors.ownerName?.message}
|
||||
icon={<User className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Password"
|
||||
label={t('password')}
|
||||
{...register('password')}
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Confirm password"
|
||||
label={t('confirmPassword')}
|
||||
{...register('confirmPassword')}
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
|
||||
Continue
|
||||
{tCommon('continue')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
@@ -236,10 +251,10 @@ function AcceptOrganizationInviteContent() {
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<Button type="button" variant="outline" onClick={() => setStep(1)}>
|
||||
Back
|
||||
{tCommon('back')}
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" isLoading={submitting} fullWidth>
|
||||
Activate organization
|
||||
{t('activateOrganization')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
@@ -254,15 +269,18 @@ function AcceptOrganizationInviteContent() {
|
||||
);
|
||||
}
|
||||
|
||||
function AcceptOrganizationInviteFallback() {
|
||||
const t = useTranslations('auth');
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center">
|
||||
<p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AcceptOrganizationInvitePage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center">
|
||||
<p className="text-sm text-text-secondary">Loading invitation...</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Suspense fallback={<AcceptOrganizationInviteFallback />}>
|
||||
<AcceptOrganizationInviteContent />
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user