add password recovery

api/send_mail.php

@@ -4,7 +4,7 @@ use PHPMailer\PHPMailer\SMTP;
 use PHPMailer\PHPMailer\Exception;
 require 'vendor/autoload.php';
 
-function sendEmail($toEmail, $toName, $subject, $body) {
+function sendEmail($toEmail, $toName, $subject, $body, $from = 'ordini') {
 
   $mail = new PHPMailer(true);
 
@@ -18,7 +18,7 @@ function sendEmail($toEmail, $toName, $subject, $body) {
     $mail->SMTPSecure = "ssl";
     $mail->Port       = 465;
 
-    $mail->setFrom('ordini@iolovolio.com', 'IoLovOlio');
+    $mail->setFrom($from.'@iolovolio.com', 'IoLovOlio');
     $mail->addAddress(trim($toEmail), "$toName");
 
     $mail->isHTML(true);

api/user_add.php

@@ -19,7 +19,6 @@ $data = json_decode(file_get_contents("php://input"));
 $query = "SELECT * FROM `users` WHERE email = '".trim($data->email)."'";
 $stmt = $conn->prepare($query);
 
-
   $toEmail = trim($data->email);
   $toName = trim($data->first_name)." ".trim($data->last_name);
   $subject = 'Iolovolio - Registrazione';
@@ -50,7 +49,7 @@ if($stmt->execute()) {
       ));
   } else {
 
-    $sent = sendEmail($toEmail, $toName, $subject, $body);
+    $sent = sendEmail($toEmail, $toName, $subject, $body, 'noreply');
     if($sent === true) {
 
       $query = "INSERT INTO `users`

components/account/account.html

@@ -57,7 +57,7 @@
         <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">
+            <form class="login-form <?= $_POST['login_usr'] && $_POST['login_pwd'] ? 'error' : '';?>" action="/account/ordini" method="POST">
               <div class="row">
                 <div class="col-12">
                   <span class="label">E-mail</span>
@@ -67,6 +67,9 @@
                   <span class="label">Password</span>
                   <input type="password" name="login_pwd" class="input-text">
                 </div>
+                <div class="col-12 text-right">
+                  <a href="/recupera-password" class="text-black font-12 d-block pt-2">Hai dimenticato la password?</a>
+                </div>
                 <div class="col-12 mt-4">
                   <button class="button button-brown button-big ml-auto">Accedi</button>
                 </div>

components/account/account.js

@@ -9,6 +9,9 @@ $(document).ready( () => {
     const updatePassword = pwdform.find('.update-password')
     const register = component.find('.register')
     const registerForm = component.find('.new-user-form')
+    const loginForm = component.find('.login-form')
+
+    if(loginForm.hasClass('error')) Apis.notification('ERRORE: Username o password errate.')
 
     const orders = component.find('.order-row')
 
@@ -115,7 +118,6 @@ $(document).ready( () => {
     })
 
     const checkForm = () => {
-      console.log('checkForm')
       const inputs = component.find('.input')
       const passwords = component.find('.input[type="password"]')
       let errors = 0

components/account/account.scss

@@ -37,6 +37,13 @@
       padding: 15px 0 5px 0;
     }
 
+    .errors {
+      display: block;
+      @include font-style($font-sans, 700, $font-16);
+      color: $red;
+      padding: 15px 0 5px 0;
+    }
+
     .input {
       &.error {
         border: 1px solid $red;

components/breadcrumb/breadcrumb.html

@@ -22,6 +22,9 @@
     case 'account':
         $levels[0] = array('account', '/account');
     break;
+    case 'recupera-password':
+        $levels[0] = array('Recupera password', '/recupera-password');
+    break;
     case 'checkout':
         $levels[0] = array('checkout', '/checkout');
     break;

components/passwordRecovery/passwordRecovery.html

@@ -0,0 +1,80 @@
+<?php
+  include_once './api/send_mail.php';
+  @include('components/breadcrumb/breadcrumb.php');
+  setlocale(LC_MONETARY, 'it_IT.UTF-8');
+
+  if(isset($_POST['reset_usr'])) {
+
+    $query = "SELECT * FROM `users` WHERE email = '".trim($_POST['reset_usr'])."'";
+    $q = mysqli_query($conn, $query);
+    if(mysqli_affected_rows($conn)) {
+      $new_password = base_convert(date('Y-m-d H:i:s'), 10, 36);
+      $user = mysqli_fetch_array($q);
+
+      $query = "UPDATE `users` SET `password` = '".md5($new_password)."' WHERE id = '".$user['id']."'";
+      $q = mysqli_query($conn, $query);
+
+      $toEmail = $user['email'];
+      $toName = $user['first_name']." ".$user['last_name'];
+      $subject = 'Iolovolio - Reimposta password';
+      $body = emailHeader();
+
+      $body .= "<tr><td colspan=\"4\" style=\"padding: 10px 20px\">Ciao ".$user['first_name'].",<br>".
+                "ricevi questa mail perchè hai richiesto il reset della tua password su Iolovolio, di seguito troverai la tua nuova password temporanea, ti consigliamo di modificarla al primo accesso:<br><br>".
+                "Username: ".$user['email']."<br>".
+                "Nuova password: ".$new_password."<br>".
+                "</td></tr>";
+
+      $body .= "<tr><td colspan=\"4\" style=\"padding: 10px 20px\">Grazie,<br>Servizio Clienti Iolovolio<br><br></td></tr>";
+      $body .= emailFooter();
+
+
+      $sent = sendEmail($toEmail, $toName, $subject, $body, 'noreply');
+      if($sent === true) {
+        $message = "Password reimpostata correttamente!<br>
+                    Ti abbiamo inviato la nuova password provvisoria all'indirizzo ".trim($_POST['reset_usr']);
+      } else {
+        $message = "Erore invio mail!<br>
+                    Contatta l'assistenza";
+      }
+
+    } else {
+      $message = "ERRORE: L'indirizzo email inserito non è presente nel database!<br>Controlla l'indirizzo inserito e riprova.";
+    }
+  }
+
+?>
+
+<div class="component-passwordRecovery">
+  <div class="container">
+    <div class="row">
+
+      <?php
+        if($message) {
+          echo "<div class=\"message col-12\">$message</div>";
+        }
+      ?>
+
+      <div class="content col-12">
+        <div class="row">
+          <div class="col-12 col-md-6 mb-5">
+            <span class="title">Hai dimenticato la password?</span>
+            <span class="subtitle">Inserisci l'indirizzo email-con il quale ti sei registrato</span>
+            <form class="reset-form <?= $no_user ? 'error' : '';?>" action="/recupera-password" method="POST">
+              <div class="row">
+                <div class="col-12">
+                  <span class="label">E-mail</span>
+                  <input type="email" name="reset_usr" class="input input-text">
+                </div>
+                <div class="col-12 mt-4">
+                  <button class="button button-brown button-big mr-auto">Reimposta password</button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

components/passwordRecovery/passwordRecovery.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - passwordRecovery')
+
+})

components/passwordRecovery/passwordRecovery.scss

@@ -0,0 +1,60 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-passwordRecovery {
+  padding: 10px 0 40px 0;
+  min-height: 100vh;
+
+  .message {
+    color: $white;
+    background: $brown;
+    padding: 10px;
+    margin-bottom: 20px;
+    @include font-style($font-sans, 'regular', $font-12);
+    animation: blinker 2s linear 1;
+  }
+
+  .content {
+
+    .title {
+      display: block;
+      @include font-style($font-serif, 400, $font-32);
+      color: $black;
+      height: 50px;
+    }
+
+    .subtitle {
+      display: block;
+      @include font-style($font-sans, 700, $font-16);
+      color: $gray;
+      height: 40px;
+    }
+
+    .label {
+      display: block;
+      @include font-style($font-sans, 700, $font-16);
+      color: $gray;
+      padding: 15px 0 5px 0;
+    }
+
+    .errors {
+      display: block;
+      @include font-style($font-sans, 700, $font-16);
+      color: $red;
+      padding: 15px 0 5px 0;
+    }
+
+    .input {
+      max-width: 400px;
+      &.error {
+        border: 1px solid $red;
+      }
+    }
+
+    .submit {
+      @include font-style($font-serif, 700, $font-16);
+    }
+  }
+}
+
+

components/sectionHeader/sectionHeader.html

@@ -16,6 +16,9 @@
     case 'account':
         $section_label = 'account';
     break;
+    case 'recupera-password':
+        $section_label = 'recupera password';
+    break;
     case 'acquistare':
     case 'carrello':
     case 'checkout':

pages/recupera-password.ejs

@@ -0,0 +1,2 @@
+
+${require('../components/passwordRecovery/passwordRecovery.html')}

src/scss/main.scss

@@ -25,3 +25,4 @@
 @import "./components/checkout/checkout.scss";
 @import "./components/thankyou/thankyou.scss";
 @import "./components/account/account.scss";
+@import "./components/passwordRecovery/passwordRecovery.scss";