Development/style/login

packages/frontend/app/admin/login/layout.tsx

@@ -0,0 +1,17 @@
+export default function loginLayout({
+    children,
+  }: {
+    children: React.ReactNode
+  }) {
+    return (
+        <div className="flex items-center justify-center min-h-[1024px] bg-gray-200 bg-cover bg-center" 
+          style={{ 
+            backgroundImage: `url('/images/landing-page.png')`,
+            backgroundRepeat: 'no-repeat', 
+            backgroundSize: "cover", 
+            width: "100vw", 
+            height: "100vh" }}>
+              {children}
+        </div>
+    )
+  }

packages/frontend/app/admin/login/page.tsx

@@ -1,75 +1,9 @@
-"use client"
-
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
-
-type UserCredentials = {
-  email: string
-  password: string
-}
-
-// TODO replace react-form, zod
-function isValidUser({ email, password }: UserCredentials): boolean {
-  const validUsersString = process.env.NEXT_PUBLIC_VALID_USERS
-
-  if (!validUsersString) {
-    console.error('Environment variable NEXT_PUBLIC_VALID_USERS is not defined')
-    return false
-  }
-
-  const validUsers = validUsersString.split(',')
-
-
-  return validUsers.some((user) => {
-    const [validEmail, validPassword] = user.split(':')
-    return validEmail === email && validPassword === password
-  })
-}
-
-const Login = () => {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState('')
-  const router = useRouter()
-
-  const handleLogin = (e: React.FormEvent) => {
-    e.preventDefault()
-
-    const credentials: UserCredentials = { email, password }
-
-    if (isValidUser(credentials)) {
-      localStorage.setItem('isLoggedIn', 'true')
-      router.push('/admin/dashboard')
-    } else {
-      setError('Invalid email or password')
-    }
-  }
+import Login from "@/src/components/Login";
 
+export default function Home() {
   return (
-    <div>
-      <h1>Admin Login</h1>
-      <form onSubmit={handleLogin}>
-        <div>
-          <input
-            type="email"
-            placeholder="Enter your email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-          />
-        </div>
-        <div>
-          <input
-            type="password"
-            placeholder="Enter your password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </div>
-        <button type="submit">Login</button>
-      </form>
-      {error && <p style={{ color: 'red' }}>{error}</p>}
+    <div className="bg-white flex justify-content max-w-[482px] w-full h-[475px]">
+      <Login />
     </div>
-  )
+  );
 }
-
-export default Login

packages/frontend/components/Login.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+type UserCredentials = {
+  email: string
+  password: string
+}
+
+// TODO replace react-form, zod
+function isValidUser({ email, password }: UserCredentials): boolean {
+  const validUsersString = process.env.NEXT_PUBLIC_VALID_USERS
+
+  if (!validUsersString) {
+    console.error('Environment variable NEXT_PUBLIC_VALID_USERS is not defined')
+    return false
+  }
+
+  const validUsers = validUsersString.split(',')
+
+
+  return validUsers.some((user) => {
+    const [validEmail, validPassword] = user.split(':')
+    return validEmail === email && validPassword === password
+  })
+}
+
+const Login = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const router = useRouter()
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    const credentials: UserCredentials = { email, password }
+
+    if (isValidUser(credentials)) {
+      localStorage.setItem('isLoggedIn', 'true')
+      router.push('/admin/dashboard')
+    } else {
+      setError('Invalid email or password')
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-center flex-col w-full">
+      <form className="w-full space-y-5" onSubmit={handleLogin}>
+        <div className="space-y-5">
+            <div className='flex justify-center'>
+                <img src="/images/logo.png" style={{width: "121.91px", height: "74px"} } alt="logo" />
+            </div>
+            <div className="relative">
+                <label htmlFor="password" className="text-base text-letter-grey font-inter">Email Address</label>
+                <input
+                    className="mt px-2 py-1 w-full h-[30px] border rounded text-sm"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                />
+            </div>
+            <div className='relative'>
+                <label htmlFor="password" className="text-base text-letter-grey font-inter">Password</label>
+                <input
+                    className="mt px-2 py-1 w-full h-[30px] border rounded text-sm"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                />
+            </div>
+            <button className="bg-font-montserrat text-black-text font-semibold border border-yellow-cta rounded-[5px] w-[240px] h-[33px] bg-yellow-cta" type="submit">Login</button>
+
+        </div>
+
+      </form>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+    </div>
+  )
+}
+
+export default Login

packages/frontend/src/components/Login.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+type UserCredentials = {
+  email: string
+  password: string
+}
+
+// TODO replace react-form, zod
+function isValidUser({ email, password }: UserCredentials): boolean {
+  const validUsersString = process.env.NEXT_PUBLIC_VALID_USERS
+
+  if (!validUsersString) {
+    console.error('Environment variable NEXT_PUBLIC_VALID_USERS is not defined')
+    return false
+  }
+
+  const validUsers = validUsersString.split(',')
+
+
+  return validUsers.some((user) => {
+    const [validEmail, validPassword] = user.split(':')
+    return validEmail === email && validPassword === password
+  })
+}
+
+const Login = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const router = useRouter()
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    const credentials: UserCredentials = { email, password }
+
+    if (isValidUser(credentials)) {
+      localStorage.setItem('isLoggedIn', 'true')
+      router.push('/admin/dashboard')
+    } else {
+      setError('Invalid email or password')
+    }
+  }
+
+  return (
+    <div className="flex flex-col max-w-[228px] mx-auto">
+      <form className="w-full space-y-5" onSubmit={handleLogin}>
+        <div className="flex flex-col items-center">
+            <div className='mt-[3rem] mb-[3rem] flex justify-center'>
+                <img src="/images/logo.png" style={{width: "121.91px", height: "74px"} } alt="logo" />
+            </div>
+            <div className="relative">
+                <label htmlFor="password" className="text-base text-letter-grey font-inter">Email Address</label>
+                <input
+                    className="mt px-2 py-1 w-full h-[30px] border rounded text-sm"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                />
+            </div>
+            <div className='mt-[1rem] relative'>
+                <label htmlFor="password" className="text-base text-letter-grey font-inter">Password</label>
+                <input
+                    className="mt px-2 py-1 w-full h-[30px] border rounded text-sm"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                />
+            </div>
+            <button className="bg-font-montserrat text-black-text font-semibold border border-yellow-cta rounded-[5px] mt-[3rem] px-[97px] py-[7px] my-5 bg-yellow-cta" type="submit">Login</button>
+
+        </div>
+
+      </form>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+    </div>
+  )
+}
+
+export default Login

packages/frontend/tailwind.config.ts

@@ -4,7 +4,7 @@ export default {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -14,7 +14,9 @@ export default {
         "letter-grey": "#8D8D8B",
         "stroke-line": "#8B8484",
         "yellow-cta": "#F6C114",
-        "black-text": "1E1E1E"
+        "black-text": '1E1E1E',
+        'nav-bg': '#1E1E1E',
+        'nav-bg-hover': '#8D8D8B'
       },
       fontFamily: {
         "bebas-neue": ['Bebas Neue', 'sans-serif'],