feat-#38: Implemented User Authentication UI

frontend/package.json

@@ -12,17 +12,20 @@
     "test": "jest"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "axios": "^1.6.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.292.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.2",
     "react-router-dom": "^6.18.0",
     "react-tag-input": "^6.8.1",
     "react-toastify": "^9.1.3",
     "tailwind-merge": "^2.0.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.6",

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import AddBlog from '@/pages/add-blog';
 import DetailsPage from '@/pages/details-page';
 import ScrollToTop from '@/components/scroll-to-top';
 import Footer from '@/layouts/footer-layout';
+import SignIn from '@/pages/signin-page';
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
             <Route index element={<HomePage />} />
             <Route path="add-blog" element={<AddBlog />} />
             <Route path="details-page/:title/:postId" element={<DetailsPage />} />
+            <Route path="user-auth" element={<SignIn/>} />
           </Route>
         </Routes>
         <Footer />

frontend/src/lib/types.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+export const signInSchema = z.object({
+    email: z.string().min(1, { message: "Email is required" }).regex(emailRegex, "Invalid email address"),
+    password: z.string().min(1, { message: "Password is required" }),
+});
+
+export type TSignInSchema = z.infer<typeof signInSchema>;

frontend/src/pages/signin-page.tsx

@@ -0,0 +1,109 @@
+import { Link, useNavigate } from 'react-router-dom';
+import AddGoogleIcon from '@/assets/svg/google-color-icon.svg';
+import AddGithubIcon from '@/assets/svg/github-icon.svg';
+import { useForm } from 'react-hook-form';
+import type { FieldValues } from 'react-hook-form';
+import { TSignInSchema, signInSchema } from '@/lib/types';
+import 'react-toastify/dist/ReactToastify.css';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'react-toastify';
+
+function signin() {
+  const navigate = useNavigate();
+
+  const { register, 
+        handleSubmit, 
+        formState: { errors , isSubmitting},
+        reset
+      } = useForm<TSignInSchema>({resolver: zodResolver(signInSchema)});
+
+  const onSubmit = async (data: FieldValues) => {
+
+    if(data.email === "[email protected]"){
+      toast.error('Submitting form is failed');
+      return;
+    }
+
+    // TODO: Server-side validation
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    reset();
+    navigate("/");
+  }
+
+  return (
+    <div className="flex-grow cursor-default bg-white px-5 py-9 mt-1">
+      <div className="mb-4 flex justify-center">
+        <div className="flex items-center justify-center space-x-4 w-5/6 md:w-5/6 lg:w-2/5">
+          <h2 className="text-center text-2xl sm:text-3xl md:text-4xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-bold text-black w-3/4">
+            Sign in to WanderLust
+          </h2>
+        </div>
+      </div>
+      <div className="flex flex-col justify-center items-center mt-12 gap-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="w-3/4 md:w-5/6 lg:w-2/5">
+
+          <div className="mb-4">
+            <input
+              {...register('email')}
+              type="email"
+              placeholder="Email"
+              className="w-full rounded-lg font-semibold bg-input-background p-3 placeholder:text-sm placeholder:text-light-gray"
+              // value={formData.title}
+              // onChange={handleInputChange}
+            />
+            {errors.email && (
+              <p className="text-red-500 text-xs p-2">
+                {`${errors.email.message}`}
+              </p>
+            )}
+          </div>
+
+          <div className="mb-4">
+            <input
+              {...register('password')}
+              type="password"
+              placeholder="Password"
+              className="w-full rounded-lg font-semibold bg-input-background p-3 placeholder:text-sm placeholder:text-light-gray"
+              // value={formData.description}
+              // onChange={handleInputChange}
+            />
+            {errors.password && (
+              <p className="text-red-500 text-xs p-2">
+                {`${errors.password.message}`}
+              </p>
+            )}
+          </div>
+
+          <button
+            disabled={isSubmitting}
+            type="submit"
+            className="flex disabled:bg-[#3C3C3C] w-full items-center justify-center rounded-lg bg-login-background p-3 text-base font-semibold text-light md:fit"
+          >
+            Log In
+          </button>
+        </form>
+        <div className='flex flex-col items-center justify-center gap-4 text-center'>
+        <p className='w-3/4 sm:w-full'> Don't have an account? 
+          <Link to={'/signup'} className="text-blue-600 hover:text-blue-500"> Sign up now</Link>
+        </p>
+
+        <span>OR</span>
+        </div>
+
+        <Link to={'/google-auth'} className='flex items-center justify-center p-3 space-x-2 rounded-lg border-2 border-b-4  border-gray-300 w-3/4 md:w-5/6 lg:w-2/5 hover:bg-light-white text-center'>
+              <img className='h-4 w-6 sm:h-5 sm:w-10' src={AddGoogleIcon}/>
+              <span className='font-bold'>Continue with Google</span>
+        </Link>
+
+        <Link to={'/github-auth'} className='flex items-center justify-center p-3 space-x-2 rounded-lg border-2 border-b-4 border-gray-300 w-3/4 md:w-5/6 lg:w-2/5 hover:bg-light-white text-center'>
+              <img className='h-4 w-6 sm:h-5 sm:w-10' src={AddGithubIcon}/>
+              <span className='font-bold'>Continue with Github</span>
+        </Link>
+
+      </div>
+    </div>
+  );
+}
+
+export default signin;

frontend/tailwind.config.js

@@ -32,6 +32,10 @@ export default {
         'dark-theme-background': '#092e40',
         'dark-theme-foreground': '#25a5e3',
         'footer-background': '#181818',
+        'login-background': '#232323',
+        'input-background': '#F8F8F8',
+        'light-gray': '#686868',
+        'light-white': '#f9fafb',
       },
       fontFamily: {
         sans: ['Poppins', ...defaultTheme.fontFamily.sans],