From c717c9e4c1a52bf01f556acd28c1162e7ae8374d Mon Sep 17 00:00:00 2001
From: Andrew Trieu <andrew.trieu@kempower.com>
Date: Sat, 4 Feb 2023 15:32:11 +0200
Subject: [PATCH] Add registration feature

---
 chat.html => chat.php      |  0
 chatline.sql               | 96 ++++++++++++++++++++++++++++++++++++++
 css/style.css              |  1 +
 home.html => home.php      |  0
 register.html => index.php | 15 +++---
 js/register.js             | 27 +++++++++++
 login.html => login.php    |  2 +-
 php/config.php             | 11 +++++
 php/register.php           | 84 +++++++++++++++++++++++++++++++++
 9 files changed, 228 insertions(+), 8 deletions(-)
 rename chat.html => chat.php (100%)
 create mode 100644 chatline.sql
 rename home.html => home.php (100%)
 rename register.html => index.php (71%)
 create mode 100644 js/register.js
 rename login.html => login.php (96%)
 create mode 100644 php/config.php
 create mode 100644 php/register.php

diff --git a/chat.html b/chat.php
similarity index 100%
rename from chat.html
rename to chat.php
diff --git a/chatline.sql b/chatline.sql
new file mode 100644
index 0000000..5b94b15
--- /dev/null
+++ b/chatline.sql
@@ -0,0 +1,96 @@
+-- phpMyAdmin SQL Dump
+-- version 5.2.1
+-- https://www.phpmyadmin.net/
+--
+-- Host: localhost
+-- Generation Time: Feb 22, 2024 at 06:45 PM
+-- Server version: 10.4.32-MariaDB
+-- PHP Version: 8.2.12
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+START TRANSACTION;
+SET time_zone = "+00:00";
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */
+;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */
+;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */
+;
+/*!40101 SET NAMES utf8mb4 */
+;
+--
+-- Database: `chatline`
+--
+
+-- --------------------------------------------------------
+--
+-- Table structure for table `messages`
+--
+
+CREATE TABLE `messages` (
+  `msg_id` int(11) NOT NULL,
+  `get_msg_id` int(255) NOT NULL,
+  `post_msg_id` int(255) NOT NULL,
+  `msg` varchar(1000) NOT NULL,
+  `unique_id` int(255) NOT NULL
+) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci;
+-- --------------------------------------------------------
+--
+-- Table structure for table `users`
+--
+
+CREATE TABLE `users` (
+  `user_id` int(11) NOT NULL,
+  `unique_id` int(255) NOT NULL,
+  `first_name` varchar(255) NOT NULL,
+  `last_name` varchar(255) NOT NULL,
+  `email` varchar(255) NOT NULL,
+  `password` varchar(255) NOT NULL,
+  `img` varchar(255) DEFAULT NULL,
+  `status` varchar(255) NOT NULL
+) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci;
+--
+-- Indexes for dumped tables
+--
+
+--
+-- Indexes for table `messages`
+--
+ALTER TABLE `messages`
+ADD PRIMARY KEY (`msg_id`),
+  ADD KEY `FOREIGN` (`unique_id`) USING BTREE;
+--
+-- Indexes for table `users`
+--
+ALTER TABLE `users`
+ADD PRIMARY KEY (`user_id`),
+  ADD KEY `UNIQUE_ID` (`unique_id`) USING BTREE;
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `messages`
+--
+ALTER TABLE `messages`
+MODIFY `msg_id` int(11) NOT NULL AUTO_INCREMENT;
+--
+-- AUTO_INCREMENT for table `users`
+--
+ALTER TABLE `users`
+MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT;
+--
+-- Constraints for dumped tables
+--
+
+--
+-- Constraints for table `messages`
+--
+ALTER TABLE `messages`
+ADD CONSTRAINT `FOREIGN_MESSAGES_USERS` FOREIGN KEY (`unique_id`) REFERENCES `users` (`unique_id`) ON DELETE CASCADE ON UPDATE CASCADE;
+COMMIT;
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */
+;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */
+;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */
+;
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 7648f8a..b1a47d0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -49,6 +49,7 @@ body {
   background: #f8d7da;
   border: 1px solid #f5c6cb;
   margin-bottom: 10px;
+  display: none;
 }
 
 .form form .names {
diff --git a/home.html b/home.php
similarity index 100%
rename from home.html
rename to home.php
diff --git a/register.html b/index.php
similarity index 71%
rename from register.html
rename to index.php
index b4d34c8..bebe7b7 100644
--- a/register.html
+++ b/index.php
@@ -12,31 +12,31 @@
         <div class="wrapper">
             <section class="register form">
                 <header>Join us at ChatLine!</header>
-                <form action="#" >
-                    <div class="error">Error</div>
+                <form action="#" method="POST" enctype="multipart/form-data" autocomplete="off">
+                    <div class="error"></div>
                     <div class="names">
                         <div class="field">
                             <label>First name</label>
-                            <input type="text" placeholder="First name" required>
+                            <input type="text" name="first_name" placeholder="First name" required>
                         </div>
                         <div class="field">
                             <label>Last name</label>
-                            <input type="text" placeholder="Last name" required>
+                            <input type="text" name="last_name" placeholder="Last name" required>
                         </div>
                     </div>
                     <div>
                         <div class="field">
                             <label>Email</label>
-                            <input type="text" placeholder="Enter your email" required>
+                            <input type="text" name="email" placeholder="Enter your email" required>
                         </div>
                         <div class="field">
                             <label>Password</label>
-                            <input type="password" placeholder="Enter new password" required>
+                            <input type="password" name="password" placeholder="Enter new password" required>
                             <i class="fas fa-eye"></i>
                         </div>
                         <div class="image">
                             <label>Profile photo</label>
-                            <input type="file">
+                            <input type="file" name="image" accept="image/x-png,image/jpeg,image/jpg">
                         </div>
                         <div class="button">
                             <input type="submit" value="Register">
@@ -47,5 +47,6 @@
             </section>
         </div>
         <script src="js/password-visibility.js"></script>
+        <script src="js/register.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/js/register.js b/js/register.js
new file mode 100644
index 0000000..5e02182
--- /dev/null
+++ b/js/register.js
@@ -0,0 +1,27 @@
+const form = document.querySelector(".register form"),
+  continueBtn = form.querySelector(".button input"),
+  errorText = form.querySelector(".error");
+
+form.onsubmit = (e) => {
+  e.preventDefault();
+};
+
+continueBtn.onclick = () => {
+  let xhr = new XMLHttpRequest();
+  xhr.open("POST", "php/register.php", true);
+  xhr.onload = () => {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      if (xhr.status === 200) {
+        let data = xhr.response;
+        if (data === "success") {
+          location.href = "home.php";
+        } else {
+          errorText.style.display = "block";
+          errorText.textContent = data;
+        }
+      }
+    }
+  };
+  let formData = new FormData(form);
+  xhr.send(formData);
+};
diff --git a/login.html b/login.php
similarity index 96%
rename from login.html
rename to login.php
index 52b0e32..719cb1c 100644
--- a/login.html
+++ b/login.php
@@ -13,7 +13,7 @@
             <section class="register form">
                 <header>Login to ChatLine</header>
                 <form action="#" >
