Merge pull request #99 from picksitquick/new-login

Added components for new login page layout

src/app/(auth)/components/LoginBgImage.tsx

@@ -0,0 +1,13 @@
+
+export default function LoginBgImage() {
+    return (
+      <div
+        className="hidden bg-cover lg:block lg:w-3/5 h-screen"
+        style={{
+          backgroundImage: `url("https://cdn.leonardo.ai/users/58b4ebe8-31b7-423d-8587-b03acce30173/generations/5d8ef9a3-f1fa-4373-832b-76038240b7b8/DreamShaper_v7_a_heros_journey_1.jpg")`,
+          backgroundRepeat: 'no-repeat',
+        }}
+      >
+      </div>
+    );
+  }

src/app/(auth)/components/LoginLogo.tsx

@@ -0,0 +1,14 @@
+import Image from 'next/image';
+
+export default function LoginLogo({ signIn }: { signIn: boolean }) {
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <Image src="/GD_Title.svg" alt="Gamedoora" width={320} height={128} />
+      <p className="mt-10 text-2xl" style={{color: '#7D7A77'}}>
+        {signIn
+          ? 'Login'
+          : 'Sign Up'}
+      </p>
+    </div>
+  );
+}

src/app/(auth)/components/SocialButton.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@mui/material';
+import Image from 'next/image';
+import React from 'react';
+
+interface SocialButtonProps {
+  color: string;
+  iconPath: string;
+  socialName: string;
+  onClick: () => void;
+}
+
+export default function SocialButton({ color, iconPath, socialName, onClick }: SocialButtonProps) {
+  return (
+    <Button
+      variant="contained"
+      style={{ borderRadius: '24px', backgroundColor: color,}}
+      className='font-medium font-roboto h-12 w-36'
+      onClick={onClick}
+    >
+      <Image 
+        src={`/${iconPath}`} // Assuming icons are in the 'public/icons' folder
+        alt="social"
+        height={20}
+        width={20}
+        className='mr-2'
+      />
+      {socialName}
+    </Button>
+  );
+}

src/app/(auth)/components/TextBox.tsx

