Skip to content

Commit

Permalink
validate registration
Browse files Browse the repository at this point in the history
  • Loading branch information
@khanghy2130
khanghy2130 committed Jan 15, 2024
1 parent e7b3aef commit a71f5eb
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 45 deletions.
121 changes: 99 additions & 22 deletions app/routes/_auth.login.tsx → app/routes/login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Link, Form, useOutletContext, useActionData, redirect } from "@remix-run/react";
import { json } from "@remix-run/node";
import { useState } from "react";
import { useEffect, useState } from "react";
import { createServerClient, parse, serialize } from '@supabase/ssr';


Expand All @@ -16,7 +16,6 @@ import type { ActionFunctionArgs } from "@remix-run/node"

export async function action({request}: ActionFunctionArgs) {
const formData = await request.formData();
////return json({ xxx: formData.get("form_type") });

const cookies = parse(request.headers.get('Cookie') ?? '')
const headers = new Headers()
Expand Down Expand Up @@ -46,20 +45,38 @@ export async function action({request}: ActionFunctionArgs) {

// REGISTER
else if (formData.get("form_type") === "REGISTER") {
const displayName = String(formData.get("reg_display_name_input"));
const email = String(formData.get("reg_email_input"));
const password = String(formData.get("reg_password_input"));
const passwordConfirm = String(formData.get("reg_confirm_password_input"));


let errorMessage: string | null = null;
// validate info again on server side
if (!email.includes("@") || !email.includes(".")) {
errorMessage = "Invalid email address.";
}
else if (password.length < 6) {
errorMessage = "Password should be at least 6 characters.";
}
////// more checks
const validations : [boolean, string][] = [
[!email.includes("@") || !email.includes("."), "Invalid email address."],
[password.length < 6, "Password should be at least 6 characters."],
[!(/[A-Z]/.test(password)), "Password should contain at least 1 uppercase."],
[!(/[a-z]/.test(password)), "Password should contain at least 1 lowercase."],
[!(/\d/.test(password)), "Password should contain at least 1 number."],
[!(/[!@#$%^&*()_+={}\[\]:;<>,.?~\\|\-]/.test(password)), "Password should contain at least 1 symbol."],
[password !== passwordConfirm, "Confirm password doesn't match."]
];
validations.some(vali => {
if (vali[0]){
errorMessage = vali[1];
return true;
} else return false;
});

// const d = await supabase.auth.getUser()
// console.log(d)
// const s = await supabase.auth.getSession()
// console.log(s)

if (errorMessage) return json({ errorMessage });
const {error} = await supabase.auth.signUp({email, password});
if (error) json({ errorMessage: "Error: Failed to register." });

return redirect("/");
}

Expand All @@ -68,24 +85,54 @@ export async function action({request}: ActionFunctionArgs) {


export default function Login(){

const actionData = useActionData<typeof action>();
console.log(actionData?.errorMessage); ///////// keeps coming back to undefined
const [errorMessage, setErrorMessage] = useState<string | null>(null);

const resetErrorMessage = () => setErrorMessage(null);
// update errorMessage on form submission
useEffect(()=>{
if (actionData?.errorMessage){
setErrorMessage(actionData.errorMessage);
}
}, [actionData]);


// switch between login & signup
const [isAtLogin, setIsAtLogin] = useState<boolean>(true);
const { supabase } = useOutletContext<{ supabase: SupabaseClient<Database> }>()

const providerClicked = async (providerName: Provider) => {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: providerName
});
if (error) alert("Error while logging in.")
};


const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [regPassword, setRegPassword] = useState("");
const [regConfirmPassword, setRegConfirmPassword] = useState("");

const [showPassReqs, setShowPassReqs] = useState(false);
const [passReqs, setPassReqs] = useState({
hasSixChar: false,
hasUppercase: false,
hasLowercase: false,
hasNumber: false,
hasSymbol: false
});

useEffect(()=>{
setPassReqs({
hasSixChar: regPassword.length >= 6,
hasUppercase: /[A-Z]/.test(regPassword),
hasLowercase: /[a-z]/.test(regPassword),
hasNumber: /\d/.test(regPassword),
hasSymbol: /[!@#$%^&*()_+={}\[\]:;<>,.?~\\|\-]/.test(regPassword)
});
}, [regPassword]);


const fillDemoAcc = ()=>{
setEmail("[email protected]");
Expand Down Expand Up @@ -113,12 +160,16 @@ export default function Login(){
</div>
<div className="m-8 text-4xl mx-32 my-12">OR</div>

<div className="relative text-center overflow-hidden border-2 border-color-2 w-72 h-[480px]">
<button className="btn text-xs min-w-32 absolute top-2 right-2 z-50" onClick={()=>setIsAtLogin(!isAtLogin)}
<div className="relative text-center overflow-hidden border-2 border-color-2 w-72 h-[520px]">
<button className="btn text-xs min-w-32 absolute top-2 right-2 z-50"
onClick={()=>{
setIsAtLogin(!isAtLogin);
resetErrorMessage();
}}
>{isAtLogin? "New user?" : "Login?"}</button>

<div className={"auth-form right-1/2 " + (isAtLogin? "translate-x-1/2" : "-translate-x-full")}>
<Form method="post">
<Form method="post" onSubmit={resetErrorMessage}>
<div className="flex flex-col">
<h1 className="text-center text-2xl pb-4">Login</h1>

Expand All @@ -133,33 +184,59 @@ export default function Login(){
className="text-input" value={password} onChange={(e) => setPassword(e.target.value)}/>

<button type="submit" className='btn'>Log In</button>
{actionData?.errorMessage ? (
<em>{actionData?.errorMessage}</em>
) : null/* ///////// */}
<em className="text-color-4">{errorMessage}</em>
</div>
</Form>
<button className="btn text-xs mt-4" onClick={fillDemoAcc}>Fill demo account</button>
</div>


<div className={"auth-form left-1/2 " + (isAtLogin? "translate-x-full" : "-translate-x-1/2")}>
<Form method="post">
<Form method="post" onSubmit={resetErrorMessage}>
<div className="flex flex-col">
<h1 className="text-center text-2xl pb-4">Register</h1>

<input name="form_type" type="hidden" value="REGISTER"/>
<label htmlFor="reg_display_name_input">Display name</label>
<input name="reg_display_name_input" id="reg_display_name_input"
type="text" required
className="text-input" />
<label htmlFor="reg_email_input">Email</label>
<input name="reg_email_input" id="reg_email_input"
type="email" autoComplete="email"
type="email" autoComplete="email" required
className="text-input" />

{/* Password requirements popup div */}
<div className="relative">
<div hidden={!showPassReqs} className="absolute bottom-0
border-2 rounded-md border-color-2 bg-color-1
w-full p-2">
<p className={passReqs.hasSixChar?"line-through":""}>
At least 6 characters</p>
<p className={passReqs.hasUppercase?"line-through":""}>
At least 1 uppercase</p>
<p className={passReqs.hasLowercase?"line-through":""}>
At least 1 lowercase</p>
<p className={passReqs.hasNumber?"line-through":""}>
At least 1 number</p>
<p className={passReqs.hasSymbol?"line-through":""}>
At least 1 symbol</p>
</div>
</div>

<label htmlFor="reg_password_input">Password</label>
<input name="reg_password_input" id="reg_password_input"
type="password" autoComplete="new-password"
className="text-input" />
className="text-input" required
onFocus={()=>setShowPassReqs(true)}
onBlur={()=>setShowPassReqs(false)}
onChange={e=>setRegPassword(e.target.value)}
value={regPassword}/>
<label htmlFor="reg_confirm_password_input">Confirm password</label>
<input name="reg_confirm_password_input" id="reg_confirm_password_input"
type="password" autoComplete="new-password"
className="text-input" />
className="text-input" required />
<em className="text-color-4">{errorMessage}</em>

<button type="submit" className='btn'>Sign up</button>
</div>
Expand Down
21 changes: 0 additions & 21 deletions app/routes/test2.tsx
View file

This file was deleted.

4 changes: 2 additions & 2 deletions app/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ html {
--color-1: #fff; /*background*/
--color-2: #000; /*text*/
--color-3: #562a2a; /*button*/
--color-4: #170d53; /* */
--color-4: #170d53; /* red error */
--color-5: #0d5641; /**/
}

html.dark {
--color-1: #1d1d1d;
--color-2: #7fffe1;
--color-3: #353535;
--color-4: #147b2d;
--color-4: #d75252;
--color-5: #9f9d12;
}

Expand Down

0 comments on commit a71f5eb

Please sign in to comment.