Skip to content

Commit

Permalink
Merge pull request #12 from hduoc2003/feature/signup
Browse files Browse the repository at this point in the history
Feature/signup
  • Loading branch information
hduoc2003 authored Nov 7, 2023
2 parents 11429bf + ed2284a commit fb76421
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 69 deletions.
119 changes: 74 additions & 45 deletions app/(auth)/signup/page.tsx
Original file line number Diff line number Diff line change
@@ -1,82 +1,111 @@
"use client"
import Link from 'next/link'
import { emit } from 'process'
import React, { useState } from 'react'
import React, { use, useState } from 'react'
import { EyeOutlined } from '@ant-design/icons';

export default function SignUp() {

const [email, setEmail] = useState("")
const [mssv, setMssv] = useState("")
const [password, setPassword] = useState("")
const [classnameE, setClassnameE] = useState("border hover:border-sky-500 w-full h-14 rounded px-2")
const [classnameP, setClassnameP] = useState("border hover:border-sky-500 w-full h-14 rounded px-2")
const [classnameE, setClassnameE] = useState("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
const [classnameP, setClassnameP] = useState("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
const [note, setNote] = useState("")
const [type, setType] = useState("password")
const [eye, setEye] = useState("relative top-10 left-72 text-balck")
const [nlink, setNlink] = useState("")
const [check, setCheck] = useState("false")

function changeStatus() {
if(type == "password") {
setType("text");
setEye("relative top-10 left-72 text-sky-300")
}
else {
setType("password")
setEye("relative top-10 left-72 text-balck")
}
}

function handleClick() {
if(email.length == 0) {
setClassnameE("border border-red-600 hover:border-sky-500 w-full h-14 rounded px-2")
setNote("You must enter your email")
if(mssv.length == 0) {
setClassnameE("border border-red-600 hover:border-sky-500 w-full h-14 rounded-lg px-2")
setNote("Bạn phải nhập MSSV")
setCheck("false")
setNlink("")
}
else {
setClassnameE("border hover:border-sky-500 w-full h-14 rounded px-2")
setClassnameE("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
}

if(password.length == 0) {
setClassnameP("border border-red-600 hover:border-sky-500 w-full h-14 rounded px-2")
setNote("You must enter your password")
setClassnameP("border border-red-600 hover:border-sky-500 w-full h-14 rounded-lg px-2")
setNote("Bạn phải nhập mật khẩu")
setCheck("false")
setNlink("")
}
else {
setClassnameP("border hover:border-sky-500 w-full h-14 rounded px-2")
setClassnameP("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
}

if(email.length == 0 && password.length == 0) {
setNote("You must enter your email and password")
if(mssv.length == 0 && password.length == 0) {
setNote("Bạn phải nhập MSSV và mật khẩu")
setCheck("false")
setNlink("")
}
if(email.length > 0 && password.length > 0) {
if(mssv.length > 0 && password.length > 0) {
setNote("")
setCheck("true")
setNlink("/signin")
}
}

return (
<main className="bg-white py-10 font-sans">
<div className="bg-white py-10 font-sans">

<div className="mx-auto bg-white max-w-sm max-h-max border shadow-lg py-7 rounded-3xl">
<div className="mx-auto bg-white max-w-sm max-h-max border shadow-lg py-7 rounded-lg">

<div className="flex flex-col justify-center items-center">
<div className="text-blue-600 text-3xl font-bold">UETable</div> <br />
<div className="font-bold text-3xl">Register with email</div> <br />
<div className="font-bold text-3xl">Đăng ký</div> <br />
</div>

<div className="mx-auto w-4/5 flex flex-col justify-center">
<div className="mx-auto w-5/6 flex flex-col justify-center">

<div className="relative top-2 left-2 w-12">
<div className="absolute bg-white w-full px-1">
<label htmlFor="email" className="text-xs text-red-600 w-full font-medium">EMAIL*</label>
<div className="relative top-2 left-1 w-16">
<div className="absolute bg-white w-full px-2">
<label htmlFor="mssv" className="text-xs w-full text-red-600 font-medium">* </label>
<label htmlFor="mssv" className="text-xs text-gray-400 w-full font-medium">MSSV</label>
</div>
</div> <br />

<input className={classnameE} type="email" id = "email" placeholder='Enter your email address' value={email} onChange={(evt) => setEmail(evt.target.value)} /> <br />

<div className="relative top-2 left-2 w-20">
<div className="absolute bg-white w-full px-1">
<label htmlFor="password" className="text-xs text-red-600 w-full font-medium">PASSWORD*</label>
</div> <br />

<input className={classnameE} type="text" id = "mssv" placeholder='Nhập mã số sinh viên' value={mssv} onChange={(evt) => setMssv(evt.target.value)} /> <br />

<div className="relative top-2 left-1 w-20">
<div className="absolute bg-white w-full px-2">
<label htmlFor="mssv" className="text-xs w-full text-red-600 font-medium">* </label>
<label htmlFor="mssv" className="text-xs text-gray-400 w-full font-medium">Mật khẩu</label>
</div>
</div> <br />
</div>

<div>
<EyeOutlined className={eye} onClick={changeStatus} />
</div>

<input className={classnameP} type="password" id = "password" placeholder='Enter password' value={password} onChange={(evt) => setPassword(evt.target.value)} /> <br />
<input className={classnameP} type={type} maxLength={32} id = "password" placeholder='Nhập mật khẩu' value={password} onChange={(evt) => setPassword(evt.target.value)} /> <br />

<div className="relative top-2 left-2 w-20">
<div className="absolute bg-white w-full px-1">
<label htmlFor="Full Name" className="text-xs text-gray-400 w-full font-medium">FULL NAME</label>
<div className="relative top-2 left-1 w-20">
<div className="absolute bg-white w-full px-2">
<label htmlFor="Full Name" className="text-xs text-gray-400 w-full font-medium">Họ và tên</label>
</div>
</div> <br />
<input className="border hover:border-sky-500 w-full h-14 rounded px-2" type="text" id = "Full Name" placeholder='Enter your full name' /> <br />
</div> <br />
<input className="border hover:border-sky-500 w-full h-14 rounded-lg px-2" type="text" id = "Full Name" placeholder='Nhập họ và tên' /> <br />

<div className="relative top-2 left-2 w-24">
<div className="absolute bg-white w-full px-1">
<label htmlFor="student code" className="text-xs text-gray-400 w-full font-medium">STUDENT CODE</label>
<div className="relative top-2 left-1 w-12">
<div className="absolute bg-white w-full px-2">
<label htmlFor="email" className="text-xs text-gray-400 w-full font-medium"> Email</label>
</div>
</div> <br />
<input className="border hover:border-sky-500 w-full h-14 rounded px-2" type="text" id = "student code" placeholder='Enter your student code' /> <br />
</div> <br />
<input className="border hover:border-sky-500 w-full h-14 rounded-lg px-2" type="text" id = "email" placeholder='Nhập email' /> <br />

<div className="text-sm text-red-600 w-full font-medium italic">{note}</div> <br />

Expand All @@ -87,12 +116,12 @@ export default function SignUp() {
<Link href="/">Back</Link>
</button>

<button className="font-bold bg-black hover:bg-sky-300 text-white rounded-2xl w-28 h-10"
onClick={() => handleClick()}>Next</button>
<button className="font-bold bg-black hover:bg-sky-300 text-white rounded-2xl w-28 h-10"
onClick={() => handleClick()}> <Link href = {nlink}>Next</Link> </button>
</div>

</div>

</main>
</div>
)
}
2 changes: 1 addition & 1 deletion components/layouts/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,4 +149,4 @@ export default function Header() {
}
</div>
);
}
}
44 changes: 22 additions & 22 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@types/node": "20.6.2",
"@types/react": "18.2.22",
"@types/react-dom": "18.2.7",
"antd": "^5.10.1",
"antd": "^5.10.2",
"eslint": "8.49.0",
"eslint-config-next": "13.4.19",
"invert-color": "^2.0.0",
Expand Down

0 comments on commit fb76421

Please sign in to comment.