fix(sign-in): add sign-up links and update layout/validations

- Add sign-up links to sign-in pages
- Update layout styles
- Update validation messages

src/features/auth/sign-in/components/user-auth-form.tsx

@@ -22,12 +22,12 @@ import { PasswordInput } from '@/components/password-input'
 
 const formSchema = z.object({
   email: z.email({
-    error: (iss) => (iss.input === '' ? 'Please enter your email' : undefined),
+    error: (iss) => (iss.input === '' ? 'Please enter your email.' : undefined),
   }),
   password: z
     .string()
-    .min(1, 'Please enter your password')
-    .min(7, 'Password must be at least 7 characters long'),
+    .min(1, 'Please enter your password.')
+    .min(7, 'Password must be at least 7 characters long.'),
 })
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLFormElement> {
@@ -113,7 +113,7 @@ export function UserAuthForm({
               <FormMessage />
               <Link
                 to='/forgot-password'
-                className='absolute end-0 -top-0.5 text-sm font-medium text-muted-foreground hover:opacity-75'
+                className='absolute inset-e-0 -top-0.5 text-sm font-medium text-muted-foreground hover:opacity-75'
               >
                 Forgot password?
               </Link>

src/features/auth/sign-in/index.tsx

@@ -1,4 +1,4 @@
-import { useSearch } from '@tanstack/react-router'
+import { Link, useSearch } from '@tanstack/react-router'
 import {
   Card,
   CardContent,
@@ -15,12 +15,19 @@ export function SignIn() {
 
   return (
     <AuthLayout>
-      <Card className='gap-4'>
+      <Card className='max-w-sm gap-4'>
         <CardHeader>
           <CardTitle className='text-lg tracking-tight'>Sign in</CardTitle>
           <CardDescription>
-            Enter your email and password below to <br />
-            log into your account
+            Enter your email and password below to log into{' '}
+            <br className='max-sm:hidden' /> your account. Don't have an
+            account?{' '}
+            <Link
+              to='/sign-up'
+              className='text-nowrap underline underline-offset-4 hover:text-primary'
+            >
+              Sign Up
+            </Link>
           </CardDescription>
         </CardHeader>
         <CardContent>

src/features/auth/sign-in/sign-in-2.tsx

@@ -1,3 +1,4 @@
+import { Link } from '@tanstack/react-router'
 import { Logo } from '@/assets/logo'
 import { cn } from '@/lib/utils'
 import dashboardDark from './assets/dashboard-dark.png'
@@ -18,8 +19,15 @@ export function SignIn2() {
           <div className='flex flex-col space-y-2 text-start'>
             <h2 className='text-lg font-semibold tracking-tight'>Sign in</h2>
             <p className='text-sm text-muted-foreground'>
-              Enter your email and password below <br />
-              to log into your account
+              Enter your email and password below to log into{' '}
+              <br className='max-sm:hidden' /> your account. Don't have an
+              account?{' '}
+              <Link
+                to='/sign-up'
+                className='text-nowrap underline underline-offset-4 hover:text-primary'
+              >
+                Sign Up
+              </Link>
             </p>
           </div>
           <UserAuthForm />