Wrapped login and register in forms
This commit is contained in:
Alex Holliday committed
1 parent
08565c9eda
commit
3cc01db55f
6 files changed
+92
-81
No files matched your search
@@ -46,7 +46,8 @@ const Login = () => {
|
||||
}
|
||||
}, [form]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await loginValidation.validateAsync(form, { abortEarly: false });
|
||||
const action = await dispatch(login(form));
|
||||
@@ -84,7 +85,7 @@ const Login = () => {
|
||||
return (
|
||||
<div className="login-page">
|
||||
<BackgroundPattern></BackgroundPattern>
|
||||
<div className="login-form">
|
||||
<form className="login-form" onSubmit={handleSubmit}>
|
||||
<div className="login-form-header">
|
||||
<img
|
||||
className="login-form-header-logo"
|
||||
@@ -101,6 +102,7 @@ const Login = () => {
|
||||
error={errors.email ? true : false}
|
||||
helperText={errors.email ? errors.email : ""}
|
||||
placeholder="Enter your email"
|
||||
autoComplete="username"
|
||||
id="login-email-input"
|
||||
/>
|
||||
<div className="login-form-v2-spacing" />
|
||||
@@ -109,6 +111,7 @@ const Login = () => {
|
||||
error={errors.password ? true : false}
|
||||
helperText={errors.password ? errors.password : ""}
|
||||
placeholder="Password"
|
||||
autoComplete="current-password"
|
||||
id="login-password-input"
|
||||
/>
|
||||
</div>
|
||||
@@ -120,10 +123,10 @@ const Login = () => {
|
||||
<div className="login-form-v3-spacing" />
|
||||
<div className="login-form-actions">
|
||||
<Button
|
||||
type="submit"
|
||||
level="primary"
|
||||
label="Sign in"
|
||||
sx={{ width: "100%" }}
|
||||
onClick={handleSubmit}
|
||||
/>
|
||||
<div className="login-form-v-spacing" />
|
||||
<Button
|
||||
@@ -138,7 +141,7 @@ const Login = () => {
|
||||
Don’t have an account?
|
||||
<span className="new-account-option-span">Sign up</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -59,7 +59,8 @@ const Register = () => {
|
||||
setForm(newForm);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await registerValidation.validateAsync(form, { abortEarly: false });
|
||||
const action = await dispatch(register(form));
|
||||
@@ -94,82 +95,80 @@ const Register = () => {
|
||||
return (
|
||||
<div className="register-page">
|
||||
<BackgroundPattern></BackgroundPattern>
|
||||
<form>
|
||||
<div className="register-form">
|
||||
<div className="register-form-header">
|
||||
<img
|
||||
className="register-form-header-logo"
|
||||
src={Logomark}
|
||||
alt="Logomark"
|
||||
/>
|
||||
<div className="register-form-v-spacing-large" />
|
||||
<div className="register-form-heading">Create an account</div>
|
||||
<div className="register-form-v-spacing-large"></div>
|
||||
</div>
|
||||
<div className="register-form-v-spacing-40px" />
|
||||
<div className="register-form-inputs">
|
||||
<StringTextField
|
||||
onChange={handleInput}
|
||||
error={errors.firstname ? true : false}
|
||||
helperText={errors.firstname ? errors.firstname : ""}
|
||||
label="First name*"
|
||||
placeholder="Enter your first name"
|
||||
id="register-firstname-input"
|
||||
/>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<StringTextField
|
||||
onChange={handleInput}
|
||||
error={errors.lastname ? true : false}
|
||||
helperText={errors.lastname ? errors.lastname : ""}
|
||||
label="Last name*"
|
||||
placeholder="Enter your last name"
|
||||
id="register-lastname-input"
|
||||
/>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<EmailTextField
|
||||
onChange={handleInput}
|
||||
label="Email*"
|
||||
error={errors.email ? true : false}
|
||||
helperText={errors.email ? errors.email : ""}
|
||||
placeholder="Enter your email"
|
||||
id="register-email-input"
|
||||
/>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<PasswordTextField
|
||||
onChange={handleInput}
|
||||
label="Password*"
|
||||
error={errors.password ? true : false}
|
||||
helperText={errors.password ? errors.password : ""}
|
||||
placeholder="Create a password"
|
||||
id="register-password-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<div className="register-form-checks">
|
||||
<Check text="Must be at least 8 characters" />
|
||||
<div className="register-form-v-spacing-small"></div>
|
||||
<Check text="Must contain one special character" />
|
||||
</div>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<div className="register-form-actions">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
level="primary"
|
||||
label="Get started"
|
||||
sx={{ width: "100%" }}
|
||||
/>
|
||||
<div className="login-form-v-spacing" />
|
||||
<Button
|
||||
disabled={true}
|
||||
level="secondary"
|
||||
label="Sign up with Google"
|
||||
sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
|
||||
img={<img className="google-enter" src={Google} alt="Google" />}
|
||||
/>
|
||||
</div>
|
||||
<form className="register-form" onSubmit={handleSubmit}>
|
||||
<div className="register-form-header">
|
||||
<img
|
||||
className="register-form-header-logo"
|
||||
src={Logomark}
|
||||
alt="Logomark"
|
||||
/>
|
||||
<div className="register-form-v-spacing-large" />
|
||||
<div className="register-form-heading">Create an account</div>
|
||||
<div className="register-form-v-spacing-large"></div>
|
||||
</div>
|
||||
<div className="register-form-v-spacing-40px" />
|
||||
<div className="register-form-inputs">
|
||||
<StringTextField
|
||||
onChange={handleInput}
|
||||
error={errors.firstname ? true : false}
|
||||
helperText={errors.firstname ? errors.firstname : ""}
|
||||
label="First name*"
|
||||
placeholder="Enter your first name"
|
||||
id="register-firstname-input"
|
||||
/>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<StringTextField
|
||||
onChange={handleInput}
|
||||
error={errors.lastname ? true : false}
|
||||
helperText={errors.lastname ? errors.lastname : ""}
|
||||
label="Last name*"
|
||||
placeholder="Enter your last name"
|
||||
id="register-lastname-input"
|
||||
/>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<EmailTextField
|
||||
onChange={handleInput}
|
||||
label="Email*"
|
||||
error={errors.email ? true : false}
|
||||
helperText={errors.email ? errors.email : ""}
|
||||
placeholder="Enter your email"
|
||||
id="register-email-input"
|
||||
/>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<PasswordTextField
|
||||
onChange={handleInput}
|
||||
label="Password*"
|
||||
error={errors.password ? true : false}
|
||||
helperText={errors.password ? errors.password : ""}
|
||||
placeholder="Create a password"
|
||||
id="register-password-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<div className="register-form-checks">
|
||||
<Check text="Must be at least 8 characters" />
|
||||
<div className="register-form-v-spacing-small"></div>
|
||||
<Check text="Must contain one special character" />
|
||||
</div>
|
||||
<div className="login-form-v2-spacing" />
|
||||
<div className="register-form-actions">
|
||||
<Button
|
||||
type="submit"
|
||||
level="primary"
|
||||
label="Get started"
|
||||
sx={{ width: "100%" }}
|
||||
/>
|
||||
<div className="login-form-v-spacing" />
|
||||
<Button
|
||||
disabled={true}
|
||||
level="secondary"
|
||||
label="Sign up with Google"
|
||||
sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
|
||||
img={<img className="google-enter" src={Google} alt="Google" />}
|
||||
/>
|
||||
</div>
|
||||
<div className="register-bottom-spacing"></div>
|
||||
</form>
|
||||
<div className="register-bottom-spacing"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user