feature: localization's first implmentation
This commit is contained in:
166
frontend/src/app/[locale]/(public)/accept-invite/page.tsx
Normal file
166
frontend/src/app/[locale]/(public)/accept-invite/page.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Suspense } from 'react';
|
||||
import { Link, useRouter } from '@/i18n/navigation';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Input } from '@/components/ui/shared/Input';
|
||||
import { staffApi } from '@/lib/api/staff';
|
||||
|
||||
function AcceptInviteContent() {
|
||||
const params = useSearchParams();
|
||||
const router = useRouter();
|
||||
const token = useMemo(() => params.get('token') || '', [params]);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [inviteInfo, setInviteInfo] = useState<{
|
||||
email: string;
|
||||
name: string;
|
||||
organizationName: string;
|
||||
expiresAt: string;
|
||||
status: 'PENDING' | 'ACCEPTED';
|
||||
} | null>(null);
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
setLoading(false);
|
||||
setError('Invalid invitation link');
|
||||
return;
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await staffApi.previewInvite(token);
|
||||
setInviteInfo(res.data);
|
||||
setName(res.data.name || '');
|
||||
if (res.data.status === 'ACCEPTED') {
|
||||
setSuccess('This invitation is already accepted. You can log in now.');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'Could not load invitation');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [token]);
|
||||
|
||||
async function onAccept() {
|
||||
if (!token) return;
|
||||
setError('');
|
||||
setSuccess('');
|
||||
if (!name.trim()) {
|
||||
setError('Name is required');
|
||||
return;
|
||||
}
|
||||
if (password.length < 8) {
|
||||
setError('Password must be at least 8 characters');
|
||||
return;
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
setError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await staffApi.acceptInvite({
|
||||
token,
|
||||
name: name.trim(),
|
||||
password,
|
||||
});
|
||||
setSuccess('Invitation Accepted. Redirecting to login...');
|
||||
setTimeout(() => {
|
||||
router.replace('/login');
|
||||
}, 1000);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'Could not accept invitation');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<h1 className="text-xl font-semibold text-text-primary">Accept invitation</h1>
|
||||
|
||||
{loading ? (
|
||||
<p className="text-sm text-text-secondary">Loading invitation...</p>
|
||||
) : (
|
||||
<>
|
||||
{inviteInfo && (
|
||||
<div className="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>
|
||||
Organization: <span className="text-text-primary">{inviteInfo.organizationName}</span>
|
||||
</p>
|
||||
<p>
|
||||
Email: <span className="text-text-primary">{inviteInfo.email}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-[var(--radius-md)] border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-300">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inviteInfo?.status !== 'ACCEPTED' && (
|
||||
<div className="space-y-3">
|
||||
<Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<Input
|
||||
label="Create password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Confirm password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
/>
|
||||
<Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
|
||||
Activate account
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-text-muted">
|
||||
Already have access? <Link href="/login" className="text-primary">Go to login</Link>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AcceptInvitePage() {
|
||||
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>
|
||||
}
|
||||
>
|
||||
<AcceptInviteContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
'use client';
|
||||
|
||||
import { Suspense, useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useRouter } from '@/i18n/navigation';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useForm, type FieldErrors, type UseFormRegister, type UseFormSetValue } from 'react-hook-form';
|
||||
import type { OrganizationDetailsFormValues } from '@/components/ui/auth/OrganizationDetailsFields';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Lock, Mail, User } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Input } from '@/components/ui/shared/Input';
|
||||
import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
|
||||
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>;
|
||||
|
||||
function AcceptOrganizationInviteContent() {
|
||||
const params = useSearchParams();
|
||||
const router = useRouter();
|
||||
const token = useMemo(() => params.get('token') || '', [params]);
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [inviteInfo, setInviteInfo] = useState<{
|
||||
ownerEmail: string;
|
||||
organizationName: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
organizationEmail?: string;
|
||||
inviterOrganizationName: string;
|
||||
expiresAt: string;
|
||||
status: 'PENDING' | 'ACCEPTED';
|
||||
} | null>(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
trigger,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<AcceptOrganizationInviteForm>({
|
||||
resolver: zodResolver(acceptOrganizationInviteSchema),
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
organizationType: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const organizationType = watch('organizationType');
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
setLoading(false);
|
||||
setError('Invalid invitation link');
|
||||
return;
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await organizationApi.previewInvite(token);
|
||||
setInviteInfo(res.data);
|
||||
reset({
|
||||
ownerName: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
organizationName: res.data.organizationName || '',
|
||||
organizationEmail: res.data.organizationEmail || '',
|
||||
organizationType: res.data.organizationType,
|
||||
});
|
||||
if (res.data.status === 'ACCEPTED') {
|
||||
setSuccess('This invitation is already accepted. You can log in now.');
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
|
||||
setError(message || 'Could not load invitation');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [token, reset]);
|
||||
|
||||
const handleNext = async () => {
|
||||
const isValid = await trigger(['ownerName', 'password', 'confirmPassword']);
|
||||
if (isValid) {
|
||||
setStep(2);
|
||||
setError('');
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (data: AcceptOrganizationInviteForm) => {
|
||||
if (!token) return;
|
||||
setError('');
|
||||
setSuccess('');
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await organizationApi.acceptInvite({
|
||||
token,
|
||||
ownerName: data.ownerName.trim(),
|
||||
password: data.password,
|
||||
organizationName: data.organizationName.trim(),
|
||||
organizationEmail: data.organizationEmail.trim(),
|
||||
organizationType: data.organizationType,
|
||||
});
|
||||
setSuccess('Invitation accepted. Redirecting to login...');
|
||||
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');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
<Link href="/" className="flex justify-center">
|
||||
<span className="text-3xl font-semibold text-text-primary">DyoLink</span>
|
||||
</Link>
|
||||
<h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
|
||||
Accept organization invitation
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-text-secondary">
|
||||
Already have an account?{' '}
|
||||
<Link href="/login" className="font-medium text-primary hover:opacity-90">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
) : (
|
||||
<>
|
||||
{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:{' '}
|
||||
<span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inviteInfo?.status !== 'ACCEPTED' && (
|
||||
<RegistrationProgressSteps step={step} />
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="mb-4 rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inviteInfo?.status !== 'ACCEPTED' && (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Input
|
||||
label="Owner email"
|
||||
value={inviteInfo?.ownerEmail ?? ''}
|
||||
readOnly
|
||||
disabled
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Full name"
|
||||
{...register('ownerName')}
|
||||
placeholder="John Doe"
|
||||
error={errors.ownerName?.message}
|
||||
icon={<User className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Password"
|
||||
{...register('password')}
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Confirm password"
|
||||
{...register('confirmPassword')}
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<OrganizationDetailsFields
|
||||
register={register as unknown as UseFormRegister<OrganizationDetailsFormValues>}
|
||||
errors={errors as FieldErrors<OrganizationDetailsFormValues>}
|
||||
organizationType={organizationType}
|
||||
setValue={setValue as unknown as UseFormSetValue<OrganizationDetailsFormValues>}
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<Button type="button" variant="outline" onClick={() => setStep(1)}>
|
||||
Back
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" isLoading={submitting} fullWidth>
|
||||
Activate organization
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
}
|
||||
>
|
||||
<AcceptOrganizationInviteContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
144
frontend/src/app/[locale]/(public)/login/page.tsx
Normal file
144
frontend/src/app/[locale]/(public)/login/page.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useRouter } from '@/i18n/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { Mail, Lock } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Input } from '@/components/ui/shared/Input';
|
||||
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
|
||||
|
||||
type LoginForm = {
|
||||
email: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
const t = useTranslations('auth');
|
||||
const tCommon = useTranslations('common');
|
||||
const tValidation = useTranslations('validation');
|
||||
const { login, isLoading, user, isAuthReady } = useAuth();
|
||||
const router = useRouter();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loginSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
email: z.string().email(tValidation('emailInvalid')),
|
||||
password: z.string().min(1, tValidation('passwordRequired')),
|
||||
}),
|
||||
[tValidation],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuthReady && user) {
|
||||
router.push('/today');
|
||||
}
|
||||
}, [user, isAuthReady, router]);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<LoginForm>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data: LoginForm) => {
|
||||
try {
|
||||
setError(null);
|
||||
await login(data.email, data.password);
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : t('invalidCredentials');
|
||||
setError(message || t('invalidCredentials'));
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthReady) {
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center">
|
||||
<p className="text-text-secondary">{tCommon('loading')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
<TopBarControls />
|
||||
</div>
|
||||
|
||||
<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">{tCommon('appName')}</span>
|
||||
</Link>
|
||||
<h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
|
||||
{t('signInTitle')}
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-text-secondary">
|
||||
Or{' '}
|
||||
<Link href="/register" className="font-medium text-primary hover:opacity-90">
|
||||
{t('startTrialLink')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Input
|
||||
label={t('email')}
|
||||
{...register('email')}
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
error={errors.email?.message}
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label={t('password')}
|
||||
{...register('password')}
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember-me"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40"
|
||||
/>
|
||||
<label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
|
||||
{t('rememberMe')}
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
|
||||
{t('forgotPassword')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
|
||||
{t('signIn')}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
132
frontend/src/app/[locale]/(public)/page.tsx
Normal file
132
frontend/src/app/[locale]/(public)/page.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
|
||||
import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';
|
||||
|
||||
export default function HomePage() {
|
||||
const t = useTranslations('landing');
|
||||
const tAuth = useTranslations('auth');
|
||||
const tCommon = useTranslations('common');
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg text-text-primary">
|
||||
<header className="border-b border-border/70 bg-background-secondary/65 backdrop-blur-sm fixed top-0 w-full z-10">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div className="text-2xl font-semibold text-text-primary">
|
||||
{tCommon('appName')}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<TopBarControls />
|
||||
{user ? (
|
||||
<Link href="/today">
|
||||
<Button variant="primary">{tAuth('dashboard')}</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/login">
|
||||
<Button variant="outline">{tAuth('login')}</Button>
|
||||
</Link>
|
||||
<Link href="/register">
|
||||
<Button variant="primary">{tAuth('startTrial')}</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="container mx-auto px-4 pt-32 pb-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-5xl md:text-6xl font-semibold mb-6 leading-tight">
|
||||
{t('heroTitle')}
|
||||
<span className="text-primary"> {t('heroHighlight')}</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-text-secondary mb-8 max-w-2xl mx-auto">
|
||||
{t('heroSubtitle')}
|
||||
</p>
|
||||
|
||||
{!user && (
|
||||
<Link href="/register">
|
||||
<Button size="lg" variant="primary" className="px-8">
|
||||
{tAuth('startFreeTrial')}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-20 grid md:grid-cols-3 gap-6">
|
||||
<FeatureCard
|
||||
icon={<Building2 className="h-6 w-6 icon-flat" />}
|
||||
title={t('featureClinicsTitle')}
|
||||
description={t('featureClinicsDescription')}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Beaker className="h-6 w-6 icon-flat" />}
|
||||
title={t('featureLabsTitle')}
|
||||
description={t('featureLabsDescription')}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Users className="h-6 w-6 icon-flat" />}
|
||||
title={t('featureTeamTitle')}
|
||||
description={t('featureTeamDescription')}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Calendar className="h-6 w-6 icon-flat" />}
|
||||
title={t('featureTrialTitle')}
|
||||
description={t('featureTrialDescription')}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Clock className="h-6 w-6 icon-flat" />}
|
||||
title={t('featureRealtimeTitle')}
|
||||
description={t('featureRealtimeDescription')}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Shield className="h-6 w-6 icon-flat" />}
|
||||
title={t('featureSecurityTitle')}
|
||||
description={t('featureSecurityDescription')}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-border/70 bg-background-secondary/80">
|
||||
<div className="container mx-auto px-4 py-8 flex flex-col md:flex-row justify-between items-center text-sm text-text-secondary">
|
||||
<div>{t('footerCopyright')}</div>
|
||||
|
||||
<div className="flex gap-6 mt-4 md:mt-0">
|
||||
<Link href="/terms" className="hover:text-primary transition-colors">
|
||||
{t('termsAndConditions')}
|
||||
</Link>
|
||||
<Link href="/privacy" className="hover:text-primary transition-colors">
|
||||
{tAuth('privacyPolicy')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="surface-card p-5 transition-all hover:border-primary/70 hover:shadow-[0_0_20px_rgba(0,194,255,0.12)]">
|
||||
<div className="text-primary mb-4">{icon}</div>
|
||||
<h3 className="text-base font-medium text-text-primary mb-2">{title}</h3>
|
||||
<p className="text-sm text-text-secondary">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
221
frontend/src/app/[locale]/(public)/register/page.tsx
Normal file
221
frontend/src/app/[locale]/(public)/register/page.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { Mail, Lock, User } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
|
||||
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Input } from '@/components/ui/shared/Input';
|
||||
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
|
||||
|
||||
type RegisterForm = {
|
||||
name: string;
|
||||
email: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
organizationName: string;
|
||||
organizationEmail: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
};
|
||||
|
||||
export default function RegisterPage() {
|
||||
const t = useTranslations('auth');
|
||||
const tCommon = useTranslations('common');
|
||||
const tValidation = useTranslations('validation');
|
||||
const { registerTrial, isLoading } = useAuth();
|
||||
const [step, setStep] = useState(1);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const registerSchema = useMemo(
|
||||
() =>
|
||||
z
|
||||
.object({
|
||||
name: z.string().min(2, tValidation('nameMinLength')),
|
||||
email: z.string().email(tValidation('emailInvalid')),
|
||||
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 {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { errors },
|
||||
trigger,
|
||||
setValue,
|
||||
} = useForm<RegisterForm>({
|
||||
resolver: zodResolver(registerSchema),
|
||||
mode: 'onChange',
|
||||
});
|
||||
|
||||
const organizationType = watch('organizationType');
|
||||
|
||||
const handleNext = async () => {
|
||||
const fieldsToValidate =
|
||||
step === 1
|
||||
? (['name', 'email', 'password', 'confirmPassword'] as const)
|
||||
: (['organizationName', 'organizationEmail', 'organizationType'] as const);
|
||||
|
||||
const isValid = await trigger([...fieldsToValidate]);
|
||||
if (isValid) {
|
||||
setStep(step + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (data: RegisterForm) => {
|
||||
try {
|
||||
setError(null);
|
||||
await registerTrial(
|
||||
data.email,
|
||||
data.password,
|
||||
data.name,
|
||||
data.organizationName,
|
||||
data.organizationEmail,
|
||||
data.organizationType,
|
||||
);
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : t('registrationFailed');
|
||||
setError(message || t('registrationFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
<TopBarControls />
|
||||
</div>
|
||||
|
||||
<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">{tCommon('appName')}</span>
|
||||
</Link>
|
||||
<h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
|
||||
{t('registerTitle')}
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-text-secondary">
|
||||
{t('registerPrompt')}{' '}
|
||||
<Link href="/login" className="font-medium text-primary hover:opacity-90">
|
||||
{t('signInLink')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<RegistrationProgressSteps step={step} />
|
||||
<div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
|
||||
<h3 className="text-sm font-medium text-text-primary mb-2">{t('trialIncludes')}</h3>
|
||||
<ul className="text-sm text-text-secondary space-y-1">
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2">✓</span> {t('trialTeamMembers')}
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2">✓</span> {t('trialFullAccess')}
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2">✓</span> {t('trialNoCard')}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Input
|
||||
label={t('fullName')}
|
||||
{...register('name')}
|
||||
placeholder="John Doe"
|
||||
error={errors.name?.message}
|
||||
icon={<User className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label={t('email')}
|
||||
{...register('email')}
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
error={errors.email?.message}
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label={t('password')}
|
||||
{...register('password')}
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
error={errors.password?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label={t('confirmPassword')}
|
||||
{...register('confirmPassword')}
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Button type="button" variant="primary" onClick={handleNext} fullWidth>
|
||||
{tCommon('continue')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<OrganizationDetailsFields
|
||||
register={register as never}
|
||||
errors={errors as never}
|
||||
organizationType={organizationType}
|
||||
setValue={setValue as never}
|
||||
/>
|
||||
{error && (
|
||||
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<Button type="button" variant="outline" onClick={() => setStep(1)}>
|
||||
{tCommon('back')}
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
|
||||
{t('startMyFreeTrial')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<p className="mt-6 text-xs text-center text-text-muted">
|
||||
By signing up, you agree to our{' '}
|
||||
<Link href="/terms" className="text-primary hover:opacity-90">
|
||||
{t('termsOfService')}
|
||||
</Link>{' '}
|
||||
and{' '}
|
||||
<Link href="/privacy" className="text-primary hover:opacity-90">
|
||||
{t('privacyPolicy')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { OrganizationSelectorContent } from '@/components/ui/organizations/OrganizationSelectorContent';
|
||||
|
||||
export default function SelectOrganizationPage() {
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg p-4 sm:p-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<OrganizationSelectorContent />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user