Skip to content
This repository was archived by the owner on Sep 29, 2024. It is now read-only.

Deleted remember me and adapted login style #909

Merged
merged 1 commit into from
Jun 10, 2024
Merged

Deleted remember me and adapted login style #909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/main/web/src/organisms/login/Login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

.modal-content {
width: 400px;
height: 620px;
height: 590px;
background: var(--component-grey);
color: var(--component-grey);
z-index: 10;
Expand All @@ -46,6 +46,7 @@
.checkbox input[type="checkbox"]:checked:focus + .MuiSvgIcon-root {
color: red;
}

.form-control {
width: 100%;
height: 40px;
Expand Down
130 changes: 51 additions & 79 deletions src/main/web/src/organisms/login/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,15 @@ import {Formik, Field, Form, ErrorMessage} from "formik";
import * as Yup from "yup";
import './Login.css';
import {googleLogin, login} from "../../services/AuthService";
import {Checkbox, FormControlLabel} from "@mui/material";

import {CredentialResponse, GoogleLogin} from "@react-oauth/google";
import SignUp from "../signup/SignUp";

type Props = {}

const Login: React.FC<Props> = () => {
let navigate: NavigateFunction = useNavigate();

const [showSignUp, setShowSignUp] = useState(false);
const [loading, setLoading] = useState<boolean>(false);
const [message, setMessage] = useState<string>("");
const [rememberMe, setRememberMe] = useState(false);

const initialValues: {
username: string;
Expand All @@ -35,7 +30,7 @@ const Login: React.FC<Props> = () => {
});

const handleOpenSignUp = (): void => {
setShowSignUp(true);

};

const handleLogin = (formValue: { username: string; password: string; rememberMe: boolean }): void => {
Expand Down Expand Up @@ -76,87 +71,64 @@ const Login: React.FC<Props> = () => {
};

return (
<div className="col-md-12">
<div className="card card-container">
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleLogin}
>
<Form>
<div className="modal-content">
<div className="modalHeader">
<h3 className="modalHeadline">LOGIN</h3>
</div>
<div className="form-group">
<label htmlFor="username" className="heading">Username</label>
<Field name="username" type="text" className="form-control"/>
<ErrorMessage
name="username"
component="div"
className="alert-danger"
/>
</div>

<div className="form-group">
<label htmlFor="password" className="heading">Password</label>
<Field name="password" type="password" className="form-control"/>
<ErrorMessage
name="password"
component="div"
className="alert-danger"
/>
</div>

<div className="forgot-password-option">
<label className="forgot-password-option-text">Forgot Password?</label>
</div>
<div className="card card-container">
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleLogin}>
<Form>
<div className="modal-content">
<div className="modalHeader">
<h3 className="modalHeadline">LOGIN</h3>
</div>
<div className="form-group">
<label htmlFor="username" className="heading">Username</label>
<Field name="username" type="text" className="form-control"/>
<ErrorMessage name="username" component="div" className="alert-danger"/>
</div>

<div className="remember-me-option">
<FormControlLabel control={<Checkbox className="checkbox" checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}/>}
label="Remember me?"
className="remember-me-checkbox"/>
</div>
<div className="form-group">
<label htmlFor="password" className="heading">Password</label>
<Field name="password" type="password" className="form-control"/>
<ErrorMessage name="password" component="div" className="alert-danger"/>
</div>

<div className="form-group">
<button type="submit" className="loading-btn" disabled={loading}>
{loading && (
<span className="spinner-border spinner-border-sm"></span>
)}
<span className="btn-text">Login</span>
</button>
</div>
<div className="forgot-password-option">
<label className="forgot-password-option-text">Forgot Password?</label>
</div>

<div className="signup-option">
<label className="signup-option-text">Need an account? </label>
<label className="signup-option-text-link" onClick={handleOpenSignUp}>SIGN UP</label>
</div>
<div className="form-group">
<button type="submit" className="loading-btn" disabled={loading}>
{loading && (
<span className="spinner-border spinner-border-sm"></span>
)}
<span className="btn-text">Login</span>
</button>
</div>

<div className="google-oauth-login">
<div className="signup-option">
<label className="signup-option-text">Need an account? </label>
<label className="signup-option-text-link" onClick={handleOpenSignUp}>SIGN UP</label>
</div>

<GoogleLogin size={'medium'} logo_alignment={'center'} ux_mode={'popup'} useOneTap={true}
text={"continue_with"}
onSuccess={handleGoogleLogin}
onError={() => {
console.log('Login Failed');
}}
/>
</div>
<div className="google-oauth-login">

{showSignUp && <SignUp/>}
<GoogleLogin size={'medium'} logo_alignment={'center'} ux_mode={'popup'} useOneTap={true}
text={"continue_with"}
onSuccess={handleGoogleLogin}
onError={(): void => {
console.log('Login Failed');
}}
/>
</div>

{message && (
<div className="form-group">
<div className="alert-danger" role="alert">
{message}
</div>
{message && (
<div className="form-group">
<div className="alert-danger" role="alert">
{message}
</div>
)}
</div>
</Form>
</Formik>
</div>
</div>
)}
</div>
</Form>
</Formik>
</div>
);
};
Expand Down
1 change: 0 additions & 1 deletion src/main/web/src/organisms/login/ModalLoginContainer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
box-sizing: border-box;
}


.login {
display: flex;
align-items: center;
Expand Down
Loading