zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: bump version to 2.20.1 in package.json and refactor layout and… (#404)

Browse Source 
* chore: bump version to 2.20.1 in package.json and refactor layout and form components

- Incremented application version from 2.20.0 to 2.20.1 in package.json.
- Refactored RootLayout to optimize asynchronous calls and introduced getRootClassName function for better class management.
- Updated font handling in getFontsClassName function to streamline class generation.
- Enhanced various authentication form components by replacing Input with EmailInput and PasswordInput for improved consistency and usability.
- Adjusted layout styles in AuthLayoutShell and other components for better responsiveness.

* fix: improve content rendering fallback logic in ContentRenderer component

- Enhanced the ContentRenderer function to explicitly check for the presence of a renderer before returning content.
- Added a fallback mechanism to return raw content as React nodes when no renderer is found, improving robustness and user experience.
This commit is contained in:
Giancarlo Buomprisco
2025-11-02 16:14:21 +07:00
committed by GitHub
parent 116d41a284
commit ac12c9355c
14 changed files with 248 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/features/auth/src/components/auth-layout.tsx
View File

@@ -21,7 +21,7 @@ export function AuthLayoutShell({
<div
className={cn(
'bg-background flex w-full max-w-[23rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8',
'bg-background flex w-full max-w-[22rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8',
contentClassName,
)}
>

30
packages/features/auth/src/components/email-input.tsx Normal file
View File

@@ -0,0 +1,30 @@
'use client';
import { Mail } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@kit/ui/input-group';
export function EmailInput(props: React.ComponentProps<'input'>) {
const { t } = useTranslation('auth');
return (
<InputGroup className="dark:bg-background">
<InputGroupAddon>
<Mail className="h-4 w-4" />
</InputGroupAddon>
<InputGroupInput
data-test={'email-input'}
required
type="email"
placeholder={t('emailPlaceholder')}
{...props}
/>
</InputGroup>
);
}

11
packages/features/auth/src/components/existing-account-hint.tsx
View File

@@ -70,11 +70,7 @@ export function ExistingAccountHintImpl({
return (
<If condition={Boolean(methodDescription)}>
<Alert
data-test={'existing-account-hint'}
variant="info"
className={className}
>
<Alert data-test={'existing-account-hint'} className={className}>
<UserCheck className="h-4 w-4" />
<AlertDescription>
@@ -84,10 +80,7 @@ export function ExistingAccountHintImpl({
components={{
method: <span className="font-medium" />,
signInLink: (
<Link
href={signInPath}
className="font-medium underline hover:no-underline"
/>
<Link href={signInPath} className="font-medium underline" />
),
}}
/>

10
packages/features/auth/src/components/magic-link-auth-container.tsx
View File

@@ -19,12 +19,12 @@ import {
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { toast } from '@kit/ui/sonner';
import { Trans } from '@kit/ui/trans';
import { useCaptcha } from '../captcha/client';
import { useLastAuthMethod } from '../hooks/use-last-auth-method';
import { EmailInput } from './email-input';
import { TermsAndConditionsFormField } from './terms-and-conditions-form-field';
export function MagicLinkAuthContainer({
@@ -118,13 +118,7 @@ export function MagicLinkAuthContainer({
</FormLabel>
<FormControl>
<Input
data-test={'email-input'}
required
type="email"
placeholder={t('auth:emailPlaceholder')}
{...field}
/>
<EmailInput data-test="email-input" {...field} />
</FormControl>
<FormMessage />

10
packages/features/auth/src/components/otp-sign-in-container.tsx
View File

@@ -17,7 +17,6 @@ import {
FormItem,
FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import {
InputOTP,
InputOTPGroup,
@@ -30,6 +29,7 @@ import { Trans } from '@kit/ui/trans';
import { useCaptcha } from '../captcha/client';
import { useLastAuthMethod } from '../hooks/use-last-auth-method';
import { AuthErrorAlert } from './auth-error-alert';
import { EmailInput } from './email-input';
const EmailSchema = z.object({ email: z.string().email() });
const OtpSchema = z.object({ token: z.string().min(6).max(6) });
@@ -216,13 +216,7 @@ function OtpEmailForm({
render={({ field }) => (
<FormItem>
<FormControl>
<Input
required
type="email"
placeholder="email@example.com"
data-test="otp-email-input"
{...field}
/>
<EmailInput data-test="otp-email-input" {...field} />
</FormControl>
<FormMessage />

46
packages/features/auth/src/components/password-input.tsx Normal file
View File

@@ -0,0 +1,46 @@
'use client';
import { useState } from 'react';
import { Eye, EyeOff, Lock } from 'lucide-react';
import { Button } from '@kit/ui/button';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@kit/ui/input-group';
export function PasswordInput(props: React.ComponentProps<'input'>) {
const [showPassword, setShowPassword] = useState(false);
return (
<InputGroup className="dark:bg-background">
<InputGroupAddon>
<Lock className="h-4 w-4" />
</InputGroupAddon>
<InputGroupInput
data-test="password-input"
type={showPassword ? 'text' : 'password'}
placeholder={'************'}
{...props}
/>
<InputGroupAddon align="inline-end">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="h-4 w-4" />
) : (
<Eye className="h-4 w-4" />
)}
</Button>
</InputGroupAddon>
</InputGroup>
);
}

116
packages/features/auth/src/components/password-sign-in-form.tsx
View File

@@ -3,7 +3,7 @@
import Link from 'next/link';
import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowRight } from 'lucide-react';
import { ArrowRight, Mail } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import type { z } from 'zod';
@@ -14,14 +14,18 @@ import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@kit/ui/input-group';
import { Trans } from '@kit/ui/trans';
import { PasswordSignInSchema } from '../schemas/password-sign-in.schema';
import { PasswordInput } from './password-input';
export function PasswordSignInForm({
onSubmit,
@@ -48,67 +52,61 @@ export function PasswordSignInForm({
className={'flex w-full flex-col gap-y-4'}
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField
control={form.control}
name={'email'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:emailAddress'} />
</FormLabel>
<div className={'flex flex-col space-y-2.5'}>
<FormField
control={form.control}
name={'email'}
render={({ field }) => (
<FormItem>
<FormControl>
<InputGroup className="dark:bg-background">
<InputGroupAddon>
<Mail className="h-4 w-4" />
</InputGroupAddon>
<FormControl>
<Input
data-test={'email-input'}
required
type="email"
placeholder={t('emailPlaceholder')}
{...field}
/>
</FormControl>
<InputGroupInput
data-test={'email-input'}
required
type="email"
placeholder={t('emailPlaceholder')}
{...field}
/>
</InputGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'password'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:password'} />
</FormLabel>
<FormField
control={form.control}
name={'password'}
render={({ field }) => (
<FormItem>
<FormControl>
<PasswordInput {...field} />
</FormControl>
<FormControl>
<Input
required
data-test={'password-input'}
type="password"
placeholder={''}
{...field}
/>
</FormControl>
<FormMessage />
<FormMessage />
<div>
<Button
asChild
type={'button'}
size={'sm'}
variant={'link'}
className={'text-xs'}
>
<Link href={'/auth/password-reset'}>
<Trans i18nKey={'auth:passwordForgottenQuestion'} />
</Link>
</Button>
</div>
</FormItem>
)}
/>
<div>
<Button
asChild
type={'button'}
size={'sm'}
variant={'link'}
className={'text-xs'}
>
<Link href={'/auth/password-reset'}>
<Trans i18nKey={'auth:passwordForgottenQuestion'} />
</Link>
</Button>
</div>
</FormItem>
)}
/>
</div>
<Button
data-test="auth-submit-button"

121
packages/features/auth/src/components/password-sign-up-form.tsx
View File

@@ -3,7 +3,6 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowRight } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { Button } from '@kit/ui/button';
import {
@@ -12,14 +11,14 @@ import {
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';
import { PasswordSignUpSchema } from '../schemas/password-sign-up.schema';
import { EmailInput } from './email-input';
import { PasswordInput } from './password-input';
import { TermsAndConditionsFormField } from './terms-and-conditions-form-field';
interface PasswordSignUpFormProps {
@@ -43,8 +42,6 @@ export function PasswordSignUpForm({
onSubmit,
loading,
}: PasswordSignUpFormProps) {
const { t } = useTranslation();
const form = useForm({
resolver: zodResolver(PasswordSignUpSchema),
defaultValues: {
@@ -60,82 +57,56 @@ export function PasswordSignUpForm({
className={'flex w-full flex-col gap-y-4'}
onSubmit={form.handleSubmit(onSubmit)}
>
<FormField
control={form.control}
name={'email'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:emailAddress'} />
</FormLabel>
<div className={'flex flex-col space-y-2.5'}>
<FormField
control={form.control}
name={'email'}
render={({ field }) => (
<FormItem>
<FormControl>
<EmailInput data-test={'email-input'} {...field} />
</FormControl>
<FormControl>
<Input
data-test={'email-input'}
required
type="email"
placeholder={t('emailPlaceholder')}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'password'}
render={({ field }) => (
<FormItem>
<FormControl>
<PasswordInput {...field} />
</FormControl>
<FormField
control={form.control}
name={'password'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:password'} />
</FormLabel>
<FormMessage />
</FormItem>
)}
/>
<FormControl>
<Input
required
data-test={'password-input'}
type="password"
autoComplete="new-password"
placeholder={''}
{...field}
/>
</FormControl>
<FormField
control={form.control}
name={'repeatPassword'}
render={({ field }) => (
<FormItem>
<FormControl>
<PasswordInput
data-test={'repeat-password-input'}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormDescription>
<Trans i18nKey={'auth:repeatPasswordDescription'} />
</FormDescription>
<FormField
control={form.control}
name={'repeatPassword'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'auth:repeatPassword'} />
</FormLabel>
<FormControl>
<Input
required
data-test={'repeat-password-input'}
type="password"
placeholder={''}
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription className={'pb-2 text-xs'}>
<Trans i18nKey={'auth:repeatPasswordHint'} />
</FormDescription>
</FormItem>
)}
/>
<FormMessage />
</FormItem>
)}
/>
</div>
<If condition={displayTermsCheckbox}>
<TermsAndConditionsFormField />

14
packages/features/auth/src/components/resend-auth-link-form.tsx
View File

@@ -13,12 +13,12 @@ import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';
import { useCaptcha } from '../captcha/client';
import { EmailInput } from './email-input';
export function ResendAuthLinkForm(props: {
redirectPath?: string;
@@ -71,20 +71,18 @@ export function ResendAuthLinkForm(props: {
{captcha.field}
<FormField
name={'email'}
render={({ field }) => {
return (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:emailAddress'} />
</FormLabel>
<FormControl>
<Input type="email" required {...field} />
<EmailInput data-test="email-input" {...field} />
</FormControl>
<FormMessage />
</FormItem>
);
}}
name={'email'}
/>
<Button disabled={resendLink.isPending}>

27
packages/features/auth/src/components/update-password-form.tsx
View File

@@ -15,16 +15,16 @@ import { Button } from '@kit/ui/button';
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { Heading } from '@kit/ui/heading';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';
import { PasswordResetSchema } from '../schemas/password-reset.schema';
import { PasswordInput } from './password-input';
export function UpdatePasswordForm(params: {
redirectTo: string;
@@ -72,22 +72,13 @@ export function UpdatePasswordForm(params: {
toast.success(t('account:updatePasswordSuccessMessage'));
})}
>
<div className={'flex-col space-y-4'}>
<div className={'flex-col space-y-2.5'}>
<FormField
name={'password'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:password'} />
</FormLabel>
<FormControl>
<Input
required
type="password"
autoComplete={'new-password'}
{...field}
/>
<PasswordInput autoComplete={'new-password'} {...field} />
</FormControl>
<FormMessage />
@@ -99,14 +90,14 @@ export function UpdatePasswordForm(params: {
name={'repeatPassword'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:repeatPassword'} />
</FormLabel>
<FormControl>
<Input required type="password" {...field} />
<PasswordInput autoComplete={'new-password'} {...field} />
</FormControl>
<FormDescription>
<Trans i18nKey={'common:repeatPassword'} />
</FormDescription>
<FormMessage />
</FormItem>
)}