v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: sign up page

Browse source
This commit is contained in:
Dex404 2024-04-20 11:57:05 +00:00
parent 66b99099b3
commit 893f2bc48a
3 changed files with 100 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/auth/SignIn/page.tsx
View file

@ -5,6 +5,7 @@ import { useForm } from "react-hook-form"
import * as z from "zod" import * as z from "zod"
import { loginSchema } from "zodSchema/login" import { loginSchema } from "zodSchema/login"
import Image from "next/image" import Image from "next/image"
import { AiFillApple, AiFillGoogleCircle } from "react-icons/ai"
export default function SignIn() { export default function SignIn() {
return ( return (
@ -57,7 +58,7 @@ export default function SignIn() {
<div className="mt-4 flex items-center justify-center text-center"> <div className="mt-4 flex items-center justify-center text-center">
<p className="text-slate-500"> Don't have an account?&nbsp; </p> <p className="text-slate-500"> Don't have an account?&nbsp; </p>
<a className="text-[#F5887A]" href="#"> <a className="text-[#F5887A]" href="/auth/SignUp">
Sign Up Sign Up
</a> </a>
</div> </div>
@ -67,12 +68,14 @@ export default function SignIn() {
<div className="h-[1px] w-[40%] bg-slate-500"></div> <div className="h-[1px] w-[40%] bg-slate-500"></div>
</div> </div>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex w-[80%] items-center justify-around max-md:flex-wrap">
<button className=" border-conic-gradient relative inline-flex h-9 w-full items-center justify-between rounded-full border-[1px] border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all"> <button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px] border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
<AiFillGoogleCircle className="text-lg" />
Sign In With Google Sign In With Google
</button> </button>
<button className="border-conic-gradient h-9 w-full items-center justify-between rounded-full border-[1px] border-gray-400 bg-gradient-to-br from-gray-900 to-gray-800"> <button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px] border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
Sign In With Facebook <AiFillApple className="text-lg" />
Sign In With Icloud
</button> </button>
</div> </div>
</div> </div>

119
app/auth/SignUp/page.tsx
View file

@ -1,32 +1,95 @@
import React, { useState } from "react" "use client"
import { zodResolver } from "@hookform/resolvers/zod"
const SignUpPage: React.FC = () => { import { useRouter } from "next/router"
const [email, setEmail] = useState("") import { useForm } from "react-hook-form"
const [password, setPassword] = useState("") import * as z from "zod"
import { loginSchema } from "zodSchema/login"
const handleSignUp = () => { import Image from "next/image"
// Implement your sign-up logic here import { AiFillApple, AiFillGoogleCircle } from "react-icons/ai"
console.log("Sign up button clicked")
console.log("Email:", email)
console.log("Password:", password)
}
export default function SignIn() {
return ( return (
<div> <section className="relative h-[100vh]">
<h1>Sign Up</h1> <div className=" rigth-[50%] absolute -z-10 align-middle opacity-[0.7] blur-[40px] max-md:right-[10%]">
<form> <Image
<label>Email:</label> src="/images/auth-illustration.svg"
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> alt="hero"
<br /> width="1440"
<label>Password:</label> height="450"
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> className="block h-auto max-w-none"
<br /> />
<button type="button" onClick={handleSignUp}> </div>
Sign Up <div className="relative ml-auto mr-auto flex max-w-6xl justify-center pl-6 pr-6">
</button> <div className="pb-20 pt-40 ">
</form> <div className="flex flex-col items-center justify-center">
</div> <Image src="/images/logoicon.png" alt="logo" width="100" height="100" />
<div className="mb-4 max-w-2xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
<h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text p-5 text-center text-transparent">
Sign In To Your Account
</h2>
</div>
<div className="w-[80%]">
<form className="w-full max-w-lg">
<label className="mb-2 block text-sm font-bold text-white" htmlFor="email">
Email
</label>
<input
className=" w-full appearance-none rounded bg-[#1e293b] px-3 py-2 leading-tight text-white focus:outline-[#F5887A]"
id="email"
type="text"
placeholder="youremail@website.com"
/>
<label className="mb-2 mt-4 block text-sm font-bold text-white" htmlFor="password">
Password
</label>
<input
className=" w-full appearance-none rounded bg-[#1e293b] px-3 py-2 leading-tight text-gray-700 shadow focus:outline-[#F5887A]"
id="password"
type="password"
placeholder="Password"
/>
<label className="mb-2 mt-4 block text-sm font-bold text-white" htmlFor="password">
Confirm Password
</label>
<input
className=" w-full appearance-none rounded bg-[#1e293b] px-3 py-2 leading-tight text-gray-700 shadow focus:outline-[#F5887A]"
id="ConfirmPassword"
type="password"
placeholder="ConfirmPassword"
/>
<button
className="focus:shadow-outline focus:shadow-outline hover:shadow-outline mt-4 w-full rounded-full bg-[#F5887A] px-4 py-2 font-bold text-white transition-all hover:bg-[#F0B37D] focus:outline-none"
type="button"
>
Sign Up
</button>
</form>
<div className="mt-4 flex items-center justify-center text-center">
<p className="text-slate-500"> Already an account?&nbsp; </p>
<a className="text-[#F5887A]" href="/auth/SignIn">
Sign In
</a>
</div>
<div className="my-[10px] flex items-center justify-between">
<div className="h-[1px] w-[40%] bg-slate-500"></div>
<p className="text-slate-500">OR</p>
<div className="h-[1px] w-[40%] bg-slate-500"></div>
</div>
</div>
<div className="flex w-[80%] items-center justify-around max-md:flex-wrap">
<button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px] border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
<AiFillGoogleCircle className="text-lg" />
Sign Up With Google
</button>
<button className=" border-conic-gradient relative m-2 inline-flex h-9 w-full items-center justify-around rounded-full border-[1px] border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
<AiFillApple className="text-lg" />
Sign Up With Icloud
</button>
</div>
</div>
</div>
</div>
</section>
) )
} }
export default SignUpPage

2
components/Navbar/Navbar.tsx
View file

@ -107,7 +107,7 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
</li> </li>
<li className="hidden lg:block"> <li className="hidden lg:block">
<Button <Button
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise" href="/auth/SignUp"
intent="navSignUp" intent="navSignUp"
size="hero2" size="hero2"
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}