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,8 @@ 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';
+import SignUp from '@/pages/signup-page';
 
 function App() {
   return (
@@ -15,6 +17,8 @@ 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 path="signup" element={<SignUp />} />
           </Route>
         </Routes>
         <Footer />

frontend/src/layouts/footer-layout.tsx

@@ -3,7 +3,7 @@ function footer() {
   const year = newDate.getFullYear();
 
   return (
-    <footer className="flex min-h-[6vh] flex-col items-center bg-footer-background py-2 text-center text-white sm:flex-row sm:justify-between sm:py-3">
+    <footer className="flex min-h-[6vh] flex-col items-center bg-zinc-900 py-2 text-center text-white sm:flex-row sm:justify-between sm:py-3">
       <section className="text-base sm:pl-4 md:pl-8 lg:pl-16">WanderLust</section>
       <section className="text-base sm:pr-4 md:pr-16 lg:pr-24">
         <span className="mr-2">&copy;</span>

frontend/src/lib/types.ts

@@ -0,0 +1,37 @@
+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 const signUpSchema = z
+  .object({
+    username: z.string().min(1, { message: 'Username is required' }),
+    email: z
+      .string()
+      .min(1, { message: 'Email is required' })
+      .regex(emailRegex, 'Invalid email address'),
+    password: z.string().min(1, { message: 'Password is required' }),
+    confirmPassword: z.string().min(1, { message: 'Confirm Password is required' }),
+  })
+  .refine((data) => data.username.trim().length >= 5, {
+    message: 'Username must be at least 5 characters long',
+    path: ['username'],
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  })
+  .refine((data) => data.password.trim().length >= 8, {
+    message: 'Password must be at least 8 characters long',
+    path: ['password'],
+  });
+
+export type TSignInSchema = z.infer<typeof signInSchema>;
+export type TSignUpSchema = z.infer<typeof signUpSchema>;

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="m-4 flex-grow cursor-default bg-white py-4">
+      <div className="mb-4 flex justify-center">
+        <div className="flex w-full items-center justify-center">
+          <h2 className="w-3/4 text-center text-lg font-bold text-black sm:text-xl">
+            Sign in to WanderLust
+          </h2>
+        </div>
+      </div>
+      <div className="m-2 mt-8 flex flex-col items-center justify-center gap-2">
+        <form onSubmit={handleSubmit(onSubmit)} className="w-full md:w-3/4 lg:w-2/5">
+          <div className="mb-2">
+            <input
+              {...register('email')}
+              type="email"
+              placeholder="Email"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+            />
+            {errors.email && (
+              <p className="p-3 text-xs text-red-500">{`${errors.email.message}`}</p>
+            )}
+          </div>
+
+          <div className="mb-4">
+            <input
+              {...register('password')}
+              type="password"
+              placeholder="Password"
+              className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
+            />
+            {errors.password && (
+              <p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
+            )}
+          </div>
+
+          <button
+            disabled={isSubmitting}
+            type="submit"
+            className="flex w-full items-center justify-center rounded-lg bg-neutral-800 p-3 text-base font-medium text-light disabled:bg-neutral-600 sm:text-lg sm:font-semibold"
+          >
+            Log In
+          </button>
+        </form>
+        <div className="mt-2 flex w-5/6 flex-col items-center justify-center gap-4 text-center text-sm font-normal sm:text-base">
+          <p>
+            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 w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4  border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+        >
+          <img className="h-4 w-6 pl-1 sm:h-5 sm:w-10" src={AddGoogleIcon} />
+          <span className="text-sm sm:text-base">Continue with Google</span>
+        </Link>
+
+        <Link
+          to={'/github-auth'}
+          className="flex w-full items-center justify-center space-x-2 rounded-lg border-2 border-b-4 border-gray-300 p-3 text-center hover:bg-gray-50 md:w-3/4 lg:w-2/5"
+        >
+          <img className="h-4 w-6 sm:h-5 sm:w-10" src={AddGithubIcon} />
+          <span className="text-sm sm:text-base">Continue with Github</span>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default signin;