From ce7bf0918cb66f09ef1ce48f771f7a5db6007680 Mon Sep 17 00:00:00 2001
From: Dslak <dslaky@gmail.com>
Date: Thu, 9 Sep 2021 17:39:29 +0200
Subject: [PATCH] register form

---
 api/user_add.php                |  36 ++++++++---
 components/account/account.html | 106 +++++++++++++++++++++++++-------
 components/account/account.js   |  76 +++++++++++++++++++++++
 components/account/account.scss |  20 ++++++
 components/header/header.html   |   2 +-
 pages/index.ejs                 |   4 ++
 src/js/index.js                 |  11 ++++
 src/scss/global.scss            |  23 +++++++
 8 files changed, 246 insertions(+), 32 deletions(-)

diff --git a/api/user_add.php b/api/user_add.php
index cfd7f7b..55706bc 100644
--- a/api/user_add.php
+++ b/api/user_add.php
@@ -15,21 +15,37 @@ $conn = $databaseService->getConnection();
 
 $data = json_decode(file_get_contents("php://input"));
 
-$query = "INSERT INTO `users`
+$query = "SELECT * FROM `users` WHERE email = '".trim($data->email)."'";
+$stmt = $conn->prepare($query);
+
+if($stmt->execute()) {
+
+  if($stmt->rowCount()) {
+    http_response_code(400);
+    echo json_encode(
+      array(
+        "status" => 400,
+        "message" => "User exists"
+      ));
+  } else {
+
+    $query = "INSERT INTO `users`
           (`id`, `first_name`, `last_name`, `email`, `phone`, `address`, `city`, `zip_code`, `province`, `password`)
           VALUES (NULL, '".trim($data->first_name)."', '".trim($data->last_name)."', '".trim($data->email)."',
           '".trim($data->phone)."', '".trim($data->address)."', '".trim($data->city)."',
           '".trim($data->zip_code)."', '".trim($data->province)."', '".md5(trim($data->password))."')";
 
-$stmt = $conn->prepare($query);
-
-if($stmt->execute()) {
-  http_response_code(200);
-  echo json_encode(
-    array(
-      "status" => 200,
-      "id" => $conn->lastInsertId()
-    ));
+    $stmt = $conn->prepare($query);
+
+    if($stmt->execute()) {
+      http_response_code(200);
+      echo json_encode(
+        array(
+          "status" => 200,
+          "id" => $conn->lastInsertId()
+        ));
+    }
+  }
 } else {
   http_response_code(400);
   echo json_encode(
diff --git a/components/account/account.html b/components/account/account.html
index c90dc2d..0783f67 100644
--- a/components/account/account.html
+++ b/components/account/account.html
@@ -50,28 +50,96 @@
         }
       ?>
 
-      <div class="content col-12 col-md-8 mr-auto order-1 order-md-0">
-
       <?php
       if(!isset($_SESSION['AUTH'])) {
       ?>
-        <form class="login-form" action="/account/ordini" method="POST">
-          <div class="row">
-            <div class="col-12 col-md-6">
-              <span class="label">E-mail</span>
-              <input type="email" name="login_usr" class="input-text">
-            </div>
-            <div class="col-12 col-md-6">
-              <span class="label">Password</span>
-              <input type="password" name="login_pwd" class="input-text">
-            </div>
-            <div class="col-12 mt-4">
-              <button class="button button-brown button-big ml-auto">Accedi</button>
+      <div class="content col-12">
+        <div class="row">
+          <div class="col-12 col-md-4 mr-auto mb-5">
+            <span class="title">Sei già registrato?</span>
+            <form class="login-form" action="/account/ordini" method="POST">
+              <div class="row">
+                <div class="col-12">
+                  <span class="label">E-mail</span>
+                  <input type="email" name="login_usr" class="input-text">
+                </div>
+                <div class="col-12">
+                  <span class="label">Password</span>
+                  <input type="password" name="login_pwd" class="input-text">
+                </div>
+                <div class="col-12 mt-4">
+                  <button class="button button-brown button-big ml-auto">Accedi</button>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="col-12 col-md-7">
+            <span class="title">Non sei registrato?</span>
+            <div class="row new-user-form">
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">Nome *</span>
+                <input type="text" name="first_name" class="input input-text" required>
+              </div>
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">Cognome *</span>
+                <input type="text" name="last_name" class="input input-text" required>
+              </div>
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">E-mail *</span>
+                <input type="email" name="email" class="input input-text" required>
+              </div>
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">Telefono</span>
+                <input type="tel" name="phone" class="input input-text">
+              </div>
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">Indirizzo *</span>
+                <input type="text" name="address" class="input input-text" required>
+              </div>
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">Città *</span>
+                <input type="text" name="city" class="input input-text" required>
+              </div>
+              <div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
+                <span class="label">CAP *</span>
+                <input type="text" name="zip_code" class="input input-text" required>
+              </div>
+              <div class="col-12 col-md-4 pr-2 pr-md-4 mr-auto">
+                <span class="label">Provincia *</span>
+                <select name="province" class="input input-select" required>
+                  <?php
+                    foreach($PROV as $k => $p) {
+                      echo "<option value=\"".$k."\">".$p."</option>";
+                    }
+                  ?>
+                </select>
+              </div>
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">Scegli una password *</span>
+                <input type="password" name="password" class="input input-text" required>
+                <span class="font-10">deve essere di almeno 8 caratteri contenere almeno un numero, un carattere maiuscolo, uno minuscolo, sono consentiti i seguenti caratteri speciali: @$!%*#?&^+-</span>
+              </div>
+              <div class="col-12 col-md-6 pr-2 pr-md-4">
+                <span class="label">Conferma password *</span>
+                <input type="password" name="password_confirm" class="input input-text" required>
+              </div>
+
+              <div class="col-12 mt-4">
+                <button class="register button button-brown button-big ml-auto">Registrati</button>
+              </div>
             </div>
           </div>
-        </form>
+        </div>
+      </div>
+
+
+
       <?php
       } else {
+      ?>
+
+      <div class="content col-12 col-md-8 mr-auto order-1 order-md-0">
+        <?php
           if($getQ[1] == 'indirizzo') {
       ?>
         <form method="post">
@@ -201,7 +269,8 @@
               $p = mysqli_fetch_array($qp);
               ?>
               <div class="row no-gutters detail-row">
-                <div class="col-12">Prodotto: <?= $p['type'].' - '.$p['name'];?></div>
+                <div class="col-12 row-title"><?= $p['name'];?></div>
+                <!--<div class="col-12"><?= $p['type'];?></div>-->
                 <div class="col-12">Quantità: <?= $item->qty;?></div>
                 <div class="col-12">Prezzo: <?= money_format('%.2n', $item->price);?></div>
               </div>
@@ -211,13 +280,8 @@
           </div>
         </div>
 
-
-
         <?php
           }
-        ?>
-
-      <?php
         }
       }
       ?>
diff --git a/components/account/account.js b/components/account/account.js
index 6b2c258..86bb829 100644
--- a/components/account/account.js
+++ b/components/account/account.js
@@ -7,6 +7,8 @@ $(document).ready( () => {
 
     const pwdform = component.find('#pwdform')
     const updatePassword = pwdform.find('.update-password')
+    const register = component.find('.register')
+    const registerForm = component.find('.new-user-form')
 
     const orders = component.find('.order-row')
 
@@ -35,6 +37,80 @@ $(document).ready( () => {
       checkForm()
     })
 
+    register.off('.click').on('click.click', () => {
+      const inputs = registerForm.find('.input')
+      const passwords = registerForm.find('.input[type="password"]')
+      let errors = 0
+
+      inputs.each( (i,e) => {
+        const input = $(e)
+        const type = input.prop('type')
+        const required = input.prop('required')
+
+        if(required) {
+          switch(type) {
+            case 'text':
+            case 'select-one':
+              if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) {
+              } else {
+                if(!input.val().length) {
+                  input.addClass('error')
+                  errors++
+                } else { input.removeClass('error') }
+              }
+              break;
+            case 'email':
+              if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+                  .test(input.val())) {
+                input.addClass('error')
+                errors++
+              } else { input.removeClass('error') }
+              break;
+            case 'password':
+              if(!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&^+-])[A-Za-z\d@$!%*#?&^+-]{8,}$/
+                  .test(input.val())) {
+                input.addClass('error')
+                errors++
+              } else { input.removeClass('error') }
+              break;
+            case 'checkbox':
+              if(!input.is(':checked')) {
+                input.closest('.checkbox').addClass('error')
+                errors++
+              } else {
+                input.closest('.checkbox').removeClass('error')
+              }
+              break;
+          }
+        }
+      })
+
+      if(passwords[0].value != passwords[1].value) {
+        $(passwords[1]).addClass('error')
+        errors++
+      } else {
+        $(passwords[1]).removeClass('error')
+      }
+
+      if(!errors) {
+        let body = {}
+        inputs.each( (i,e) => {
+          const input = $(e)
+          const type = input.prop('type')
+          const name = input.prop('name')
+          body[name] = input.val()
+        })
+
+        Apis.addUser(body).then( (data) => {
+          Apis.notification("Account aggiunto correttamente!")
+        }).catch( (error) => {
+          console.error(error)
+          Apis.notification("ATTENZIONE: L'utente che stai cercando di inserire è già presente nel database")
+        })
+
+      }
+    })
+
     const checkForm = () => {
       console.log('checkForm')
       const inputs = component.find('.input')
diff --git a/components/account/account.scss b/components/account/account.scss
index c435d7a..d1ed124 100644
--- a/components/account/account.scss
+++ b/components/account/account.scss
@@ -81,6 +81,11 @@
           border-bottom: 1px solid $black-alpha;
           padding: 10px 0;
 
+          .row-title {
+            @include font-style($font-serif, 'bold', $font-18);
+            color: $brown;
+          }
+
           &:last-of-type {
             border: none;
           }
@@ -88,6 +93,10 @@
       }
     }
 