@@ -0,0 +1,21 @@
+import { ChangeEvent } from "react";
+
+interface TextBoxProps{
+    height: number;
+    id: string;
+    placeholder: string;
+    label: string;
+    type: string;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function TextBox({id, height,placeholder, label, type, onChange}:TextBoxProps){
+    return(
+        <div className={`relative w-full`}>
+            <input onChange={onChange} type={type} id={id} 
+                className={`block px-2.5 pb-2.5 pt-4 w-full h-${height} text-md text-black rounded-md border border-gray-400 appearance-none focus:outline-none focus:ring-0 focus:border-orange-500 focus:border-2 peer hover:border-black focus:placeholder-gray-400 placeholder-transparent`} placeholder={placeholder} />
+            <label htmlFor={id} 
+                className="absolute text-md text-gray-500  duration-150 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-orange-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-3 peer-focus:font-semibold">{label}</label>
+        </div>
+    );
+}

src/app/(auth)/sign-in/page.tsx

@@ -1,97 +1,137 @@
 'use client';
-import Link from 'next/link';
-import Hero from '../components/Hero';
-import Brand from '../components/Brand';
-import { signIn, useSession } from 'next-auth/react';
-import { redirect } from 'next/navigation';
+import Link from "next/link";
+import { signIn, useSession } from "next-auth/react";
+import { redirect } from "next/navigation";
+import { Button} from "@mui/material";
+import { useState } from "react";
+import LoginBgImage from "../components/LoginBgImage";
+import LoginLogo from "../components/LoginLogo";
+import TextBox from "../components/TextBox";
+import SocialButton from "../components/SocialButton";
 
-export default function SignIn() {
-  const { data: session } = useSession();
-  if (session) {
-    redirect(`/`);
-  }
-  return (
-    <div className="bg-white dark:bg-gray-900">
-      <div className="flex justify-center h-screen">
-        <Hero />
+export default function SignInTest() {
+    const { data: session } = useSession();
 
-        <div className="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
-          <div className="flex-1">
-            <Brand signIn={true} />
+    if (session) {
+        redirect(`/`);
+    }
 
-            <div className="mt-8">
-              <form>
-                <div>
-                  <label
-                    htmlFor="email"
-                    className="block mb-2 text-sm text-gray-600 dark:text-gray-200"
-                  >
-                    Email Address
-                  </label>
-                  <input
-                    type="email"
-                    name="email"
-                    id="email"
-                    placeholder="[email protected]"
-                    className="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
-                  />
-                </div>
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
 
-                <div className="mt-6">
-                  <div className="flex justify-between mb-2">
-                    <label
-                      htmlFor="password"
-                      className="text-sm text-gray-600 dark:text-gray-200"
-                    >
-                      Password
-                    </label>
-                    <a
-                      href="#"
-                      className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline"
-                    >
-                      Forgot password?
-                    </a>
-                  </div>
+    const handleUsername = (event: any) => {
+        setUsername(event.target.value);
+    };
 
-                  <input
-                    type="password"
-                    name="password"
-                    id="password"
-                    placeholder="Your Password"
-                    className="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
-                  />
-                </div>
+    const handlePassword = (event: any) => {
+        setPassword(event.target.value);
+    };
 
-                <div className="mt-6">
-                  <button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
-                    Sign In
-                  </button>
-                </div>
-              </form>
+    const handleLogin = async () => {
+
+    }
 
-              <div className="mt-6">
-                <button
-                  onClick={() => signIn()}
-                  className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50"
-                >
-                  Sign In using providers
-                </button>
-              </div>
+    const socialLoginClick = () => {
 
-              <p className="mt-6 text-sm text-center text-gray-400">
-                Don&#x27;t have an account yet?{' '}
-                <Link
-                  href={'/sign-up'}
-                  className="text-blue-500 focus:outline-none focus:underline hover:underline"
-                >
-                  Sign up
-                </Link>
-                .
-              </p>
+    };
+
+
+    return (
+        <div className="bg-white">
+            <div className="flex justify-center h-screen">
+                <LoginBgImage />
+                <div id="triangle" className="my-auto">
+                    <div className="w-20 h-20 bg-white transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-bl-lg	 absolute"></div>
+                </div>
+                <div className="w-full rounded-xl flex flex-col items-center  max-w-lg mx-auto"> 
+                    <div className='flex-col my-auto'>
+                        <LoginLogo signIn={true} />
+                        <div className="flex-col">
+                            <form>
+                                <div className="flex-grow mt-4">
+                                    <TextBox onChange={handleUsername} height={12} placeholder="[email protected]" label="Username *" id="username" type="text" />
+                                </div>
+                                <div className="flex-grow mt-4">
+                                    <TextBox onChange={handlePassword} height={12} placeholder="********" label="Password *" id="password" type="password" />
+                                </div>
+                                <Button
+                                    variant="contained"
+                                    onClick={handleLogin}
+                                    className="flex-auto font-medium bg-orange-100 w-full h-12 mt-4"
+                                    sx={{
+                                        color: '#FF7600',
+                                        backgroundColor: '#FFE4CC',
+                                        '&:hover': {
+                                            backgroundColor: '#FFE4CC'
+                                        },
+                                    }}
+                                >
+                                    Login
+                                </Button>
+                                <div id="reset-account" className="flex mt-6 flex-col items-center">
+                                    <div className="w-full h-2 flex-auto justify-center items-center">
+                                        <p className="font-roboto font-medium text-center text-xsm" style={{ color: '#26221F' }}>
+                                            Having trouble logging in?&nbsp;
+                                            <Link href={'/sign-test'} className="font-medium text-xsm" style={{ color: '#FFA04D' }}>
+                                                Forgot username or password
+                                            </Link>
+                                        </p>
+                                    </div>
+                                </div>
+                                <div id="divider" className="flex justify-center w-full h-2 mt-4">
+                                    <div className="flex-auto w-1/2 mt-3 border-t border-gray-400 "></div>
+                                    <div className=" mx-1 w-4 h-4">or</div>
+                                    <div className="flex-auto w-1/2 mt-3 border-t border-gray-400"></div>
+                                </div>
+                                <div id="socials" className="flex flex-col mt-6 items-center">
+                                    <div className="grid grid-cols-2 grid-rows-2 gap-3">
+                                        <SocialButton color="#D62D20" iconPath="google.svg" socialName="Google" onClick={socialLoginClick} />
+                                        <SocialButton color="#24292E" iconPath="git.svg" socialName="GitHub" onClick={() => signIn()} />
+                                        <SocialButton color="#000000" iconPath="x.svg" socialName="X" onClick={socialLoginClick} />
+                                        <SocialButton color="#3B5998" iconPath="meta.svg" socialName="Facebook" onClick={socialLoginClick} />
+                                    </div>
+                                </div>
+                            </form>
+                            <div id="create-account" className="mt-5 w-full h-5">
+                                <Link href={'/'} className="font-semibold text-sm" style={{ color: '#FFA04D' }}>
+                                    Create an account
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="login-footer" className="flex flex-row mb-2 mt-auto w-full justify-around">
+                        <div className="w-20 h-10">English</div>
+                        <div className="flex flex-row gap">
+                            <div className="h-10 flex flex-row gap-x-8">
+                                <div className="w-12 h-10">
+                                    <Link
+                                        href={'/sign-in'}
+                                        className="w-8 h-5 font-medium font-roboto"
+                                        style={{ color: '#26221F' }}>
+                                        Help
+                                    </Link>
+                                </div>
+                                <div className="w-20 h-10">
+                                    <Link
+                                        href={'/sign-in'}
+                                        className="w-12 h-5 font-medium font-roboto"
+                                        style={{ color: '#26221F' }}>
+                                        Privacy
+                                    </Link>
+                                </div>
+                                <div className="w-16 h-10">
+                                    <Link
+                                        href={'/sign-in'}
+                                        className="w-10 h-5 font-medium font-roboto"
+                                        style={{ color: '#26221F' }}>
+                                        Terms
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  );
-}
+    );
+}