From 1fe19aaf82c98e29c4dc67fcdfdb49f7c2da7b03 Mon Sep 17 00:00:00 2001
From: "Schwinghammer, Max" <max.schwinghammer@vaillant-group.com>
Date: Mon, 10 Jun 2024 18:16:52 +0200
Subject: [PATCH 1/2] Sign up: Fixed double tos and privacy policy consent and
 adapted error message styles

---
 src/main/web/src/App.css                      |  3 +-
 .../web/src/organisms/signup/EmailInput.tsx   | 32 ++++---------------
 .../web/src/organisms/signup/ErrorModal.css   |  6 ----
 .../web/src/organisms/signup/ErrorModal.tsx   | 17 ----------
 .../signup/UsernamePasswordInput.tsx          | 11 -------
 5 files changed, 8 insertions(+), 61 deletions(-)
 delete mode 100644 src/main/web/src/organisms/signup/ErrorModal.css
 delete mode 100644 src/main/web/src/organisms/signup/ErrorModal.tsx

diff --git a/src/main/web/src/App.css b/src/main/web/src/App.css
index 9fbabf53..d08ff5ea 100644
--- 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
index 732b18a7..62e4dcc1 100644
--- 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,12 +56,7 @@ 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);
@@ -70,6 +64,7 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
 
           setLoading(false);
           setMessage(resMessage);
+          setContainerHeight("560px");
         }
     );
   };
@@ -117,14 +112,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>{" "}
@@ -135,6 +123,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">
@@ -149,10 +140,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>
@@ -172,12 +160,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
deleted file mode 100644
index b9fd1b10..00000000
--- a/src/main/web/src/organisms/signup/ErrorModal.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.error-description {
-    font-family: Arial, sans-serif;
-    color: red;
-    padding: 20px;
-    text-align: center;
-}
diff --git a/src/main/web/src/organisms/signup/ErrorModal.tsx b/src/main/web/src/organisms/signup/ErrorModal.tsx
deleted file mode 100644
index 5caca82d..00000000
--- a/src/main/web/src/organisms/signup/ErrorModal.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import './ErrorModal.css';
-
-const ErrorModal = ({onClose}: any) => {
-    return (
-        <div className="error-modal">
-            <div className="error-description">
-                <h4>
-                    The email you entered is already in use!
-                    Please try again with another email.
-                </h4>
-            </div>
-        </div>
-    );
-};
-
-export default ErrorModal;
diff --git a/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx b/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx
index 6c2ad392..b10a2fab 100644
--- a/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx
+++ b/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx
@@ -2,7 +2,6 @@ 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";
@@ -12,7 +11,6 @@ const UsernamePasswordInput = () => {
 
     const [message, setMessage] = useState<string>("");
     const [loading, setLoading] = useState<boolean>(false);
-    const [acceptPrivacyPolicy, setAcceptPrivacyPolicy] = useState(false);
     const [showError, setShowError] = useState<boolean>(false);
 
     const initialValues: {
@@ -85,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 && (

From 19f0de5ded5e1a8242f4efd740b4a6b735c2b6d2 Mon Sep 17 00:00:00 2001
From: "Schwinghammer, Max" <max.schwinghammer@vaillant-group.com>
Date: Mon, 10 Jun 2024 18:18:52 +0200
Subject: [PATCH 2/2] Sign up: Fixed double tos and privacy policy consent and
 adapted error message styles

---
 .../src/organisms/signup/ErrorUsernameModal.tsx | 17 -----------------
 .../organisms/signup/UsernamePasswordInput.tsx  |  3 +--
 2 files changed, 1 insertion(+), 19 deletions(-)
 delete mode 100644 src/main/web/src/organisms/signup/ErrorUsernameModal.tsx

diff --git a/src/main/web/src/organisms/signup/ErrorUsernameModal.tsx b/src/main/web/src/organisms/signup/ErrorUsernameModal.tsx
deleted file mode 100644
index 580928fe..00000000
--- a/src/main/web/src/organisms/signup/ErrorUsernameModal.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import './ErrorModal.css';
-
-const ErrorUsernameModal = ({onClose}: any) => {
-    return (
-        <div className="error-modal">
-            <div className="error-description">
-                <h4>
-                    The username you entered is already in use!
-                    Please try again with another username.
-                </h4>
-            </div>
-        </div>
-    );
-};
-
-export default ErrorUsernameModal;
diff --git a/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx b/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx
index b10a2fab..95024c2d 100644
--- a/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx
+++ b/src/main/web/src/organisms/signup/UsernamePasswordInput.tsx
@@ -4,7 +4,6 @@ import {register} from "../../services/AuthService";
 import {ErrorMessage, Field, Form, Formik} from "formik";
 import {NavigateFunction, useNavigate} from "react-router-dom";
 import './UsernamePasswordInput.css';
-import ErrorUsernameModal from "./ErrorUsernameModal";
 
 const UsernamePasswordInput = () => {
     let navigate: NavigateFunction = useNavigate();
@@ -99,7 +98,7 @@ const UsernamePasswordInput = () => {
 
                         <div className="error-message-dialog">
                             {showError && (
-                                <ErrorUsernameModal message={message} onClose={() => setShowError(false)}/>
+                                <div className="alert-danger">{message}</div>
                             )}
                         </div>
                     </Form>