+    .new-user-form {
+
+    }
+
   }
 
   .sections {
@@ -119,6 +128,17 @@
   }
 }
 
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-account {
+    .content {
+      .new-user-form {
+        //border-left: 1px dotted $gray;
+      }
+    }
+  }
+}
+
+
 @keyframes blinker {
   0% { opacity: 1; }
   25% { opacity: .5; }
diff --git a/components/header/header.html b/components/header/header.html
index c542c48..8f9ca36 100644
--- a/components/header/header.html
+++ b/components/header/header.html
@@ -18,7 +18,7 @@
             if($_SESSION['AUTH']) {
               echo $_SESSION['AUTH']['first_name'].' '.$_SESSION['AUTH']['last_name'];
             } else {
-              echo "Log-in";
+              echo "Area utente";
             }
           ?>
         </span>
diff --git a/pages/index.ejs b/pages/index.ejs
index 1dff8f3..dc31ae1 100644
--- a/pages/index.ejs
+++ b/pages/index.ejs
@@ -66,5 +66,9 @@
       <img src="/images/logoHeader.png" class="spinner">
     </div>
 
+    <div class="notification">
+    aaa
+    </div>
+
   </body>
 </html>
diff --git a/src/js/index.js b/src/js/index.js
index 6a0d258..5766164 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -180,3 +180,14 @@ window.Apis.saveOrder = (profile, cart, token, uid, total, paid = false) => {
     })
   })
 }
+
+
+window.Apis.notification = (text) => {
+  const notification = $('.notification')
+  notification.text(text).fadeIn(10, () => {
+    setTimeout(() => {
+      notification.fadeOut(300)
+    },5000)
+  })
+}
+
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 8094303..ba3f806 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -27,6 +27,21 @@ body {
       animation: spinner 2s linear infinite;
     }
   }
+
+  .notification {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 10px 20px;
+    @include font-style($font-sans, 'regular-italic', $font-16);
+    color: $white;
+    text-align: center;
+    background: $olive-dark;
+    animation: blink 3s linear;
+    z-index: 200;
+  }
 }
 
 
@@ -164,6 +179,14 @@ button {
   100% {opacity: 1;}
 }
 
+@keyframes blink {
+  0% { opacity: 1; }
+  25% { opacity: .6; }
+  50% { opacity: 1; }
+  75% { opacity: .6; }
+  100% { opacity: 1; }
+}
+
 .debug-border {
   border: 1px solid red;
 }