From 4e56c31302414d039d9a1694d0a043d24b5d3e4a Mon Sep 17 00:00:00 2001
From: Vladyslav Fenchak <vladyslav.fenchak@clariteia.com>
Date: Tue, 21 Sep 2021 13:55:15 +0200
Subject: [PATCH] ISSUE #283

---
 .../src/components/auth/login.component.js    | 12 +--
 .../src/components/auth/register.component.js | 76 +++++++++++++++++--
 external/front/src/services/auth.service.js   | 15 +---
 3 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/external/front/src/components/auth/login.component.js b/external/front/src/components/auth/login.component.js
index 5a765f24..5a1d6f2c 100644
--- a/external/front/src/components/auth/login.component.js
+++ b/external/front/src/components/auth/login.component.js
@@ -81,12 +81,12 @@ export default class Login extends Component {
 
   render() {
     return (
-      <div className="col-md-12">
+      <div className="col-md-6 mx-auto mt-5">
         <div className="card card-container">
           <img
             src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
             alt="profile-img"
-            className="profile-img-card"
+            className="profile-img-card mt-4"
           />
 
           <Form
@@ -95,7 +95,7 @@ export default class Login extends Component {
               this.form = c;
             }}
           >
-            <div className="form-group">
+            <div className="form-group ml-3 mr-3">
               <label htmlFor="username">Username</label>
               <Input
                 type="text"
@@ -107,7 +107,7 @@ export default class Login extends Component {
               />
             </div>
 
-            <div className="form-group">
+            <div className="form-group ml-3 mr-3">
               <label htmlFor="password">Password</label>
               <Input
                 type="password"
@@ -119,7 +119,7 @@ export default class Login extends Component {
               />
             </div>
 
-            <div className="form-group">
+            <div className="form-group ml-3 mr-3">
               <button
                 className="btn btn-primary btn-block"
                 disabled={this.state.loading}
@@ -132,7 +132,7 @@ export default class Login extends Component {
             </div>
 
             {this.state.message && (
-              <div className="form-group">
+              <div className="form-group ml-3 mr-3">
                 <div className="alert alert-danger" role="alert">
                   {this.state.message}
                 </div>
diff --git a/external/front/src/components/auth/register.component.js b/external/front/src/components/auth/register.component.js
index 0bf2c60c..3fbf7293 100644
--- a/external/front/src/components/auth/register.component.js
+++ b/external/front/src/components/auth/register.component.js
@@ -26,6 +26,26 @@ const email = value => {
     }
 };
 
+const vname = value => {
+    if (value.length < 3 || value.length > 20) {
+        return (
+            <div className="alert alert-danger" role="alert">
+                The name must be between 3 and 20 characters.
+            </div>
+        );
+    }
+};
+
+const vsurname = value => {
+    if (value.length < 3 || value.length > 20) {
+        return (
+            <div className="alert alert-danger" role="alert">
+                The surname must be between 3 and 20 characters.
+            </div>
+        );
+    }
+};
+
 const vusername = value => {
     if (value.length < 3 || value.length > 20) {
         return (
@@ -50,11 +70,15 @@ export default class Register extends Component {
     constructor(props) {
         super(props);
         this.handleRegister = this.handleRegister.bind(this);
+        this.onChangeName = this.onChangeName.bind(this);
+        this.onChangeSurname = this.onChangeSurname.bind(this);
         this.onChangeUsername = this.onChangeUsername.bind(this);
         this.onChangeEmail = this.onChangeEmail.bind(this);
         this.onChangePassword = this.onChangePassword.bind(this);
 
         this.state = {
+            name: "",
+            surname: "",
             username: "",
             email: "",
             password: "",
@@ -63,6 +87,18 @@ export default class Register extends Component {
         };
     }
 
+    onChangeName(e) {
+        this.setState({
+            name: e.target.value
+        });
+    }
+
+    onChangeSurname(e) {
+        this.setState({
+            surname: e.target.value
+        });
+    }
+
     onChangeUsername(e) {
         this.setState({
             username: e.target.value
@@ -93,6 +129,8 @@ export default class Register extends Component {
 
         if (this.checkBtn.context._errors.length === 0) {
             AuthService.register(
+                this.state.name,
+                this.state.surname,
                 this.state.username,
                 this.state.password
             ).then(
@@ -121,12 +159,12 @@ export default class Register extends Component {
 
     render() {
         return (
-            <div className="col-md-12">
-                <div className="card card-container">
+            <div className="col-md-4 mx-auto mt-5">
+                <div className="card card-container" style={{"background-color": "#f8fcff"}}>
                     <img
                         src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
                         alt="profile-img"
-                        className="profile-img-card"
+                        className="profile-img-card mt-4"
                     />
 
                     <Form
@@ -137,7 +175,31 @@ export default class Register extends Component {
                     >
                         {!this.state.successful && (
                             <div>
-                                <div className="form-group">
+                                <div className="form-group ml-3 mr-3">
+                                    <label htmlFor="name">Name</label>
+                                    <Input
+                                        type="text"
+                                        className="form-control"
+                                        name="name"
+                                        value={this.state.name}
+                                        onChange={this.onChangeName}
+                                        validations={[required, vname]}
+                                    />
+                                </div>
+
+                                <div className="form-group ml-3 mr-3">
+                                    <label htmlFor="name">Surname</label>
+                                    <Input
+                                        type="text"
+                                        className="form-control"
+                                        name="surname"
+                                        value={this.state.surname}
+                                        onChange={this.onChangeSurname}
+                                        validations={[required, vsurname]}
+                                    />
+                                </div>
+
+                                <div className="form-group ml-3 mr-3">
                                     <label htmlFor="username">Username</label>
                                     <Input
                                         type="text"
@@ -149,7 +211,7 @@ export default class Register extends Component {
                                     />
                                 </div>
 
-                                <div className="form-group">
+                                <div className="form-group ml-3 mr-3">
                                     <label htmlFor="password">Password</label>
                                     <Input
                                         type="password"
@@ -161,14 +223,14 @@ export default class Register extends Component {
                                     />
                                 </div>
 
-                                <div className="form-group">
+                                <div className="form-group ml-3 mr-3">
                                     <button className="btn btn-primary btn-block">Sign Up</button>
                                 </div>
                             </div>
                         )}
 
                         {this.state.message && (
-                            <div className="form-group">
+                            <div className="form-group ml-3 mr-3">
                                 <div
                                     className={
                                         this.state.successful
diff --git a/external/front/src/services/auth.service.js b/external/front/src/services/auth.service.js
index 2639cc9b..2ef8cbff 100644
--- a/external/front/src/services/auth.service.js
+++ b/external/front/src/services/auth.service.js
@@ -12,7 +12,6 @@ class AuthService {
                 }
             })
             .then(response => {
-
                 if (response.data.length > 100) {
                     localStorage.setItem("username", username);
                     localStorage.setItem("user_token", response.data);
@@ -28,11 +27,10 @@ class AuthService {
         localStorage.removeItem("user_token");
     }
 
-    register(username, password, street, number) {
-        return axios.post(API_URL + "users", {
-            username: username,
-            password: password,
-            status: "created",
+    register(name, surname, username, password) {
+        return axios.post(API_URL + "customer", {
+            name: name,
+            surname: surname,
             address: {
                 street: "Green Dolphin Street",
                 street_no: "42"
@@ -43,11 +41,6 @@ class AuthService {
                 'Content-Type': 'application/json'
             }
         }).then(response => {
-            if (response.data.uuid) {
-                localStorage.setItem("user_uuid", response.data.uuid);
-                localStorage.setItem("username", response.data.username);
-            }
-
             return this.createLogin(username, password);
         });
     }