Skip to content

Commit

Permalink
LoginPage update
Browse files Browse the repository at this point in the history
  • Loading branch information
@KanishkChhajed
KanishkChhajed committed Aug 10, 2024
1 parent 6d2fc5c commit 5aeda2e
Show file tree
Hide file tree
Showing 6 changed files with 313 additions and 112 deletions.
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function RootLayout({
return (
<ClerkProvider>
<html lang="en" suppressContentEditableWarning={true}>
<body className={cn(inter.className, "bg-white dark:bg-[#313338]")}>
<body className={cn(inter.className, "bg-[url('/background.svg')] h-[100vh] w-[98vw] relative bg-no-repeat bg-cover")}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
Expand Down
264 changes: 186 additions & 78 deletions components/home-layouts/LoginPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,188 @@
"use client";
export const LoginPage = () => {
return (
<section className="bg-gray-50 dark:bg-gray-900">
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div className="space-y-2 sm:p-6">
<h1 className="text-xl font-bold text-gray-900 md:text-2xl dark:text-white text-center">
Welcome Back!
</h1>
<h2 className="text-sm text-center dark:text-gray-500">
We are so excited to see you again.
</h2>
<form className="space-y-2" action="#">
<div>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Email or Phone Number <span className="text-red-700">*</span>
</label>
<input
type="email"
name="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-sm focus:ring-primary-600 focus:border-primary-600 block w-full p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
/>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Password<span className="text-red-700">*</span>
</label>
<input
type="password"
name="password"
id="password"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-sm focus:ring-primary-600 focus:border-primary-600 block w-full p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
/>
</div>
<div className="flex items-center justify-between">
<a
href="#"
className="text-sm font-extralight text-primary-600 hover:underline text-blue-400"
>
Forgot your password?
</a>
</div>
<button
type="submit"
className="w-full text-white bg-indigo-700 rounded-sm px-1 py-1"
>
Sign in
</button>
<button
id="googleLink"
className="w-full text-black bg-white rounded-sm px-1 py-1"
>
Sign In with Google
</button>
<p className="text-xs font-light text-gray-500 dark:text-gray-400">
Need an Account?{" "}
<a
href="#"
className="text-sm font-extralight text-primary-600 hover:underline text-blue-400"
>
Register
</a>
</p>
</form>
</div>
"use client"

import React, { useState } from 'react';
import * as Form from '@radix-ui/react-form';
import { Grid,Box,Card,Flex,Avatar,Text } from '@radix-ui/themes';
import QRcode from './QRcode';



export default function LoginPage(){
// State for being in Dark mode
const [isDark, setIsDark] = useState(true);

const handleChange = ()=>{
setIsDark(!isDark);
}

return(
<>
<div className='bg-[url("/background.svg")] h-[100vh] w-[98vw] relative bg-no-repeat bg-cover'>
{/* NavBar */}
<nav className='w-[98vw] h-[55px] flex justify-between items-center p-4'>
<div className="image relative top-4 left-3">
<img className='invert-1' src="logo.svg" alt="logo" />
</div>
<button onClick={handleChange}>

{/* Moon Icon and Sun Icon Toggle */}
{isDark ?(<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z" fill="white" fillRule="evenodd" clipRule="evenodd"></path></svg>):(<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="white" fillRule="evenodd" clipRule="evenodd"></path></svg>)}
</button>
</nav>

{/* Form Component */}
{isDark ? (<div className='h-[400px] w-[800px] mx-auto bg-[#313338] relative top-32 p-4 border rounded-md flex flex-col gap-3 cursor-default' >
<div className='flex flex-col gap-2 items-center justify-center'>
<h1 className='text-2xl text-[#f2f3f5]'><b>Welcome back!</b></h1>
<h3 className='text-base font-thin text-[#b3b8bf]'>We're so excited to see you again!</h3>
</div>
<Form.Root className="max-h-[225px] w-[380px] relative p-5">
<Form.Field className="grid mb-[10px]" name="email">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[13px] font-medium leading-[35px] text-[#afb4bb]">EMAIL<span className="text-red-700">*</span></Form.Label>
<Form.Message className="text-[13px] text-white opacity-[0.8]" match="valueMissing">
Please enter your email
</Form.Message>
<Form.Message className="text-[13px] text-white opacity-[0.8]" match="typeMismatch">
Please provide a valid email
</Form.Message>
</div>
</section>
);
};
<Form.Control asChild>
<input
className="box-border w-full bg-[#1e1f22] shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
type="email"
required
/>
</Form.Control>
</Form.Field>


<Form.Field className="grid mb-[10px]" name="email">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[13px] font-medium leading-[35px] text-[#afb4bb]">PASSWORD<span className="text-red-700">*</span></Form.Label>
<Form.Message className="text-[13px] text-white opacity-[0.8]" match="valueMissing">
Please enter your password
</Form.Message>
<Form.Message className="text-[13px] text-white opacity-[0.8]" match="typeMismatch">
Please provide a valid password
</Form.Message>
</div>
<Form.Control asChild>
<input
className="box-border w-full bg-[#1e1f22] shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
type="password"
required
/>
</Form.Control>
</Form.Field>
<button className='flex items-baseline justify-between text-[13px] text-[#069be6] hover:underline opacity-[0.8] cursor-pointer'><div className="forget">Forget your password?</div></button>

<Form.Submit asChild>
<button className="bg-[#5865f2] box-border w-full text-[#fafaff] shadow-blackA4 hover:bg-[#4752c4] inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none mt-[10px]">
Log In
</button>
</Form.Submit>
<div className="flex items-baseline justify-start relative gap-1">
<span className=' text-[13px] text-[#9097a0] cursor-default'>Need an account?</span>
<button className='text-[13px] text-[#069be6] hover:underline opacity-[0.8] cursor-pointer'>
<div className="register">
Register
</div>
</button>
</div>
</Form.Root>

{/* QR Code Side Component */}
<div className="qr absolute top-20 right-3 flex flex-col justify-center items-center gap-6">
<QRcode/>
<div className='flex flex-col justify-center items-center p-3'>
<h1 className='text-2xl text-[#f2f3f5]'><b>Log in with QR Code</b></h1>
<span className='text-base text-[#b3b8bf]'>Scan this with the <b>Discord mobile</b></span> <span className='text-base text-[#b3b8bf]'><b>app</b> to log in instantly.</span>
<button className='text-[13px] text-[#069be6] hover:underline opacity-[0.8] cursor-pointer'>
<div>Or, sign in with passkey</div>
</button>
</div>

</div>
</div>):(<div className='h-[400px] w-[800px] mx-auto bg-white relative top-32 p-4 border rounded-md flex flex-col gap-3 cursor-default' >
<div className='flex flex-col gap-2 items-center justify-center'>
<h1 className='text-2xl text-black'><b>Welcome back!</b></h1>
<h3 className='text-base font-thin text-gray-700'>We're so excited to see you again!</h3>
</div>
<Form.Root className="max-h-[225px] w-[380px] relative p-5">
<Form.Field className="grid mb-[10px]" name="email">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[13px] font-medium leading-[35px] text-black">EMAIL<span className="text-red-700">*</span></Form.Label>
<Form.Message className="text-[13px] text-gray-700 opacity-[0.8]" match="valueMissing">
Please enter your email
</Form.Message>
<Form.Message className="text-[13px] text-gray-700 opacity-[0.8]" match="typeMismatch">
Please provide a valid email
</Form.Message>
</div>
<Form.Control asChild>
<input
className="box-border w-full bg-white border-gray-800 shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-black shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
type="email"
required
/>
</Form.Control>
</Form.Field>


<Form.Field className="grid mb-[10px]" name="email">
<div className="flex items-baseline justify-between">
<Form.Label className="text-[13px] font-medium leading-[35px] text-black">PASSWORD<span className="text-red-700">*</span></Form.Label>
<Form.Message className="text-[13px] text-gray-700 opacity-[0.8]" match="valueMissing">
Please enter your password
</Form.Message>
<Form.Message className="text-[13px] text-gray-700 opacity-[0.8]" match="typeMismatch">
Please provide a valid password
</Form.Message>
</div>
<Form.Control asChild>
<input
className="box-border w-full bg-white border-gray-800 shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-black shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
type="password"
required
/>
</Form.Control>
</Form.Field>
<button className='flex items-baseline justify-between text-[13px] text-[#069be6] hover:underline opacity-[0.8] cursor-pointer'><div className="forget">Forget your password?</div></button>

<Form.Submit asChild>
<button className="bg-[#5865f2] box-border w-full text-[#fafaff] shadow-blackA4 hover:bg-[#4752c4] inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none mt-[10px]">
Log In
</button>
</Form.Submit>
<div className="flex items-baseline justify-start relative gap-1">
<span className=' text-[13px] text-gray-700 cursor-default'>Need an account?</span>
<button className='text-[13px] text-[#069be6] hover:underline opacity-[0.8] cursor-pointer'>
<div className="register">
Register
</div>
</button>
</div>
</Form.Root>

{/* QR Code Side Component */}
<div className="qr absolute top-20 right-3 flex flex-col justify-center items-center gap-6">
<QRcode/>
<div className='flex flex-col justify-center items-center p-3'>
<h1 className='text-2xl text-black'><b>Log in with QR Code</b></h1>
<span className='text-base text-gray-700'>Scan this with the <b>Discord mobile</b></span> <span className='text-base text-gray-700'><b>app</b> to log in instantly.</span>
<button className='text-[13px] text-[#069be6] hover:underline opacity-[0.8] cursor-pointer'>
<div>Or, sign in with passkey</div>
</button>
</div>

</div>
</div>)
}

</div>
</>
);
}

// export default FormDemo;
29 changes: 29 additions & 0 deletions components/home-layouts/QRcode.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import { useQRCode } from 'next-qrcode';

const QRcode = () => {
const { Image } = useQRCode();
return (
<>
<div className="rounded-lg">
<Image
text={'https://discord.com/login?redirect_to=%2Flogin%3Fredirect_to%3D%252Fchannels%252F%2540me'}
options={{
type: 'image/jpeg',
quality: 0.3,
errorCorrectionLevel: 'M',
margin: 3,
scale:4,
width: 150,
color: {
dark: '#000000',
light: '#ffffff',
},
}}
/>
</div>
</>
)
}

export default QRcode
Loading

0 comments on commit 5aeda2e

Please sign in to comment.