fix: 首页出版效果
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import EmailAuthForm from '@/app/auth/email/auth-form';
|
||||
import CloseSvg from '@/components/CustomIcon/icons/close.svg';
|
||||
import { Dialog, DialogContent, DialogTitle } from '@workspace/ui/components/dialog';
|
||||
import Image from 'next/image';
|
||||
import { forwardRef, useImperativeHandle, useState } from 'react';
|
||||
|
||||
export interface EmailAuthDialogRef {
|
||||
show: () => void;
|
||||
hide: () => void;
|
||||
}
|
||||
|
||||
const EmailAuthDialog = forwardRef<EmailAuthDialogRef>((props, ref) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
show: () => setOpen(true),
|
||||
hide: () => setOpen(false),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent
|
||||
className={
|
||||
'rounded-0 h-full w-full px-12 py-[4.5rem] md:h-auto md:w-[496px] md:!rounded-[50px]'
|
||||
}
|
||||
closeIcon={<Image src={CloseSvg} alt={'close'} />}
|
||||
closeClassName={
|
||||
'right-[40px] top-[30px] font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
|
||||
}
|
||||
>
|
||||
<DialogTitle className={'sr-only'}>title</DialogTitle>
|
||||
<div className={'min-h-[524px]'}>
|
||||
<EmailAuthForm />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
});
|
||||
|
||||
export default EmailAuthDialog;
|
||||
@@ -49,15 +49,21 @@ export default function LoginForm({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'pb-9 pt-16 text-4xl font-bold'}>账户验证</div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={handleSubmit} className='grid gap-6'>
|
||||
<form onSubmit={handleSubmit} className=''>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='email'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormItem className={'mb-5'}>
|
||||
<FormControl>
|
||||
<Input placeholder='Enter your email...' type='email' {...field} />
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
placeholder='Email'
|
||||
type='email'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -67,9 +73,14 @@ export default function LoginForm({
|
||||
control={form.control}
|
||||
name='password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormItem className={'mb-2'}>
|
||||
<FormControl>
|
||||
<Input placeholder='Enter your password...' type='password' {...field} />
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
placeholder='password'
|
||||
type='password'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -80,7 +91,7 @@ export default function LoginForm({
|
||||
control={form.control}
|
||||
name='cf_token'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormItem className={'last:mb-0'}>
|
||||
<FormControl>
|
||||
<CloudFlareTurnstile id='login' {...field} ref={turnstile} />
|
||||
</FormControl>
|
||||
@@ -89,27 +100,39 @@ export default function LoginForm({
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Button type='submit' disabled={loading}>
|
||||
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
|
||||
{t('title')}
|
||||
</Button>
|
||||
<div className='flex w-full justify-between text-sm'>
|
||||
<Button
|
||||
variant='link'
|
||||
type='button'
|
||||
className='p-0'
|
||||
onClick={() => onSwitchForm('reset')}
|
||||
>
|
||||
{t('forgotPassword')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='link'
|
||||
className='p-0'
|
||||
onClick={() => {
|
||||
setInitialValues(undefined);
|
||||
onSwitchForm('register');
|
||||
}}
|
||||
>
|
||||
{t('registerAccount')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex justify-center'>
|
||||
<Button
|
||||
type='submit'
|
||||
disabled={loading}
|
||||
className='h-[64px] w-[219px] rounded-full border-[#0F2C53] bg-[#0F2C53] text-2xl font-bold hover:bg-[#225BA9] hover:text-white'
|
||||
>
|
||||
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
|
||||
{t('title')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
<div className='mt-4 flex w-full justify-between text-sm'>
|
||||
<Button variant='link' type='button' className='p-0' onClick={() => onSwitchForm('reset')}>
|
||||
{t('forgotPassword')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='link'
|
||||
className='p-0'
|
||||
onClick={() => {
|
||||
setInitialValues(undefined);
|
||||
onSwitchForm('register');
|
||||
}}
|
||||
>
|
||||
{t('registerAccount')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -87,132 +87,156 @@ export default function RegisterForm({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'pb-9 text-4xl font-bold'}>注册账户</div>
|
||||
|
||||
{auth.register.stop_register ? (
|
||||
<Markdown>{t('message')}</Markdown>
|
||||
) : (
|
||||
<Form {...form}>
|
||||
<form onSubmit={handleSubmit} className='grid gap-6'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='email'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input placeholder='Enter your email...' type='email' {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input placeholder='Enter your password...' type='password' {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='repeat_password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
disabled={loading}
|
||||
placeholder='Enter password again...'
|
||||
type='password'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{auth.email.enable_verify && (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='grid gap-5'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='code'
|
||||
name='email'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Input
|
||||
disabled={loading}
|
||||
placeholder='Enter code...'
|
||||
type='text'
|
||||
{...field}
|
||||
value={field.value as string}
|
||||
/>
|
||||
<SendCode
|
||||
type='email'
|
||||
params={{
|
||||
...form.getValues(),
|
||||
type: 1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
placeholder='Enter your email...'
|
||||
type='email'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='invite'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
disabled={loading || !!localStorage.getItem('invite')}
|
||||
placeholder={t('invite')}
|
||||
{...field}
|
||||
value={field.value || ''}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{verify.enable_register_verify && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='cf_token'
|
||||
name='password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<CloudFlareTurnstile id='register' {...field} ref={turnstile} />
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
placeholder='Enter your password...'
|
||||
type='password'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Button type='submit' disabled={loading}>
|
||||
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
|
||||
{t('title')}
|
||||
</Button>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='repeat_password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
disabled={loading}
|
||||
placeholder='Enter password again...'
|
||||
type='password'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{auth.email.enable_verify && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='code'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className='flex items-center gap-8'>
|
||||
<Input
|
||||
disabled={loading}
|
||||
className={'h-[60px] flex-1 text-xl'}
|
||||
placeholder='Enter code...'
|
||||
type='text'
|
||||
{...field}
|
||||
value={field.value as string}
|
||||
/>
|
||||
<SendCode
|
||||
type='email'
|
||||
params={{
|
||||
...form.getValues(),
|
||||
type: 1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='invite'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
disabled={loading || !!localStorage.getItem('invite')}
|
||||
placeholder={t('invite')}
|
||||
{...field}
|
||||
value={field.value || ''}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{verify.enable_register_verify && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='cf_token'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<CloudFlareTurnstile id='register' {...field} ref={turnstile} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='text-right text-sm'>
|
||||
{t('existingAccount')}
|
||||
<Button
|
||||
variant='link'
|
||||
className='p-0'
|
||||
onClick={() => {
|
||||
setInitialValues(undefined);
|
||||
onSwitchForm('login');
|
||||
}}
|
||||
>
|
||||
{t('switchToLogin')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className='mt-6 flex justify-center'>
|
||||
<Button
|
||||
type='submit'
|
||||
disabled={loading}
|
||||
className='h-[64px] w-[219px] rounded-full border-[#0F2C53] bg-[#0F2C53] text-2xl font-bold hover:bg-[#225BA9] hover:text-white'
|
||||
>
|
||||
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
|
||||
{t('title')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
<div className='mt-4 text-right text-sm'>
|
||||
{t('existingAccount')}
|
||||
<Button
|
||||
variant='link'
|
||||
className='p-0'
|
||||
onClick={() => {
|
||||
setInitialValues(undefined);
|
||||
onSwitchForm('login');
|
||||
}}
|
||||
>
|
||||
{t('switchToLogin')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,92 +54,112 @@ export default function ResetForm({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'pb-9 pt-10 text-4xl font-bold'}>找回账户</div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={handleSubmit} className='grid gap-6'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='email'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input placeholder='Enter your email...' type='email' {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='code'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Input
|
||||
disabled={loading}
|
||||
placeholder='Enter code...'
|
||||
type='text'
|
||||
{...field}
|
||||
value={field.value as string}
|
||||
/>
|
||||
<SendCode
|
||||
type='email'
|
||||
params={{
|
||||
...form.getValues(),
|
||||
type: 2,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input placeholder='Enter your new password...' type='password' {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{verify.enable_reset_password_verify && (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='grid gap-5'>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='cf_token'
|
||||
name='email'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
placeholder='Enter your email...'
|
||||
type='email'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Button type='submit' disabled={loading}>
|
||||
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
|
||||
{t('title')}
|
||||
</Button>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='code'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className='flex items-center gap-8'>
|
||||
<Input
|
||||
className={'h-[60px] flex-1 text-xl'}
|
||||
disabled={loading}
|
||||
placeholder='Enter code...'
|
||||
type='text'
|
||||
{...field}
|
||||
value={field.value as string}
|
||||
/>
|
||||
<SendCode
|
||||
type='email'
|
||||
params={{
|
||||
...form.getValues(),
|
||||
type: 2,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='password'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
className={'h-[60px] text-xl'}
|
||||
placeholder='Enter your new password...'
|
||||
type='password'
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{verify.enable_reset_password_verify && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='cf_token'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className='text-right text-sm'>
|
||||
{t('existingAccount')}
|
||||
<Button
|
||||
variant='link'
|
||||
className='p-0'
|
||||
onClick={() => {
|
||||
setInitialValues(undefined);
|
||||
onSwitchForm('login');
|
||||
}}
|
||||
>
|
||||
{t('switchToLogin')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className='mt-6 flex justify-center'>
|
||||
<Button
|
||||
type='submit'
|
||||
disabled={loading}
|
||||
className='h-[64px] w-[219px] rounded-full border-[#0F2C53] bg-[#0F2C53] text-2xl font-bold hover:bg-[#225BA9] hover:text-white'
|
||||
>
|
||||
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
|
||||
{t('title')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
<div className='mt-4 text-right text-sm'>
|
||||
{t('existingAccount')}
|
||||
<Button
|
||||
variant='link'
|
||||
className='p-0'
|
||||
onClick={() => {
|
||||
setInitialValues(undefined);
|
||||
onSwitchForm('login');
|
||||
}}
|
||||
>
|
||||
{t('switchToLogin')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -81,7 +81,14 @@ export default function SendCode({ type, params }: SendCodeProps) {
|
||||
(type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);
|
||||
|
||||
return (
|
||||
<Button type='button' onClick={handleSendCode} disabled={disabled}>
|
||||
<Button
|
||||
type='button'
|
||||
className={
|
||||
'h-[60px] w-[109px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] text-xl hover:bg-[#225BA9] hover:text-white'
|
||||
}
|
||||
onClick={handleSendCode}
|
||||
disabled={disabled}
|
||||
>
|
||||
{seconds > 0 ? `${seconds}s` : t('get')}
|
||||
</Button>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user