jun 13

2024-06-13 11:06:39 +02:00
parent 8851ff41b4
commit 65ba6fad57
10 changed files with 256 additions and 53 deletions
--- a/about.html
+++ b/about.html
@@ -87,6 +87,10 @@
            </ul>
        </div>
        <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
+        <div class="register">
+            <a class="register-link" href="login.html" >Log in</a>
+            <a class="register-link" href="signup.php" >Sign up</a>
+          </div>

        <!-- site navigation-->

--- a/cases.html
+++ b/cases.html
@@ -88,6 +88,10 @@
            </ul>
        </div>
        <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
+        <div class="register">
+            <a class="register-link" href="login.html" >Log in</a>
+            <a class="register-link" href="signup.php" >Sign up</a>
+          </div>

        <!-- site navigation-->

--- a/contacts.html
+++ b/contacts.html
@@ -87,6 +87,10 @@
            </ul>
        </div>
        <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
+        <div class="register">
+            <a class="register-link" href="login.html" >Log in</a>
+            <a class="register-link" href="signup.php" >Sign up</a>
+          </div>

        <!-- site navigation-->

--- a/index.html
+++ b/index.html
@@ -91,7 +91,7 @@
    <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
    <div class="register">
      <a class="register-link" href="login.html" >Log in</a>
-      <a class="register-link" href="signup.html" >Sign up</a>
+      <a class="register-link" href="signup.php" >Sign up</a>
    </div>


--- a/login.html
+++ b/login.html
@@ -39,7 +39,7 @@

    <script type="text/javascript">
        document.getElementById("signup-button").onclick = function () {
-            location.href = "signup.html";
+            location.href = "signup.php";
        };

    </script>
--- a/news.html
+++ b/news.html
@@ -88,6 +88,10 @@
            </ul>
        </div>
        <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
+        <div class="register">
+            <a class="register-link" href="login.html" >Log in</a>
+            <a class="register-link" href="signup.php" >Sign up</a>
+          </div>

        <!-- site navigation-->