-                    <div class="error">Error</div>
+                    <div class="error"></div>
                     <div>
                         <div class="field">
                             <label>Email</label>
diff --git a/php/config.php b/php/config.php
new file mode 100644
index 0000000..07f6fd8
--- /dev/null
+++ b/php/config.php
@@ -0,0 +1,11 @@
+<?php
+  $hostname = "localhost:3200";
+  $username = "root";
+  $password = "";
+  $dbname = "chatline";
+
+  $conn = mysqli_connect($hostname, $username, $password, $dbname);
+  if(!$conn){
+    echo "Database connection error".mysqli_connect_error();
+  }
+?>
\ No newline at end of file
diff --git a/php/register.php b/php/register.php
new file mode 100644
index 0000000..5ebefef
--- /dev/null
+++ b/php/register.php
@@ -0,0 +1,84 @@
+<?php
+session_start();
+include_once "config.php";
+function escape($conn, $value) {
+    return mysqli_real_escape_string($conn, $value);
+}
+function isValidEmail($email) {
+    return filter_var($email, FILTER_VALIDATE_EMAIL);
+}
+function moveUploadedFile($tempFileName, $newFileName) {
+    return move_uploaded_file($tempFileName, "images/" . $newFileName);
+}
+function generateUniqueUserId() {
+    return rand(time(), 100000000);
+}
+function encryptPassword($password) {
+    return md5($password);
+}
+function fetchUserByEmail($conn, $email) {
+    $email = escape($conn, $email);
+    $sql = mysqli_query($conn, "SELECT * FROM users WHERE email = '{$email}'");
+    return mysqli_fetch_assoc($sql);
+}
+function insertUser($conn, $unique_id, $first_name, $last_name, $email, $encrypt_pass, $new_img_name, $status) {
+    return mysqli_query($conn, "INSERT INTO users (unique_id, first_name, last_name, email, password, img, status) VALUES ({$unique_id}, '{$first_name}','{$last_name}', '{$email}', '{$encrypt_pass}', '{$new_img_name}', '{$status}')");
+}
+function loginUser($user) {
+    $_SESSION["unique_id"] = $user["unique_id"];
+    echo "success";
+}
+if (!empty($_POST["first_name"]) || !empty($_POST["last_name"]) || !empty($_POST["email"]) || !empty($_POST["password"])) {
+    $first_name = escape($conn, $_POST["first_name"]);
+    $last_name = escape($conn, $_POST["last_name"]);
+    $email = escape($conn, $_POST["email"]);
+    $password = escape($conn, $_POST["password"]);
+    if (isValidEmail($email)) {
+        $existingUser = fetchUserByEmail($conn, $email);
+        if ($existingUser) {
+            echo "The email address $email already exists!";
+        } else {
+            if (isset($_FILES["image"])) {
+                $img_name = $_FILES["image"]["name"];
+                $img_type = $_FILES["image"]["type"];
+                $temp_file_name = $_FILES["image"]["tmp_name"];
+                $img_ext = pathinfo($img_name, PATHINFO_EXTENSION);
+                $allowedExtensions = ["jpeg", "png", "jpg"];
+                if (in_array($img_ext, $allowedExtensions) && in_array($img_type, ["image/jpeg", "image/jpg", "image/png", ])) {
+                    $time = time();
+                    $new_img_name = $time . $img_name;
+                    if (moveUploadedFile($temp_file_name, $new_img_name)) {
+                        $unique_id = generateUniqueUserId();
+                        $status = "Active now";
+                        $encrypt_pass = encryptPassword($password);
+                    } else {
+                        echo "An error occurred while uploading the image.";
+                        exit();
+                    }
+                } else {
+                    echo "Image must be of the following formats: JPEG, JPG, PNG.";
+                    exit();
+                }
+            } else {
+                $unique_id = generateUniqueUserId();
+                $status = "Active now";
+                $encrypt_pass = encryptPassword($password);
+            }
+            if (insertUser($conn, $unique_id, $first_name, $last_name, $email, $encrypt_pass, $new_img_name, $status)) {
+                $loggedInUser = fetchUserByEmail($conn, $email);
+                if ($loggedInUser) {
+                    loginUser($loggedInUser);
+                } else {
+                    echo "An error occurred. Please try again.";
+                }
+            } else {
+                echo "An error occurred. Please try again.";
+            }
+        }
+    } else {
+        echo "The email address $email is not valid!";
+    }
+} else {
+    echo "All input fields are required!";
+}
+?>
\ No newline at end of file