feat: adding auth pages

GCStatus · Sep 8, 2024 · 21201b0 · 21201b0
1 parent a2d51fb
commit 21201b0
Show file tree

Hide file tree

Showing 28 changed files with 1,096 additions and 33 deletions.
diff --git a/TODO.md b/TODO.md
@@ -14,8 +14,8 @@
   - [ ] Add reviews section with filtering options
   - [ ] Implement search functionality for news and reviews
 - [ ] User authentication
-  - [ ] Create login and register page
-  - [ ] Create page to forgot password and reset
+  - [x] Create login and register page
+  - [x] Create page to forgot password and reset
   - [ ] Set up user registration and login
   - [ ] Implement OAuth for Google and Facebook
   - [ ] Create a user profile page with editable settings

diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -3,19 +3,28 @@ import { useRoutes } from 'react-router-dom'
 
 import { Loadable as L } from './components'
 import { DefaultLayout } from './layouts'
+import Error from './pages/Error'
 
 export const Routes = () => {
   const Home = L(lazy(() => import('./pages/Home')))
+  const Login = L(lazy(() => import('./pages/#')))
   const Search = L(lazy(() => import('./pages/Search')))
   const Profile = L(lazy(() => import('./pages/Profile')))
+  const Register = L(lazy(() => import('./pages/Register')))
   const Calendar = L(lazy(() => import('./pages/Calendar')))
   const GameTags = L(lazy(() => import('./pages/Game/Tags')))
+  const Reset = L(lazy(() => import('./pages/Password/Reset')))
+  const Forgot = L(lazy(() => import('./pages/Password/Forgot')))
   const GameGenres = L(lazy(() => import('./pages/Game/Genres')))
   const GameDetails = L(lazy(() => import('./pages/Game/Details')))
   const GamePlatforms = L(lazy(() => import('./pages/Game/Platforms')))
   const GameCategories = L(lazy(() => import('./pages/Game/Categories')))
 
   return useRoutes([
+    { path: '/#', element: <Login /> },
+    { path: '/register', element: <Register /> },
+    { path: '/password/forgot', element: <Forgot /> },
+    { path: '/password/reset/:token', element: <Reset /> },
     {
       element: <DefaultLayout />,
       children: [
@@ -48,5 +57,14 @@ export const Routes = () => {
         { path: '/categories/:category', element: <GameCategories /> },
       ],
     },
+    {
+      path: '*',
+      element: (
+        <Error
+          error={404}
+          description="Your path is lost in the darkness..."
+        />
+      ),
+    },
   ])
 }
diff --git a/src/components/AuthBg/AuthBg.tsx b/src/components/AuthBg/AuthBg.tsx
@@ -0,0 +1,29 @@
+import { Box } from '@mui/material'
+
+interface AuthBgProps {
+  cover: string
+}
+
+function AuthBg(props: AuthBgProps) {
+  const { cover } = props
+
+  return (
+    <Box>
+      <Box
+        className="absolute top-0 left-0 w-full h-full bg-cover bg-center"
+        style={{
+          backgroundImage: `url(${cover})`,
+          backgroundAttachment: 'fixed',
+        }}
+      />
+
+      <Box className="absolute top-0 left-0 w-full h-[5rem] bg-gradient-to-b from-transparent to-black/40 flicker-top" />
+
+      <Box className="absolute bottom-0 left-0 w-full h-[5rem] bg-gradient-to-t from-transparent to-black/40 flicker-bottom" />
+
+      <Box className="absolute inset-0 w-full h-full bg-black bg-opacity-60 z-10" />
+    </Box>
+  )
+}
+
+export default AuthBg
diff --git a/src/components/AuthBg/index.ts b/src/components/AuthBg/index.ts
@@ -0,0 +1 @@
+export { default } from './AuthBg'
diff --git a/src/components/Header/modules/Navbar.tsx b/src/components/Header/modules/Navbar.tsx
@@ -1,10 +1,24 @@
-import { Box, IconButton, Link, Stack, Tooltip } from '@mui/material'
+import {
+  Box,
+  IconButton,
+  Link,
+  Stack,
+  Tooltip,
+  Typography,
+} from '@mui/material'
 import { Fragment, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import { IoCalendar, IoClose, IoMenu, IoSearch } from 'react-icons/io5'
+import {
+  IoCalendarOutline,
+  IoClose,
+  IoLogInOutline,
+  IoMenuOutline,
+  IoSearch,
+} from 'react-icons/io5'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import { Backdrop, Logo, SwitchSidebar, SwitchTheme } from '@/components'
+import { useAccount } from '@/hooks'
 import { Notification } from '@/types'
 
 import { Notifications } from '.'
@@ -16,6 +30,7 @@ interface NavbarProps {
 function Navbar(props: NavbarProps) {
   const { notifications } = props
   const go = useNavigate()
+  const { user } = useAccount()
   const { query = '' } = useParams()
   const [open, setOpen] = useState<boolean>(false)
   const [search, setSearch] = useState<string>(query)
@@ -83,17 +98,24 @@ function Navbar(props: NavbarProps) {
           </Box>
 
           <Box className="flex items-center gap-1">
+            {!user && (
+              <Tooltip title="Go to login">
+                <IconButton href="/#" className="group">
+                  <IoLogInOutline className="text-gray-200 group-hover:text-yellow-500 transition-colors duration-300" />
+                </IconButton>
+              </Tooltip>
+            )}
             <Tooltip title="Go to calendar">
               <IconButton href="/releases/calendar" className="group">
-                <IoCalendar className="text-gray-200 group-hover:text-yellow-500 transition-colors duration-300" />
+                <IoCalendarOutline className="text-gray-200 group-hover:text-yellow-500 transition-colors duration-300" />
               </IconButton>
             </Tooltip>
 
             <Notifications notifications={notifications} />
 
             <Tooltip title="Open menu">
               <IconButton onClick={toggleMenu} className="group">
-                <IoMenu className="text-gray-200 group-hover:text-yellow-500 transition-colors duration-300" />
+                <IoMenuOutline className="text-gray-200 group-hover:text-yellow-500 transition-colors duration-300" />
               </IconButton>
             </Tooltip>
           </Box>
@@ -118,7 +140,10 @@ function Navbar(props: NavbarProps) {
         <Stack
           className="dark:text-white text-gray-800 py-6"
           spacing={0.5}>
-          <Box className="hidden md:flex items-center relative w-full mb-3">
+          {user && (
+            <Typography variant="h5">Welcome, {user.name}!</Typography>
+          )}
+          <Box className="hidden md:flex items-center relative w-full my-3">
             <input
               type="text"
               value={search}
@@ -137,21 +162,31 @@ function Navbar(props: NavbarProps) {
             className="block py-2 px-4 dark:hover:bg-zinc-800 hover:bg-gray-100 rounded-lg transition duration-200 dark:text-gray-300 text-zinc-800">
             Home
           </Link>
+          {user ? (
+            <>
+              <Link
+                href="/profile"
+                className="block py-2 px-4 dark:hover:bg-zinc-800 hover:bg-gray-100 rounded-lg transition duration-200 dark:text-gray-300 text-zinc-800">
+                Profile
+              </Link>
+              <Link
+                href="#"
+                className="block py-2 px-4 dark:hover:bg-zinc-800 hover:bg-gray-100 rounded-lg transition duration-200 dark:text-gray-300 text-zinc-800">
+                Logout
+              </Link>
+            </>
+          ) : (
+            <Link
+              href="/#"
+              className="block py-2 px-4 dark:hover:bg-zinc-800 hover:bg-gray-100 rounded-lg transition duration-200 dark:text-gray-300 text-zinc-800">
+              Login
+            </Link>
+          )}
           <Link
             href="/releases/calendar"
             className="block py-2 px-4 dark:hover:bg-zinc-800 hover:bg-gray-100 rounded-lg transition duration-200 dark:text-gray-300 text-zinc-800">
             Release Calendar
           </Link>
-          <Link
-            href="/profile"
-            className="block py-2 px-4 dark:hover:bg-zinc-800 hover:bg-gray-100 rounded-lg transition duration-200 dark:text-gray-300 text-zinc-800">
-            Profile
-          </Link>
-          <Link
-            href="#"
-            className="block py-2 px-4 dark:hover:bg-zinc-800 hover:bg-gray-100 rounded-lg transition duration-200 dark:text-gray-300 text-zinc-800">
-            Logout
-          </Link>
           <SwitchTheme />
           <SwitchSidebar />
         </Stack>

diff --git a/src/components/Header/modules/Notifications.tsx b/src/components/Header/modules/Notifications.tsx
@@ -8,7 +8,7 @@ import {
 } from '@mui/material'
 import { formatRelative } from 'date-fns'
 import { Fragment, useState } from 'react'
-import { IoClose, IoNotifications } from 'react-icons/io5'
+import { IoClose, IoNotificationsOutline } from 'react-icons/io5'
 
 import { Backdrop, Icon } from '@/components'
 import { Icons } from '@/components/Icon/Icon'
@@ -38,7 +38,7 @@ function Notifications(props: NotificationsProps) {
           className="relative bg-transparent group"
           onClick={toggleNotification}>
           <Badge badgeContent={notifications.length} color="warning">
-            <IoNotifications className="text-white group-hover:text-yellow-500 transition-colors duration-300" />
+            <IoNotificationsOutline className="text-white group-hover:text-yellow-500 transition-colors duration-300" />
           </Badge>
         </IconButton>
       </Tooltip>

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -3,6 +3,7 @@ import {
   forwardRef,
   InputHTMLAttributes,
   ReactNode,
+  Ref,
   TextareaHTMLAttributes,
   useState,
 } from 'react'
@@ -42,31 +43,33 @@ function Input(
     setPassVisible((prev) => !prev)
   }
 
-  const baseClass = `px-4 py-2 rounded-md bg-transparent dark:text-white text-black placeholder-gray-400 focus:outline-none transition-colors duration-300 ${
+  const baseClass = `px-4 py-2 rounded-md bg-transparent dark:text-white text-black placeholder-gray-400 focus:outline-none transition-colors duration-300 glowing-input ${
     isFull ? 'w-full' : 'w-auto'
-  } ${error ? 'border-red-500' : 'border-zinc-600'} ${customClass}`
+  } ${error ? 'border-red-500 animate-shake' : 'border-zinc-600'} ${customClass} ${
+    type === 'password' ? 'pr-12' : 'pr-4'
+  }`
 
   return (
     <div className={`relative ${isFull ? 'w-full' : 'inline-block'}`}>
       {label && (
-        <label className="block dark:text-white text-gray-600 font-semibold mb-1">
+        <label className="block dark:text-white text-gray-600 font-semibold mb-1 break-words">
           {label}
         </label>
       )}
 
-      <div className="flex items-center border border-zinc-600 rounded-md">
+      <div className="relative flex items-center border border-zinc-600 rounded-md">
         {area ? (
           <textarea
             rows={rows}
-            ref={ref as React.Ref<HTMLTextAreaElement>}
+            ref={ref as Ref<HTMLTextAreaElement>}
             className={`${baseClass} resize-y flex-grow`}
             {...(rest as TextareaHTMLAttributes<HTMLTextAreaElement>)}
           />
         ) : (
           <input
             ref={ref as React.Ref<HTMLInputElement>}
             type={type === 'password' && passVisible ? 'text' : type}
-            className={`${baseClass} pr-12 flex-grow`}
+            className={baseClass}
             {...rest}
           />
         )}
@@ -75,7 +78,7 @@ function Input(
           <button
             type="button"
             onClick={toggleVisibility}
-            className="flex items-center text-gray-500 dark:hover:text-white hover:text-gray-600 focus:outline-none p-2 transition-colors duration-300">
+            className="absolute inset-y-0 right-0 flex items-center text-gray-500 dark:hover:text-white hover:text-gray-600 focus:outline-none p-2 transition-colors duration-300">
             {passVisible ? (
               <IoEyeOutline size={20} />
             ) : (