devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extracted the Input into its own component

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-15 10:10:33 +01:00
parent 60217e9a66
commit 65ebdd7dde
4 changed files with 76 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/login.tsx
View File

@@ -9,6 +9,7 @@ import {Divider} from "primereact/divider";
import Button from "@/components/Low/Button";
import {BsArrowRepeat} from "react-icons/bs";
import Link from "next/link";
import Input from "@/components/Low/Input";
export default function Login() {
const [email, setEmail] = useState("");
@@ -62,34 +63,8 @@ export default function Login() {
</div>
<Divider className="max-w-md" />
<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Email address</label>
<input
type="email"
name="email"
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Password</label>
<div className="w-full h-fit relative">
<input
type={showPassword ? "text" : "password"}
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<p
role="button"
onClick={() => setShowPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showPassword ? "Hide" : "Show"}
</p>
</div>
</div>
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
{!isLoading && "Login"}
{isLoading && (

71
src/pages/register.tsx
View File

@@ -6,6 +6,7 @@ import useUser from "@/hooks/useUser";
import Button from "@/components/Low/Button";
import {BsArrowRepeat} from "react-icons/bs";
import Link from "next/link";
import Input from "@/components/Low/Input";
export default function Register() {
const [name, setName] = useState("");
@@ -38,66 +39,16 @@ export default function Register() {
<section className="h-full w-full flex flex-col items-center justify-center gap-12">
<h1 className="font-bold text-4xl">Create new account</h1>
<form className="flex flex-col items-center gap-6 w-1/2">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Name *</label>
<input
required
type="text"
name="name"
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Email address *</label>
<input
required
type="email"
name="email"
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Password</label>
<div className="w-full h-fit relative">
<input
required
type={showPassword ? "text" : "password"}
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<p
role="button"
onClick={() => setShowPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showPassword ? "Hide" : "Show"}
</p>
</div>
</div>
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Confirm Password *</label>
<div className="w-full h-fit relative">
<input
required
type={showConfirmPassword ? "text" : "password"}
name="confirmPassword"
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm your password"
className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
<p
role="button"
onClick={() => setShowConfirmPassword((prev) => !prev)}
className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
{showConfirmPassword ? "Hide" : "Show"}
</p>
</div>
</div>
<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />
<Input
type="password"
name="confirmPassword"
onChange={(e) => setConfirmPassword(e)}
placeholder="Confirm your password"
required
/>
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
{!isLoading && "Create account"}
{isLoading && (