add php file

index.html → index.php

@@ -19,24 +19,24 @@
                     <div class="name-details">
                         <div class="field">
                             <label>First Name</label>
-                            <input type="text" placeholder="First Name">
+                            <input type="text" name="fname" placeholder="First Name" required>
                         </div>
                         <div class="field">
                             <label>Last Name</label>
-                            <input type="text" placeholder="Last Name">
+                            <input type="text" name="lname" placeholder="Last Name" required>
                         </div>
                         <div class="field">
                             <label>Email Address</label>
-                            <input type="text" placeholder="Enter your Email">
+                            <input type="text" name="email" placeholder="Enter your Email" required>
                         </div>
                         <div class="field-pass">
                             <label>Password</label>
-                            <input type="text" placeholder="Enter your password">
+                            <input type="password" name="password" placeholder="Enter your password" required>
                             <i class="fas fa-eye"></i>
                         </div>
                         <div class="field">
                             <label>Select your Profile</label>
-                            <input type="file">
+                            <input type="file" name="image" required>
                         </div>
                         <div class="field-gochat-btn">
                             <input type="submit" value="GO TO CHAT">
@@ -47,6 +47,7 @@
             </section>
         </div>
         
-        <script src="" async defer></script>
+        <script src="javascript/index.js"></script>
+        <script src="javascript/signup.js"></script>
     </body>
 </html>
\ No newline at end of file

javascript/index.js

+document.addEventListener("DOMContentLoaded", function() {
+    const pswrdFieldSignup = document.querySelector(".formsignup .field-pass input[type='password']");
+    const toggleBtnSignup = document.querySelector(".formsignup .field-pass i");
+
+    toggleBtnSignup.onclick = () => {
+        if (pswrdFieldSignup.type === "password") {
+            pswrdFieldSignup.type = "text";
+            toggleBtnSignup.classList.add("active");
+        } else {
+            pswrdFieldSignup.type = "password";
+            toggleBtnSignup.classList.remove("active");
+        }
+    };
+});

javascript/login.js

+document.addEventListener("DOMContentLoaded", function() {
+    const pswrdFieldLogin = document.querySelector(".formlogin .field-pass input[type='password']");
+    const toggleBtnLogin = document.querySelector(".formlogin .field-pass i");
+
+    toggleBtnLogin.onclick = () => {
+        if (pswrdFieldLogin.type === "password") {
+            pswrdFieldLogin.type = "text";
+            toggleBtnLogin.classList.add("active");
+        } else {
+            pswrdFieldLogin.type = "password";
+            toggleBtnLogin.classList.remove("active");
+        }
+    };
+});
\ No newline at end of file

javascript/signup.js

+const form = document.querySelector(".formsignup form"),
+continueBtn = form.querySelector(".field-gochat-btn input");
+
+form.onsumit = (e)=>{
+    e.preventDefault(); //preventing form from submitting
+}
+
+continueBtn.onclick = ()=>{
+    // Ajax
+    let xhr = new XMLHttpRequest(); //creating xml object
+    xhr.open("POST", "php/signup.php", true);
+    xhr.onload = ()=>{
+        if(xhr.readyState === XMLHttpRequest.DONE){
+            if(xhr.status === 200){
+                let data = xhr.response;
+                console.log(data);
+            }
+        }
+    }
+    //we have to send the form data through ajax to php
+    let formData = new FormData(form); //creating new formData
+    xhr.send(formData);
+}
\ No newline at end of file

javascript/user.js

+const searchBar = document.querySelector(".search input");
+const searchIcon = document.querySelector(".search button");
+
+searchIcon.onclick = () => {
+  searchBar.classList.toggle("show");
+  searchIcon.classList.toggle("active");
+  searchBar.focus();
+  
+  if (searchBar.classList.contains("active")) {
+    searchBar.value = "";
+    searchBar.classList.remove("active");
+  }
+};

login.html → login.php

@@ -23,7 +23,7 @@
                         </div>
                         <div class="field-pass">
                             <label>Password</label>
-                            <input type="text" placeholder="Enter your password">
+                            <input type="password" placeholder="Enter your password">
                             <i class="fas fa-eye"></i>
                         </div>
                         <div class="field-gochat-btn">
@@ -35,6 +35,6 @@
             </section>
         </div>
         
-        <script src="" async defer></script>
+        <script src="javascript/login.js"></script>
     </body>
 </html>
\ No newline at end of file

php/config.php

+<?php
+    $conn = mysqli_connect("localhost","root","","gochat");
+    if(!$conn){
+        echo "Database connected". mysqli_connect_error();
+    }
+?>
\ No newline at end of file

php/signup.php

+<?php
+    include_once "config.php";
+    $fname =mysqli_real_escape_string($conn ,$_POST['fname']);
+    $lname =mysqli_real_escape_string($conn ,$_POST['lname']);
+    $email =mysqli_real_escape_string($conn ,$_POST['email']);
+    $password =mysqli_real_escape_string($conn ,$_POST['password']);
+
+    if(!empty($fname) && !empty($lname) && !empty($email) && !empty($password)){
+        if(filter_var($email, FILTER_VALIDATE_EMAIL)){
+            // If email is vaild
+        }else{
+            echo "$email - This is not a valid email!";
+        }
+    }else{
+        echo "All input field required!";
+    }
+?>
\ No newline at end of file

style/login.css

@@ -17,7 +17,7 @@ body {
 
 /* Style the form container */
 .formlogin {
-    background-color: #EB984E;
+    background-color:  #fff;
     border-radius: 8px;
     box-shadow: 0 0 128px rgba(0, 0, 0, 0.1);
     width: 400px;
@@ -81,6 +81,10 @@ body {
     transform: translateY(-50%);
     cursor: pointer;
 }
+.formlogin form .field-pass i.active::before{
+    content: "\f070";
+    color: #333;
+}
 
 /* Style the error message text */
 .error-txt {
@@ -91,6 +95,7 @@ body {
     border-radius: 5px;
     margin-bottom: 10px;
     border: 1px solid #f5c6cb;
+    display: none;
 }
 
 /* Style the login link */

style/signup.css

@@ -16,7 +16,7 @@ body {
 
 /* Style the form container */
 .formsignup {
-    background-color: #EB984E;
+    background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 0 128px rgba(0, 0, 0, 0.1);
     width: 400px;
@@ -80,6 +80,10 @@ body {
     transform: translateY(-50%);
     cursor: pointer;
 }
+.formsignup form .field-pass i.active::before{
+    content: "\f070";
+    color: #333;
+}
 
 /* Style the file input separately */
 .field input[type="file"] {
@@ -95,6 +99,7 @@ body {
     border-radius: 5px;
     margin-bottom: 10px;
     border: 1px solid #f5c6cb;
+    display: none;
 }
 
 /* Style the login link */

style/user.css

@@ -20,7 +20,7 @@ body {
 
 /* Style the users section */
 .users {
-    background-color:#EB984E;
+    background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     width: 400px;

users.html → users.php

@@ -86,6 +86,6 @@
         </section>
     </div>
         
-        <script src="" async defer></script>
+        <script src="javascript/user.js"></script>
     </body>
 </html>
\ No newline at end of file