Merge pull request #326 from vaskocuturilo/dv000281_fix_sign_in_sign_…

…up_forms DV-000281: Fix sign in and sign up forms.
vaskocuturilo · Oct 5, 2023 · a12b0c9 · a12b0c9
2 parents 1ba27dc + c9ea9a9
commit a12b0c9
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 28 deletions.
diff --git a/cypress/support/pages/NavSubPage.cy.js b/cypress/support/pages/NavSubPage.cy.js
@@ -10,7 +10,7 @@ export class NavSubPage {
         registerButton: ()=> cy.get('[data-cy="registerButton"]').should('be.visible'),
         cancelButton: ()=> cy.get('[data-cy="cancelButton"]').should('be.visible'),
 
-        emailInput: ()=> cy.get('[data-cy="emailInput"]').should('be.visible'),
+        loginInput: ()=> cy.get('[data-cy="loginInput"]').should('be.visible'),
         passwordInput: ()=> cy.get('[data-cy="passwordInput"]').should('be.visible'),
 
         firstNameInput: ()=> cy.get('[data-cy="firstNameInput"]').should('be.visible'),
@@ -25,7 +25,7 @@ export class NavSubPage {
         this.elements.signInButton().should('have.text', text);
         this.elements.signInButton().click();
         this.elements.loginButton();
-        this.elements.emailInput();
+        this.elements.loginInput();
         this.elements.passwordInput();
         this.elements.cancelButton().click();
     }
@@ -36,7 +36,7 @@ export class NavSubPage {
         this.elements.registerButton();
         this.elements.firstNameInput();
         this.elements.lastnameNameInput();
-        this.elements.emailInput();
+        this.elements.loginInput();
         this.elements.passwordInput();
         this.elements.cancelButton().click();
     }

diff --git a/frontend/src/components/Modal.module.css b/frontend/src/components/Modal.module.css
@@ -160,31 +160,120 @@
     margin-bottom: 5px;
   }
 
