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

Commit

Permalink
Merge pull request #909 from SE-TINF22B6/frontend
Browse files Browse the repository at this point in the history 
Deleted `remember me` and adapted login style
  • Loading branch information
@JonasEbbinghaus25
JonasEbbinghaus25 authored Jun 10, 2024
2 parents 6bf7ff6 + 4e1d812 commit 9f388dc
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 81 deletions.
3 changes: 2 additions & 1 deletion src/main/web/src/organisms/login/Login.css
View file
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
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 @@ -77,87 +72,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
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

0 comments on commit 9f388dc

Please sign in to comment.