Sign Up and Login Page added

Sign Up and Login Page added also connected to the main todo list page
Abhijitkr · Jun 17, 2023 · 8cbc145 · 8cbc145
1 parent d32d9c1
commit 8cbc145
Show file tree

Hide file tree

Showing 9 changed files with 383 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # TODO-WebApplication
 
-You can access this project through the given link https://myawesometodo.000webhostapp.com/
+You can access this project through the given link https://abhijitkr.github.io/TODO-WebApplication/
diff --git a/index.php b/index.php
@@ -3,31 +3,47 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
-  <link rel="stylesheet" href="style.css">
-  <title>MY TODO LIST</title>
+  <title>Awesome Page</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+  <style>
+    body, html {
+      height: 100%;
+    }
+    
+    .full-screen {
+      background-color: #f5f5f5;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+    
+    .jumbotron {
+      background-color: #333;
+      color: #fff;
+      padding: 50px;
+      text-align: center;
+    }
+    
+    .display-4 {
+      font-size: 3rem;
+      margin-bottom: 30px;
+    }
+    
+    .buttons {
+      margin-top: 30px;
+    }
+  </style>
 </head>
 <body>
-  <div class="main">
-    <div class="container">
-      <div class="todo-header">
-        <h1 class="heading">MY AWESOME TODO</h1>
-        <form>
-          <input class="rounded insert" id="input" type="text" placeholder="Enter your todo">
-          <button type="button" class="rounded btn btn-primary btn-block" id="add">Add TODO</button>
-        </form>
-      </div>
-      <ul class="todo-list" id="todos">
-
-      </ul>               
-      <div class="todo-footer">
-        <button type="button" class="rounded btn btn-danger btn-block" id="remove">Remove Done TODO</button>
-        <button type="button" class="rounded btn btn-warning btn-block" id="removeAll">Remove All TODOS</button>
+  <div class="full-screen">
+    <div class="jumbotron">
+      <h1 class="display-4">Welcome to the Awesome Page</h1>
+      <div class="buttons">
+        <a href="register.php" class="btn btn-primary btn-lg mr-3">Sign Up</a>
+        <a href="signin.php" class="btn btn-secondary btn-lg">Log In</a>
       </div>
     </div>
   </div>
-  <script src="script.js"></script>
 </body>
 </html>
diff --git a/landing.css b/landing.css
@@ -0,0 +1,20 @@
+body {
+    background-color: #f5f5f5;
+  }
+
+  .jumbotron {
+    background-color: #333;
+    color: #fff;
+    height: 100vh;
+    margin-bottom: 0;
+  }
+
+  .display-4 {
+    font-size: 3rem;
+    margin-top: 200px;
+  }
+
+  .buttons {
+    margin-top: 50px;
+  }
+
diff --git a/login.php b/login.php
@@ -0,0 +1,29 @@
+<?php
+require_once 'db_connect.php';
+
+if (isset($_POST['email']) && isset($_POST['password'])) {
+  $email = $_POST['email'];
+  $password = $_POST['password'];
+
+  if (!empty($email) && !empty($password)) {
+    $stmt = $mysqli->prepare("SELECT * FROM users WHERE email = ?");
+    $stmt->bind_param("s", $email);
+    $stmt->execute();
+    $result = $stmt->get_result();
+    $user = $result->fetch_assoc();
+
+    if ($user && password_verify($password, $user['password'])) {
+      echo "<script>alert('Login successful!');</script>";
+      echo "<script>window.location.href = 'todolist.php';</script>";
+      exit();
+    } else {
+      echo "<script>alert('Invalid email or password.');</script>";
+    }
+
+    $stmt->close();
+    $mysqli->close();
+  } else {
+    echo "<script>alert('Please fill in all the required fields.');</script>";
+  }
+}
+?>
diff --git a/logout.php b/logout.php
@@ -0,0 +1,13 @@
+<?php
+session_start(); // Start the session
+
+// Clear all session data
+session_unset();
+
+// Destroy the session
+session_destroy();
+
+// Redirect the user to the login page
+header("Location: signin.php");
+exit();
+?>
diff --git a/register.php b/register.php
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sign Up</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+  <style>
+    body, html {
+      height: 100%;
+    }
+    
+    .full-screen {
+      background-color: #f5f5f5;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+    
+    .card {
+      width: 350px;
+      border: none;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+    
+    .card-header {
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      padding: 20px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+    }
+    
+    .card-body {
+      padding: 30px;
+    }
+    
+    .form-group label {
+      font-weight: bold;
+    }
+    
+    .form-group input[type="text"],
+    .form-group input[type="password"] {
+      border-radius: 5px;
+      border: 1px solid #ccc;
+      padding: 10px;
+      width: 100%;
+    }
+    
+    .form-group input[type="submit"] {
+      width: 100%;
+      margin-top: 20px;
+    }
+    
+    .toggle-form {
+      text-align: center;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="full-screen">
+    <div class="card">
+      <div class="card-header">
+        <h3>Sign Up</h3>
+      </div>
+      <div class="card-body">
+        <form method="POST" action="signup.php">
+          <div class="form-group">
+            <label for="name">Name</label>
+            <input type="text" id="name" name="name" placeholder="Enter your name">
+          </div>
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input type="text" id="email" name="email" placeholder="Enter your email">
+          </div>
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" placeholder="Enter your password">
+          </div>
+          <input type="submit" value="Sign Up" class="btn btn-primary">
+          <div class="toggle-form">
+            Already have an account? <a href="signin.php" id="login-link">Login</a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Function to toggle between Sign Up and Login forms
+    function toggleForms() {
+      var signUpForm = document.getElementById('sign-up-form');
+      var loginForm = document.getElementById('login-form');
+      var signUpLink = document.getElementById('sign-up-link');
+      var loginLink = document.getElementById('login-link');
+
+      signUpForm.style.display = signUpForm.style.display === 'none' ? 'block' : 'none';
+      loginForm.style.display = loginForm.style.display === 'none' ? 'block' : 'none';
+      signUpLink.style.display = signUpLink.style.display === 'none' ? 'block' : 'none';
+      loginLink.style.display = loginLink.style.display === 'none' ? 'block' : 'none';
+    }
+
+    // Event listener for Sign Up and Login links
+    document.getElementById('sign-up-link').addEventListener('click', toggleForms);
+    document.getElementById('login-link').addEventListener('click', toggleForms);
+  </script>
+</body>
+</html>
diff --git a/signin.php b/signin.php
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login Page</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+  <style>
+    body, html {
+      height: 100%;
+    }
+    
+    .full-screen {
+      background-color: #f5f5f5;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+    
+    .card {
+      width: 350px;
+      border: none;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+    
+    .card-header {
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      padding: 20px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+    }
+    
+    .card-body {
+      padding: 30px;
+    }
+    
+    .form-group label {
+      font-weight: bold;
+    }
+    
+    .form-group input[type="text"],
+    .form-group input[type="password"] {
+      border-radius: 5px;
+      border: 1px solid #ccc;
+      padding: 10px;
+      width: 100%;
+    }
+    
+    .form-group input[type="submit"] {
+      width: 100%;
+      margin-top: 20px;
+    }
+    
+    .toggle-form {
+      text-align: center;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="full-screen">
+    <div class="card">
+      <div class="card-header">
+        <h3>Login</h3>
+      </div>
+      <div class="card-body">
+        <form method="POST" action="login.php">
+          <div class="form-group">
+            <label for="email">Email</label>
+            <input type="text" name="email" id="email" placeholder="Enter your email">
+          </div>
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" name="password" id="password" placeholder="Enter your password">
+          </div>
+          <input type="submit" value="Login" class="btn btn-primary">
+          <div class="toggle-form">
+            Don't have an account? <a href="register.php" id="sign-up-link">Sign Up</a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Function to toggle between Sign Up and Login forms
+    function toggleForms() {
+      var signUpForm = document.getElementById('sign-up-form');
+      var loginForm = document.getElementById('login-form');
+      var signUpLink = document.getElementById('sign-up-link');
+      var loginLink = document.getElementById('login-link');
+
+      signUpForm.style.display = signUpForm.style.display === 'none' ? 'block' : 'none';
+      loginForm.style.display = loginForm.style.display === 'none' ? 'block' : 'none';
+      signUpLink.style.display = signUpLink.style.display === 'none' ? 'block' : 'none';
+      loginLink.style.display = loginLink.style.display === 'none' ? 'block' : 'none';
+    }
+
+    // Event listener for Sign Up and Login links
+    document.getElementById('sign-up-link').addEventListener('click', toggleForms);
+    document.getElementById('login-link').addEventListener('click', toggleForms);
+  </script>
+</body>
+</html>
diff --git a/signup.php b/signup.php
@@ -0,0 +1,27 @@
+<?php
+require_once 'db_connect.php';
+
+if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['password'])) {
+    $name = $_POST['name'];
+    $email = $_POST['email'];
+    $password = $_POST['password'];
+
+    if (!empty($name) && !empty($email) && !empty($password)) {
+        // Hash the password
+        $hashedPassword = password_hash($password, PASSWORD_DEFAULT);
+
+        $stmt = $mysqli->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?)");
+        $stmt->bind_param("sss", $name, $email, $hashedPassword);
+        $stmt->execute();
+
+        $stmt->close();
+        $mysqli->close();
+
+        echo "<script>alert('Signup successful!');</script>";
+        echo "<script>window.location.href = 'signin.php';</script>";
+        exit();
+    } else {
+        echo "<script>alert('Please fill in all the required fields.');</script>";
+    }
+}
+?>