npease/ChatMaps
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Validation on Register / Remove Download Button From Homepage #23

Merged
LAX18 merged 6 commits from npease-register-validation into main 2024-02-22 09:08:14 -10:00
Conversation 3 Commits 6 Files Changed 4
+45 -46
4 changed files with 45 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-next/src/app/globals.css
+6
View File
@@ -29,3 +29,9 @@ input {
margin: 5px;
}
input.err {
border: 2px solid red;
border-radius: 4px;
padding: 10px 10px;
margin: 5px;
}
frontend-next/src/app/login/page.js
+24 -23
View File
@@ -1,39 +1,40 @@
"use client";
import { useForm } from "react-hook-form";
import { useForm, Form } from "react-hook-form";
import { useRouter } from "next/navigation";
import "../globals.css"
function Login() {
var router = useRouter();
var { register, handleSubmit } = useForm();
async function Login(data) {
const res = await fetch("/api/login", {
method: "POST",
body: JSON.stringify(data ? data : {}),
});
if (res.ok) {
router.push("/app");
}
}
//var { register, handleSubmit } = useForm();
var { register, control, setError, formState: { errors } } = useForm()
return (
<div>
<div className="grid h-screen place-items-center">
<div>
<img src="logos/logo_transparent_inverse.png"/>
<a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
<span className="text-[36px]">
Chat with friends!
</span>
<div className="m-5">
<h3 className="text-[24px] mt-[50px]">Login</h3>
<form action="#" onSubmit={handleSubmit(Login)}>
<input type="email" {...register("email")} placeholder="Enter Email Address"/><br/>
<input type="password" {...register("password")} placeholder="Enter Password"/><br/>
<button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
Login</button><br/>
Don&apos;t have an account? <a href="/register">Sign Up</a>
</form>
<div>
<h3 className="text-[24px] mt-[25px] mb-2">Login</h3>
{(errors.email && errors.password) && <div className="text-[red] mb-2 text-[18px] text-bold">Invalid Email or Password.</div>}
<Form action="/api/login" encType={'application/json'}
onSuccess={() => {
router.push("/app");
}}
onError={() => {
const formError = { type: "server", message: "Username or Password Incorrect" }
// set same error in both:
setError('password', formError)
setError('email', formError)
}}
control={control}
>
<input type="email" id="email" className={(errors.email && errors.password) && "err"} {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
<input type="password" id="password" name="password" className={(errors.email && errors.password) && "err"} {...register("password", { required: true })} placeholder="Enter Password"/><br/>
<button className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Log In</button>
<br/>Need an account? <a href="/register">Sign Up</a><br/>
</Form>
</div>
</div>
</div>
frontend-next/src/app/page.js
-3
View File
@@ -2,9 +2,6 @@ function Home() {
return (
<div>
<div className="absolute right-[6%] top-[4%]">
<button>Download</button>
</div>
<div className="grid h-screen place-items-center">
<div>
<img src="logos/logo_transparent_inverse.png"/>
frontend-next/src/app/register/page.js
+15 -20
View File
@@ -1,39 +1,34 @@
"use client";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { useForm, Form } from "react-hook-form";
import "../globals.css"
function Register() {
var {register, handleSubmit } = useForm()
var { register, control, setError, formState: { errors } } = useForm()
var router = useRouter();
async function RegisterWithEmail(data) {
const res = await fetch("/api/register", {
method: "POST",
body: JSON.stringify(data ? data : {}),
});
if (res.ok) {
router.push("/login");
}
}
var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/
return (
<div>
<div className="grid h-screen place-items-center">
<div>
<img src="logos/logo_transparent_inverse.png"/>
<a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
<span className="text-[36px]">
Chat with friends!
</span>
<div className="m-5">
<h3 className="text-[24px] mt-[50px]">Register</h3>
<form action="#" onSubmit={handleSubmit(RegisterWithEmail)}>
<input type="email" {...register("email")} placeholder="Enter Email Address"/><br/>
<input type="password" {...register("password")} placeholder="Enter Password"/><br/>
<div>
<h3 className="text-[24px] mt-[15px]">Register</h3>
<Form action="/api/register" encType={'application/json'}
onSuccess={() => {
router.push("/app");
}}
control={control}
>
<input type="email" {...register("email", {required: true, pattern: emailRegex})} className={errors.email && "err"} placeholder="Enter Email Address"/><br/>
<input type="password" {...register("password", {required: true})} className={errors.password && errors.password.type == 'required' && "err"} placeholder="Enter Password"/><br/>
<button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
Register</button><br/>
Have an account? <a href="/login">Log In</a>
</form>
</Form>
</div>
</div>
</div>