--- a/php/register.php
+++ b/php/register.php
@@ -5,35 +5,48 @@ require 'core.inc.php';
 if (!loggedin()) {
    if (
        isset($_POST['name']) && isset($_POST['email'])
-        && isset($_POST['password']) && isset($_POST['password_again'])
+        && isset($_POST['password']) && isset($_POST['password_again']) && isset($_POST['birth_day'])
+        && isset($_POST['birth_month']) && isset($_POST['birth_year'])
    ) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $password = $_POST['password'];
        $password_again = $_POST['password_again'];
        $password_hash = md5($password);
-        $upperCase = preg_match('/[A-Z]/', $password); 
+        $birth_day = $_POST['birth_day'];
+        $birth_month = $_POST['birth_month'];
+        $birth_year = $_POST['birth_year'];

        if (
            !empty($name) && !empty($password) && !empty($password_again) &&
-            !empty($email)
+            !empty($email) && !empty($birth_day) && !empty($birth_month) && !empty($birth_year)
        ) {
            if (strlen($name) > 30) {
                echo 'Please ahear to maxlength of fields';
+            } elseif (preg_match("/\d/", $name) || preg_match("/\W/", $name)) {
+                echo 'Your name must contains only letters!';
            } else {
                if ($password != $password_again) {
                    echo 'Passwords do not match';
-                }elseif (strlen($password) < 6){
+                } elseif (strlen($password) <= 8) {
                    echo 'Password is weak!';
-                }
-                 else {
+                } elseif (!preg_match("/\d/", $password)) {
+                    echo 'Password must have one number at least!';
+                } elseif (!preg_match("#[A-Z]+#", $password)) {
+                    echo 'Password must have one capital letter at least!';
+                } elseif (!preg_match("#[a-z]+#", $password)) {
+                    echo 'Password must have one letter at least!';
+                } elseif (!preg_match("/\W/", $password)) {
+                    echo 'Password must have one special carachter at least!';
+                } else {
                    $query = "SELECT `email` FROM `globaly_accounts` WHERE `email` ='$email'";
                    $query_run = mysqli_query($con, $query);
                    if (mysqli_num_rows($query_run) == 1) {
                        echo 'The email ' . $email . 'already exists';
                    } else {
                        $query = "INSERT INTO `globaly_accounts` VALUES (NULL ,'" . mysqli_real_escape_string($con, $name) .
-                            "','" . mysqli_real_escape_string($con, $email) . "','" . mysqli_real_escape_string($con, $password_hash) . "')";
+                            "','" . mysqli_real_escape_string($con, $email) . "','" . mysqli_real_escape_string($con, $password_hash) . "','" .
+                            mysqli_real_escape_string($con, $birth_day) . "','" . mysqli_real_escape_string($con, $birth_month) . "','" . mysqli_real_escape_string($con, $birth_year)  . "')";
                        if ($query_run = mysqli_query($con, $query)) {
                            echo '<script>alert("You are registerd!")</script>';
                            header('Location: ../index.html');
--- a/services.html
+++ b/services.html
@@ -88,6 +88,10 @@
            </ul>
        </div>
        <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
+        <div class="register">
+            <a class="register-link" href="login.html" >Log in</a>
+            <a class="register-link" href="signup.php" >Sign up</a>
+          </div>

        <!-- site navigation-->

--- a/signup.html
+++ b/signup.html
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
-      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css"
-      integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-      crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="style/style.css">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
-  
-    <title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>
-</head>
-<body>
-    <div class="form d-flex flex-column align-items-center justify-content-center my-md-5 mb-5 mb-lg-0">
-        <div class="headline-card d-flex flex-column align-items-center justify-content-center mt-4">
-          <h2>Signup</h2>
-          <img class="line-img" src="assets/images/line.png" alt="">
-        </div>
-        <h6>Create your account</h6>
-        <form action="php/register.php" method="post">
-          <div class="form-container-bot d-flex flex-column align-items-start justify-content-center" >
-            <input class="input-text" type="text" placeholder="Name" name="name">
-            <input class="input-text" type="text" placeholder="Email" name="email">
-            <input class="input-text" type="password" placeholder="Password" name="password">
-            <input class="input-text" type="password" placeholder="Confirm Password" name="password_again">
-            <input class="view-more" type="submit" value="Signup">
-          </div>
-        </form>
-         
-
-
-</body>
-
-
-</html>
--- a/signup.php
+++ b/signup.php
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="style/style.css">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+  <title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>
+
+  <style>
+    #pswd_info {
+      position: absolute;
+      bottom: 35%;
+      bottom: -115px\9;
+      /* IE Specific */
+      right: 1%;
+      width: 400px;
+      padding: 15px;
+      background: #fefefe;
+      font-size: .875em;
+      border-radius: 5px;
+      box-shadow: 0 1px 3px #ccc;
+      border: 1px solid #ddd;
+    }
+
+    #pswd_info {
+      display: none;
+    }
+
+    #pswd_info h4 {
+      margin: 0 0 10px 0;
+      padding: 0;
+      font-weight: normal;
+    }
+
+    #pswd_info::before {
+      content: "\25B2";
+      position: absolute;
+      top: -12px;
+      left: 45%;
+      font-size: 14px;
+      line-height: 14px;
+      color: #ddd;
+      text-shadow: none;
+      display: block;
+    }
+
+    .invalid {
+      padding-left: 22px;
+      line-height: 24px;
+      color: #ec3f41;
+    }
+
+    .valid {
+      padding-left: 22px;
+      line-height: 24px;
+      color: #3a7d34;
+    }
+
+    @media screen and (min-width: 768px) {
+      #pswd_info {
+
+        bottom: 42%;
+        right: 30%;
+      }
+    }
+
+    @media screen and (min-width: 992px) {
+      #pswd_info {
+
+        bottom: 22%;
+        right: 38%;
+      }
+    }
+
+    .date-container {
+      width: 100%;
+      display: flex;
+      span{
+        margin-right: 20px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="form d-flex flex-column align-items-center justify-content-center my-md-5 mb-5 mb-lg-0">
+    <div class="headline-card d-flex flex-column align-items-center justify-content-center mt-4">
+      <h2>Signup</h2>
+      <img class="line-img" src="assets/images/line.png" alt="">
+    </div>
+    <h6>Create your account</h6>
+    <form action="php/register.php" method="post">
+      <div class="form-container-bot d-flex flex-column align-items-start justify-content-center">
+        <input class="input-text" type="text" placeholder="Name" name="name">
+        <input class="input-text" type="text" placeholder="Email" name="email">
+        <input class="input-text" type="password" id="password" placeholder="Password" name="password">
+        <input class="input-text" type="password" placeholder="Confirm Password" name="password_again">
+        <div class="date-container">
+        <span>
+            <select name="birth_day">
+              <?php
+              $start_date = 1;
+              $end_date   = 31;
+              for ($j = $start_date; $j <= $end_date; $j++) {
+                echo '<option value=' . $j . '>' . $j . '</option>';
+              }
+              ?>
+            </select>
+          </span>
+          <span>
+            <select name="birth_month">
+              <?php for ($m = 1; $m <= 12; ++$m) {
+                $month_label = date('F', mktime(0, 0, 0, $m, 1));
+              ?>
+                <option value="<?php echo $month_label; ?>"><?php echo $month_label; ?></option>
+              <?php } ?>
+            </select>
+          </span>
+          <span>
+            <select name="birth_year">
+              <?php
+              $year = date('Y');
+              $min = $year - 60;
+              $max = $year;
+              for ($i = $max; $i >= $min; $i--) {
+                echo '<option value=' . $i . '>' . $i . '</option>';
+              }
+              ?>
+            </select>
+          </span>
+        </div>
+        <input class="view-more" type="submit" value="Signup">
+      </div>
+    </form>
+    <div id="pswd_info">
+      <h4>Password must meet the following requirements:</h4>
+      <ul>
+        <li id="letter" class="invalid">At least <strong>one letter</strong></li>
+        <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
+        <li id="number" class="invalid">At least <strong>one number</strong></li>
+        <li id="character" class="invalid">At least <strong>one special character</strong></li>
+        <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
+      </ul>
+    </div>
+
+    <script>
+      $(document).ready(function() {
+        // Function to validate password
+        function validatePassword() {
+          var pswd = $('#password').val();
+
+          // Validate the length
+          if (pswd.length < 8) {
+            $('#length').removeClass('valid').addClass('invalid');
+          } else {
+            $('#length').removeClass('invalid').addClass('valid');
+          }
+
+          // Validate letter
+          if (pswd.match(/[A-Za-z]/)) {
+            $('#letter').removeClass('invalid').addClass('valid');
+          } else {
+            $('#letter').removeClass('valid').addClass('invalid');
+          }
+
+          // Calidate Capital letter
+          if (pswd.match(/[A-Z]/)) {
+            $('#capital').removeClass('invalid').addClass('valid');
+          } else {
+            $('#capital').removeClass('valid').addClass('invalid');
+          }
+
+          // Validate Number 
+          if (pswd.match(/[0-9]/)) {
+            $('#number').removeClass('invalid').addClass('valid');
+          } else {
+            $('#number').removeClass('valid').addClass('invalid');
+          }
+
+          // Validate special character
+          if (pswd.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/)) {
+            $('#character').removeClass('invalid').addClass('valid');
+          } else {
+            $('#character').removeClass('valid').addClass('invalid');
+          }
+        }
+
+        // Bind events
+        $('#password').on('keyup focus blur', function() {
+          $('#pswd_info').show();
+          validatePassword();
+        });
+
+        $('#password').blur(function() {
+          $('#pswd_info').hide();
+        });
+      });
+    </script>
+
+
+
+</body>
+
+
+</html>