Changeset e5b84dc for phonelux-frontend/src/components/LoginRegisterComponents

Timestamp:

09/11/22 18:03:58 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

775e15e

Parents:

527b93f

Message:

Prototype version

Location:

phonelux-frontend/src/components/LoginRegisterComponents

Files:

• LoginFormComponent.css (modified) (4 diffs)
• LoginFormComponent.js (modified) (4 diffs)
• RegisterFormComponent.css (modified) (2 diffs)
• RegisterFormComponent.js (modified) (4 diffs)

phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css

@@ -16 +16 @@
   width: fit-content;
   box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
-  padding-top: 30px;
+  padding-top: 20px;
   border-radius: 60px; 
   background-color: white;
@@ -23 +23 @@
 }
 .loginform-imgs-div {
-    padding-top: 20px;
+    padding-top: 10px;
     justify-content: center;
     display: flex;
@@ -43 +43 @@
 
 .loginform-sub-main-div > div{
-  margin-bottom: 50px;
+  margin-bottom: 30px;
   margin-left: 80px;
   margin-right: 80px;
@@ -137 +137 @@
     color: blue;
 }
- .register-link > a{
-     color: rgb(53, 99, 70);
-     text-decoration: none;
+
+
+
+ .registerform-link{
+  color: rgb(53, 99, 70);
+  text-decoration: none;
  }
 
- .register-link > a:hover{
-  color: blue;
+ .registerform-link:hover{
+   color: blue;
  }
+
+ .loginform-message-wrapper{
+  display: flex;
+  justify-content: center;
+ }
+
+ .loginform-error-message{
+  color: red;
+  border: 1px solid red;
+  width: fit-content;
+  padding: 10px;
+  border-radius: 50px;
+  background-color: rgb(251, 224, 224);
+ }

phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js

@@ -17 +17 @@
       email: '',
       password: '',
+      serverResponse: ''
     }
   }
@@ -42 +43 @@
 
       axios(config)
-      .then(function (response) {
-        console.log(response.data);
+      .then((response) => {
+       // store access token in local storage, redirect to homepage
+       console.log(response.data)
       })
-      .catch(function (error) {
-        console.log(error);
+      .catch((error) => {
+        this.setState({
+          serverResponse: 'error'
+        })
       });
 
@@ -67 +71 @@
        <div className="loginform-sub-main-div">
          <div>
-
+          {this.state.serverResponse == 'error' ? <div className='loginform-message-wrapper'>
+                          <h5 className='loginform-error-message'>Невалидна е-маил адреса или лозинка!</h5></div> : <></>}
            <div className="loginform-imgs-div">
              <div className="loginform-image-container">
@@ -93 +98 @@
             </div>  
            </form>
-           <p className='register-link'><Link to={"/register"}><a>Регистрирај се</a></Link></p>
+           <p className='register-link'><Link className='registerform-link' to={"/register"}>Регистрирај се</Link></p>
   
          </div>

phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css

@@ -23 +23 @@
   }
   .registerform-imgs-div {
-      padding-top: 20px;
+      padding-top: 5px;
       justify-content: center;
       display: flex;
@@ -158 +158 @@
   }
 
+  .registerform-message-wrapper{
+    display: flex;
+    justify-content: center;
+  }
+
+  .registerform-error-message{
+    color: red;
+    border: 1px solid red;
+    width: fit-content;
+    padding: 10px;
+    border-radius: 50px;
+    background-color: rgb(251, 224, 224);
+  }
+
+  .registerform-success-message{
+    color: green;
+    border: 1px solid green;
+    width: fit-content;
+    padding: 10px;
+    border-radius: 50px;
+    background-color: #B6E2C8;
+  }
 
 

phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js

@@ -20 +20 @@
         password: '',
         confirmPassword:'',
+        serverResponse: ''
       }
     }
@@ -43 +44 @@
 
         axios(config)
-        .then(function (response) {
-          console.log(response);
+        .then((response) => {
+          this.setState({
+            serverResponse: response.data
+          })
         })
-        .catch(function (error) {
-          console.log(error);
+        .catch((error) => {
+          this.setState({
+            serverResponse: error.response.data
+          })
         });
 
@@ -59 +64 @@
 
 
-    
-
   render() {
 
@@ -69 +72 @@
          <div className="registerform-sub-main-div">
            <div>
+
+            {(() => {
+              if(this.state.serverResponse == '')
+              {
+                return <></> 
+              }
+
+              if(this.state.serverResponse != '' && this.state.serverResponse.includes('Error'))
+              {
+                return <div className='registerform-message-wrapper'>
+                          <h5 className='registerform-error-message'>{this.state.serverResponse.split(':')[1]}</h5> </div>
+              }
+
+              if(this.state.serverResponse != '' && this.state.serverResponse.includes('token'))
+              {
+                return <div className='registerform-message-wrapper'>
+                          <h5 className='registerform-success-message'>Вашата регистрација е во тек. Потврдете на вашата е-маил адреса!</h5> </div>
+              }
+
+            })()}
 
              <div className="registerform-imgs-div">