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

Login: Invalid Username / Password Prompts User #22

Merged
LAX18 merged 4 commits from npease-login-feedback into main 2024-02-22 09:06:31 -10:00
Conversation 3 Commits 4 Files Changed 3
+33 -26
3 changed files with 33 additions and 26 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/register/page.js
+3 -3
View File
@@ -21,12 +21,12 @@ function Register() {
<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>
<div>
<h3 className="text-[24px] mt-[25px]">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/>