-  .form {
+  form {
+    background-color: #15172b;
+    border-radius: 20px;
+    box-sizing: border-box;
+    height: 500px;
+    padding: 20px;
+    width: 320px;
+  }
+
+  title {
+    color: #eee;
+    font-family: sans-serif;
+    font-size: 36px;
+    font-weight: 600;
+    margin-top: 30px;
+  }
+
+  .subtitle {
+    color: #eee;
+    font-family: sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 10px;
+  }
+
+  .input-container {
+    height: 50px;
     position: relative;
-    z-index: 1;
-    background: #FFFFFF;
-    border-radius: 10px;
-    max-width: 360px;
-    margin: 0 auto 100px;
-    padding: 45px;
-    text-align: center;
+    width: 100%;
   }
-
-  .form input {
+
+  .ic1 {
+    margin-top: 40px;
+  }
+
+  .ic2 {
+    margin-top: 30px;
+  }
+
+  .input {
+    background-color: #303245;
+    border-radius: 12px;
+    border: 0;
+    box-sizing: border-box;
+    color: #eee;
+    font-size: 18px;
+    height: 100%;
     outline: 0;
-    background: #f2f2f2;
+    padding: 4px 20px 0;
     width: 100%;
+  }
+
+  .cut {
+    background-color: #15172b;
+    border-radius: 10px;
+    height: 20px;
+    left: 20px;
+    position: absolute;
+    top: -20px;
+    transform: translateY(0);
+    transition: transform 200ms;
+    width: 76px;
+  }
+
+  .cut-short {
+    width: 50px;
+  }
+
+  .input:focus ~ .cut,
+  .input:not(:placeholder-shown) ~ .cut {
+    transform: translateY(8px);
+  }
+
+  .placeholder {
+    color: #65657b;
+    font-family: sans-serif;
+    left: 20px;
+    line-height: 14px;
+    pointer-events: none;
+    position: absolute;
+    transform-origin: 0 50%;
+    transition: transform 200ms, color 200ms;
+    top: 20px;
+  }
+
+  .input:focus ~ .placeholder,
+  .input:not(:placeholder-shown) ~ .placeholder {
+    transform: translateY(-30px) translateX(10px) scale(0.75);
+  }
+
+  .input:not(:placeholder-shown) ~ .placeholder {
+    color: #808097;
+  }
+
+  .input:focus ~ .placeholder {
+    color: #dc2f55;
+  }
+
+  .submit {
+    background-color: #08d;
+    border-radius: 12px;
     border: 0;
-    border-radius: 5px;
-    margin: 0 0 15px;
-    padding: 15px;
     box-sizing: border-box;
-    font-size: 14px;
-    font-family: 'Comfortaa', cursive;
+    color: #eee;
+    cursor: pointer;
+    font-size: 18px;
+    height: 50px;
+    margin-top: 38px;
+    text-align: center;
+    width: 100%;
   }
 
-  .form input:focus {
-    background: #dbdbdb;
+  .submit:active {
+    background-color: #06b;
   }
+
 
diff --git a/frontend/src/components/SignIn.js b/frontend/src/components/SignIn.js
@@ -1,8 +1,48 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./Modal.module.css";
 import { RiCloseLine } from "react-icons/ri";
 
 const SignIn = ({ setIsOpen1 }) => {
+
+  const [loginError, setLoginError] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target);
+
+    fetch("http://localhost:8080/login", {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: formData.get('login'),
+        password: formData.get('password'),
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if(data.fieldErrors) {
+          data.fieldErrors.forEach(fieldError => {
+            if(fieldError.field === 'login'){
+              setLoginError(fieldError.message);
+            }
+
+            if(fieldError.field === 'password'){
+              setPasswordError(fieldError.message);
+            }
+          });
+        } else {
+          alert("Success !!");
+        }
+      })
+      .catch((err) => err);
+  }
+
   return (
     <>
       <div className={styles.darkBG} onClick={() => setIsOpen1(false)} />
@@ -11,28 +51,31 @@ const SignIn = ({ setIsOpen1 }) => {
           <div className={styles.modalHeader}>
             <h5 className={styles.heading}>Dialog</h5>
           </div>
+
           <button className={styles.closeBtn} onClick={() => setIsOpen1(false)}>
             <RiCloseLine style={{ marginBottom: "-3px" }} />
           </button>
+
           <div className={styles.modalContent}>
           Are you sure you want to Sign In ?
           </div>
+
           <div className={styles.modalActions}>
-          <label-modal>Email:</label-modal>
+          <label-modal>Login:</label-modal>
           <input
           type="text"
-          placeholder="Enter email"
-          data-cy="emailInput"
+          placeholder="Enter login"
+          data-cy="loginInput"
           className="form-control input-modal"
-        />
+        />{loginError ? <span style={{ color: 'red', fontSize: '12px'}}>{loginError}</span> : ''}
         <label-modal>Password:</label-modal>
          <input
           type="password"
           placeholder="Enter password"
           maxlength="4"
           data-cy="passwordInput"
           className="form-control input-modal"
-        />
+        />{ passwordError ? <span style={{ color: 'red', fontSize: '12px'}}>{passwordError}</span> : ''}
             <div className={styles.actionsContainer}>
               <button className={styles.deleteBtn} onClick={() => setIsOpen1(false)} data-cy="loginButton">
                 Login

diff --git a/frontend/src/components/SignUp.js b/frontend/src/components/SignUp.js
@@ -40,7 +40,7 @@ const SignUp = ({ setIsOpen2 }) => {
           placeholder="Enter email"
           maxlength="25"
           class="form-control inp_text"
-          data-cy="emailInput"
+          data-cy="loginInput"
         />
          <label-modal>Password:</label-modal>
          <input

diff --git a/src/test/java/com/regions/simpleregions/user/SimpleIntegrationUsersTest.java b/src/test/java/com/regions/simpleregions/user/SimpleIntegrationUsersTest.java
@@ -71,6 +71,45 @@ void createNewUser() throws Exception {
                 .andExpect(jsonPath("$.apiKey.expires").isNotEmpty());
     }
 
+
+    @Test
+    void login() throws Exception {
+        final ObjectMapper objectMapper = new ObjectMapper();
+
+        final String newUser = createUser();
+
+        Map<String, Object> bodyNewUser = new HashMap<>();
+        bodyNewUser.put("firstName", newUser);
+        bodyNewUser.put("lastName", newUser);
+        bodyNewUser.put("login", newUser);
+        bodyNewUser.put("password", newUser);
+
+
+        String REGISTER = "/api/v1/users/register";
+        mockMvc.perform(MockMvcRequestBuilders
+                        .post(REGISTER)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(objectMapper.writeValueAsString(bodyNewUser))
+                        .accept(MediaType.APPLICATION_JSON)
+                        .header(headerName, authToken))
+                .andExpect(status().isCreated());
+
+
+        Map<String, Object> loginUser = new HashMap<>();
+        loginUser.put("login", newUser);
+        loginUser.put("password", newUser);
+
+        String LOGIN = "/api/v1/users/login";
+        mockMvc.perform(MockMvcRequestBuilders
+                        .post(LOGIN)
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content(objectMapper.writeValueAsString(loginUser))
+                        .accept(MediaType.APPLICATION_JSON)
+                        .header(headerName, authToken))
+                .andExpect(status().isForbidden())
+                .andExpect(jsonPath("$.message", equalTo("The user is not activated")));
+    }
+
     private String createUser() {
         String timeStamp = new SimpleDateFormat("yyyy.MM.dd.HH.mm.ss").format(new java.util.Date());
         return timeStamp + "@test.com";