Merge pull request #917 from SE-TINF22B6/frontend

Sign up: Fixed double tos and privacy policy consent and adapted error message styles
SE-TINF22B6 · Jun 10, 2024 · 0a0b245 · 0a0b245
2 parents 0e906ee + 19f0de5
commit 0a0b245
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 80 deletions.
diff --git a/src/main/web/src/App.css b/src/main/web/src/App.css
@@ -30,7 +30,6 @@
 }
 
 .error, .loading {
-
   font-size: 24px;
   font-weight: var(--strong-font-weight);
   line-height: 24px;
@@ -90,7 +89,6 @@
   justify-content: center;
   position: relative;
   margin-bottom: 20px;
-
   text-decoration: none;
   font-size: 20px;
 }
@@ -117,6 +115,7 @@
 
 .alert-danger {
   color: var(--red);
+  font-weight: bold;
   font-size: 14px;
   margin-top: 10px;
   margin-bottom: 10px;

diff --git a/src/main/web/src/organisms/signup/EmailInput.tsx b/src/main/web/src/organisms/signup/EmailInput.tsx
@@ -3,7 +3,6 @@ import "./EmailInput.css";
 import { Formik, Field, Form, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import {emailVerification, googleLogin} from "../../services/AuthService";
-import ErrorModal from "./ErrorModal";
 import {CredentialResponse, GoogleLogin} from "@react-oauth/google";
 import {NavigateFunction, useNavigate} from "react-router-dom";
 
@@ -57,19 +56,15 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
           onSuccess();
         },
         (error): void => {
-          let resMessage =
-              (error.response &&
-                  error.response.data &&
-                  error.response.data.message) ||
-              error.message ||
-              error.toString();
+          let resMessage = (error.response && error.response.data && error.response.data.message) || error.message || error.toString();
 
           if (error.message === "Request failed with status code 400") {
             setShowError(true);
           }
 
           setLoading(false);
           setMessage(resMessage);
+          setContainerHeight("560px");
         }
     );
   };
@@ -118,14 +113,7 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
             />
             <form style={{color: 'var(--white)', fontSize: '14px'}}>
               <fieldset style={{border: 'none'}}>
-                <input
-                    type="checkbox"
-                    id="mc"
-                    name="Agree"
-                    value="Agree"
-                    className="consent-radio-button"
-                    onChange={handleConsentChange}
-                />
+                <input type="checkbox" id="mc" name="Agree" value="Agree" className="consent-radio-button" onChange={handleConsentChange}/>
                 <label htmlFor="mc">
                   I accept{" "}
                   <a className="consent-link" href='/terms-of-service' target="_blank" rel="noopener noreferrer">Terms of Service</a>{" "}
@@ -136,6 +124,9 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
             </form>
             {consentError && <div className="alert-danger">{consentError}</div>}
             <ErrorMessage name="email" component="div" className="alert-danger"/>
+            {showError && !isInputFocused && (
+                <div className="alert-danger">{message}</div>
+            )}
           </div>
           <div className="form-group">
             <button type="submit" className="loading-btn">
@@ -150,10 +141,7 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
             <label className="signup-option-text">
             Already have an account?{" "}
             </label>
-            <label
-              className="signup-option-text-link"
-              onClick={handleOpenLogin}
-            >
+            <label className="signup-option-text-link" onClick={handleOpenLogin}>
               LOGIN
             </label>
           </div>
@@ -173,12 +161,6 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
           }}
         />
       </div>
-
-      <div className="error-message-dialog">
-        {showError && !isInputFocused && (
-          <ErrorModal message={message} onClose={() => setShowError(false)} />
-        )}
-      </div>
     </div>
   );
 });

diff --git a/src/main/web/src/organisms/signup/ErrorModal.css b/src/main/web/src/organisms/signup/ErrorModal.css
diff --git a/src/main/web/src/organisms/signup/ErrorModal.tsx b/src/main/web/src/organisms/signup/ErrorModal.tsx
diff --git a/src/main/web/src/organisms/signup/ErrorUsernameModal.tsx b/src/main/web/src/organisms/signup/ErrorUsernameModal.tsx
diff --git a/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx b/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx
@@ -2,17 +2,14 @@ import React, { useState } from 'react';
 import * as Yup from "yup";
 import {register} from "../../services/AuthService";
 import {ErrorMessage, Field, Form, Formik} from "formik";
-import {Checkbox, FormControlLabel} from "@mui/material";
 import {NavigateFunction, useNavigate} from "react-router-dom";
 import './UsernamePasswordInput.css';
-import ErrorUsernameModal from "./ErrorUsernameModal";
 
 const UsernamePasswordInput = () => {
     let navigate: NavigateFunction = useNavigate();
 
     const [message, setMessage] = useState<string>("");
     const [loading, setLoading] = useState<boolean>(false);
-    const [acceptPrivacyPolicy, setAcceptPrivacyPolicy] = useState(false);
     const [showError, setShowError] = useState<boolean>(false);
 
     const initialValues: {
@@ -86,15 +83,6 @@ const UsernamePasswordInput = () => {
                             <Field name="re-password" type="password" className="form-control"/>
                             <ErrorMessage name="re-password" component="div" className="alert-danger"/>
                         </div>
-                        <div className="accept-privacy-policy">
-                            <FormControlLabel
-                                control={
-                                <Checkbox className="checkbox" checked={acceptPrivacyPolicy}
-                                          onChange={(e) => setAcceptPrivacyPolicy(e.target.checked)}
-                                />}
-                                label="I accept Terms of Service and Privacy Policy"
-                                className="accept-privacy-policy-checkbox"/>
-                        </div>
                         <div className="form-group">
                             <button type="submit" className="loading-btn">
                                 {loading && (
@@ -111,7 +99,7 @@ const UsernamePasswordInput = () => {
 
                         <div className="error-message-dialog">
                             {showError && (
-                                <ErrorUsernameModal message={message} onClose={() => setShowError(false)}/>
+                                <div className="alert-danger">{message}</div>
                             )}
                         </div>
                     </Form>