Changed the ID of the input element

Fixed bugs in PHP database code
Added code to regex for password
2023-06-25 15:22:22 -05:00 · 2023-06-25 15:21:43 -05:00 · 2023-06-25 15:21:10 -05:00 · 2023-06-25 15:20:39 -05:00 · 2023-06-25 15:20:08 -05:00
6 changed files with 162 additions and 107 deletions
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
            <span class="mandatory font-rubik self-center text-2xl">*</span>
            <span class="font-rubik self-center m-1 text-2xl">:</span>
            <div class="p-0.5 m-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
-                <input type="text" name="url" id="URL" placeholder="https://example.com" required class="p-2 w-full rounded-lg focus:outline-none text-center text-lg text-black font-bold">
+		<input type="text" name="url" id="URL" placeholder="https://example.com" required class="p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold">
            </div>
        </div>

@@ -27,7 +27,7 @@
            <span class="font-rubik self-center m-1 text-2xl">:</span>
            <label for="GLink" id="labels" class=" ml-2 glink text-center text-xl self-center">glink.zip/</label>
            <div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
-                <input type="text" name="glink" id="GLink" class="glink p-2 w-full rounded-lg focus:outline-none text-center text-lg text-black font-bold" placeholder="exampleWebsite">
+                <input type="text" name="glink" id="GLink" class="glink p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold" placeholder="exampleWebsite">
            </div>
        </div>

@@ -51,7 +51,7 @@
            </style>
        </noscript>
        <span role="alert" class="m-4 font-rubik" id="error" aria-hidden="true">Invalid entry</span>
-        <input type="submit" id="button" value="Zip It!" class="brightness-125 ml-4 font-rubik bg-gradient-to-r from-cyan-500 to-blue-500 shadow-lg shadow-black/50 transition hover:-translate-y-1 hover:scale-105 duration-600 ease-in-out rounded-full cursor-pointer">
+        <input type="submit" id="button" value="Zip It!" class="scale-125 brightness-125 ml-20 font-rubik bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 hover:shadow-lg hover:shadow-black/50 transition hover:-translate-y-1 hover:scale-150 duration-600 ease-in-out rounded-full cursor-pointer">
        <input type="hidden" name="latitude" id="latitude">
        <input type="hidden" name="longitude" id="longitude">

--- a/login.html
+++ b/login.html
@@ -12,7 +12,7 @@
 </div>

 <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-    <form class="space-y-6" action="#" method="POST">
+    <form class="space-y-6" action="login.php" method="GET"> <!--Change to php-->
        <div>
            <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
            <div class="mt-2">
@@ -29,9 +29,31 @@
                    <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
                </div>
            </div>
-            <div class="mt-2">
-                <input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            <div class="mt-2 relative block">
+                <input id="password" name="password" type="password" autocomplete="off" required class="block w-11/12 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+
+                <span id="pswd-invisible" class="absolute inset-y-0 right-0 flex items-center px-1 rounded-r-md">
+                    <svg class="w-6 h-6 m-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" color="black"
+                              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
+                        </path>
+                    </svg>
+                </span>
+                <span id="pswd-visible" class="absolute inset-y-0 right-0 flex items-center px-1 hidden">
+                    <svg class="w-6 h-6 m-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21">
+                        </path>
+                    </svg>
+                </span>
            </div>
+            <p id="domain" class="hidden text-red-800 text-xs">
+                <b>Invalid characters entered</b>
+            </p>
            <p id="letter" class="hidden text-red-800 text-xs">
                A <b>lowercase</b> letter
            </p>
@@ -47,9 +69,12 @@
            <p id="length" class="hidden text-red-800 text-xs">
                Minimum <b>10 characters</b>
            </p>
+            <p id="auth" class="hidden text-red-800 text-xs">
+                Incorrect Email or password
+            </p>
        </div>
        <div>
-            <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</button>
+            <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Log in</button>
        </div>
    </form>
 </div>
--- a/login.js
+++ b/login.js
@@ -2,9 +2,8 @@ let email = document.getElementById("email");
 let password = document.getElementById("password");
 let pswd_visible = document.getElementById("pswd-visible");
 let pswd_invisible = document.getElementById("pswd-invisible");
-let check_pswd_visible = document.getElementById("check-pswd-visible");
-let check_pswd_invisible = document.getElementById("check-pswd-invisible");
-let check_password = document.getElementById("check-password");
+
+console.log(window.location.pathname);
 pswd_visible.addEventListener('click', () => {
    pswd_visible.classList.add("hidden");
    pswd_invisible.classList.remove("hidden");
@@ -15,16 +14,21 @@ pswd_invisible.addEventListener('click', () => {
    pswd_visible.classList.remove("hidden");
    password.type = "text";
 });
-check_pswd_visible.addEventListener('click', () => {
-    check_pswd_visible.classList.add("hidden");
-    check_pswd_invisible.classList.remove("hidden");
-    check_password.type = "password";
-});
-check_pswd_invisible.addEventListener('click', () => {
-    check_pswd_invisible.classList.add("hidden");
-    check_pswd_visible.classList.remove("hidden");
-    check_password.type = "text";
-});
+if (window.location.pathname === '/signup.html') {
+    let check_pswd_visible = document.getElementById("check-pswd-visible");
+    let check_pswd_invisible = document.getElementById("check-pswd-invisible");
+    let check_password = document.getElementById("verify");
+    check_pswd_visible.addEventListener('click', () => {
+        check_pswd_visible.classList.add("hidden");
+        check_pswd_invisible.classList.remove("hidden");
+        check_password.type = "password";
+    });
+    check_pswd_invisible.addEventListener('click', () => {
+        check_pswd_invisible.classList.add("hidden");
+        check_pswd_visible.classList.remove("hidden");
+        check_password.type = "text";
+    });
+}
 let emailRX = new RegExp("^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z]+)+$");
 let domainError = document.getElementById("domain");
 let domainRX = new RegExp("^[a-zA-Z0-9!@#$%^&*]*$");
@@ -39,9 +43,20 @@ let symbolRX = new RegExp(".*[!@#$%^&*]+");
 let symbolError = document.getElementById("symbol");
 let MIN_LENGTH = 10;
 let lenError = document.getElementById("length");
-let check_password_error = document.getElementById("check-password-error");
-
-
+if (window.location.pathname === '/login.html') {
+    let auth_error = document.getElementById("auth");
+    let query = window.location.search;
+    const urlParams = new URLSearchParams(query);
+    const errorType = urlParams.get('error');
+    console.log(window.location.pathname);
+    if (errorType === 'auth') {
+        auth_error.classList.add('block');
+        auth_error.classList.remove('hidden');
+    } else {
+        auth_error.classList.remove('block');
+        auth_error.classList.add('hidden');
+    }
+}
 email.addEventListener('keyup', function(event) {
    if (emailRX.test(email.value)) {
        console.log("email valid");
@@ -64,79 +79,90 @@ email.addEventListener('keyup', function(event) {
    }
 });
 password.addEventListener('keyup', () => {
-    let pswd = password.value;
-    if (!capsRX.test(pswd)) {
-        capsError.classList.remove("hidden");
-        capsError.classList.add("block");
+    if (document.location.pathname === '/login.html') {
+        if (document.getElementById('auth').classList.contains('block')) {
+            document.getElementById('auth').classList.remove('block');
+            document.getElementById('auth').classList.add('hidden');
+        }
    } else {
-        capsError.classList.add("hidden");
-        capsError.classList.remove("block");
-    }
-    if (!lowRX.test(pswd)) {
-        lowError.classList.remove("hidden");
-        lowError.classList.add("block");
-    } else {
-        lowError.classList.add("hidden");
-        lowError.classList.remove("block");
-    }
-    if (!numRX.test(pswd)) {
-        numError.classList.remove("hidden");
-        numError.classList.add("block");
-    } else {
-        numError.classList.add("hidden");
-        numError.classList.remove("block");
-    }
-    if (!symbolRX.test(pswd)) {
-        symbolError.classList.remove("hidden");
-        symbolError.classList.add("block");
-    } else {
-        symbolError.classList.add("hidden");
-        symbolError.classList.remove("block");
-    }
-    if (!domainRX.test(pswd)) {
-        domainError.classList.remove("hidden");
-        domainError.classList.add("block");
-    } else {
-        domainError.classList.add("hidden");
-        domainError.classList.remove("block");
-    }
-    if (pswd.length < MIN_LENGTH) {
-        lenError.classList.remove("hidden");
-        lenError.classList.add("block");
-    } else {
-        lenError.classList.add("hidden");
-        lenError.classList.remove("block");
-    }
-    if (capsError.classList.contains("block") || lowError.classList.contains("block") || numError.classList.contains("block") || symbolError.classList.contains("block") || lenError.classList.contains("block")) {
-        password.classList.remove("ring-green-400");
-        password.classList.remove("focus:ring-green-400");
-        password.classList.add("ring-red-400");
-        password.classList.add("focus:ring-red-400");
-    } else {
-        password.classList.add("ring-green-400");
-        password.classList.add("focus:ring-green-400");
-        password.classList.remove("ring-red-400");
-        password.classList.remove("focus:ring-red-400");
+        let pswd = password.value;
+        if (!capsRX.test(pswd)) {
+            capsError.classList.remove("hidden");
+            capsError.classList.add("block");
+        } else {
+            capsError.classList.add("hidden");
+            capsError.classList.remove("block");
+        }
+        if (!lowRX.test(pswd)) {
+            lowError.classList.remove("hidden");
+            lowError.classList.add("block");
+        } else {
+            lowError.classList.add("hidden");
+            lowError.classList.remove("block");
+        }
+        if (!numRX.test(pswd)) {
+            numError.classList.remove("hidden");
+            numError.classList.add("block");
+        } else {
+            numError.classList.add("hidden");
+            numError.classList.remove("block");
+        }
+        if (!symbolRX.test(pswd)) {
+            symbolError.classList.remove("hidden");
+            symbolError.classList.add("block");
+        } else {
+            symbolError.classList.add("hidden");
+            symbolError.classList.remove("block");
+        }
+        if (!domainRX.test(pswd)) {
+            domainError.classList.remove("hidden");
+            domainError.classList.add("block");
+        } else {
+            domainError.classList.add("hidden");
+            domainError.classList.remove("block");
+        }
+        if (pswd.length < MIN_LENGTH) {
+            lenError.classList.remove("hidden");
+            lenError.classList.add("block");
+        } else {
+            lenError.classList.add("hidden");
+            lenError.classList.remove("block");
+        }
+        if (capsError.classList.contains("block") || lowError.classList.contains("block") || numError.classList.contains("block") || symbolError.classList.contains("block") || lenError.classList.contains("block")) {
+            password.classList.remove("ring-green-400");
+            password.classList.remove("focus:ring-green-400");
+            password.classList.add("ring-red-400");
+            password.classList.add("focus:ring-red-400");
+        } else {
+            password.classList.add("ring-green-400");
+            password.classList.add("focus:ring-green-400");
+            password.classList.remove("ring-red-400");
+            password.classList.remove("focus:ring-red-400");
+        }
    }
 });
-check_password.addEventListener("keyup", () => {
-    let check = check_password.value;
-    if (check !== password.value) {
-        check_password_error.classList.remove("hidden");
-        check_password_error.classList.add("block");
-    } else {
-        check_password_error.classList.add("hidden");
-        check_password_error.classList.remove("block")
-    }
-    if (check_password_error.classList.contains("block")) {
-        check_password.classList.remove("ring-green-400");
-        check_password.classList.remove("focus:ring-green-400");
-        check_password.classList.add("ring-red-400");
-        check_password.classList.add("focus:ring-red-400");
-    } else {
-        check_password.classList.add("ring-green-400");
-        check_password.classList.add("focus:ring-green-400");
-        check_password.classList.remove("ring-red-400");
-        check_password.classList.remove("focus:ring-red-400");
-    }
-});
+if (window.location.pathname === '/signup.html') {
+    let check_password = document.getElementById("verify");
+    let check_password_error = document.getElementById("check-password-error");
+    check_password.addEventListener("keyup", () => {
+        let check = check_password.value;
+        if (check !== password.value) {
+            check_password_error.classList.remove("hidden");
+            check_password_error.classList.add("block");
+        } else {
+            check_password_error.classList.add("hidden");
+            check_password_error.classList.remove("block")
+        }
+        if (check_password_error.classList.contains("block")) {
+            check_password.classList.remove("ring-green-400");
+            check_password.classList.remove("focus:ring-green-400");
+            check_password.classList.add("ring-red-400");
+            check_password.classList.add("focus:ring-red-400");
+        } else {
+            check_password.classList.add("ring-green-400");
+            check_password.classList.add("focus:ring-green-400");
+            check_password.classList.remove("ring-red-400");
+            check_password.classList.remove("focus:ring-red-400");
+        }
+    });
+}
--- a/login.php
+++ b/login.php
@@ -1,10 +1,12 @@
 <?php
+require_once 'db.inc.php';
+
 $email = $_GET['email'];
 $password = $_GET['password'];

 $session = init_cass_db();

-$statement = $session->prepare('SELECT password FROM users WHERE email=? ALLOW FILTERING;');
+$statement = $session->prepare('SELECT password_hash FROM users WHERE email=? ALLOW FILTERING;');

 $result = $session->execute($statement,array('arguments' => array($email)));

@@ -12,7 +14,7 @@ if ($result->count() <= 0) {
 	echo('Invalid email address or password.');
 	exit();
 } else {
-	$hash = $row[0]['password'];
+	$hash = $result[0]['password_hash'];

 	if (password_verify($password,$hash) != true) {
 		echo('Invalid email address or password.');
@@ -20,7 +22,7 @@ if ($result->count() <= 0) {
 	} else {
 		session_start();
 		$_SESSION['user'] = $email;
-		echo('Logged in successfully. You are ' . $_SESSION['user']);
+		header('Location: https://glink.zip?res=success');
 	}
 }

--- a/signup.html
+++ b/signup.html
@@ -12,7 +12,7 @@
  </div>

  <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-    <form class="space-y-6" action="signup.php" method="GET">
+    <form class="space-y-6" action="signup.php" method="GET"> <!--Change to php-->
      <div>
        <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
        <div class="mt-2">
@@ -69,10 +69,10 @@
      </div>
        <div>
        <div class="flex items-center justify-between">
-            <label for="check-password" class="block text-sm font-medium leading-6 text-gray-900">Retype Password</label>
+            <label for="verify" class="block text-sm font-medium leading-6 text-gray-900">Retype Password</label>
        </div>
      <div class="mt-2 relative block">
-        <input id="check-password" name="check-password" type="password" autocomplete="off" required class="block w-11/12 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+        <input id="verify" name="verify" type="password" autocomplete="off" required class="block w-11/12 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">

        <span id="check-pswd-invisible" class="absolute inset-y-0 right-0 flex items-center px-1 rounded-r-md">
                    <svg class="w-6 h-6 m-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@@ -96,6 +96,7 @@
      <p id="check-password-error" class="hidden text-red-800 text x-s">
        Passwords <b>do not</b> match
      </p>
+
    </div>
      <div>
        <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign up</button>
--- a/signup.php
+++ b/signup.php
@@ -2,6 +2,7 @@
 require_once 'db.inc.php';

 $email = $_GET['email'];
+$email = strval($email);
 $username = $_GET['username'];
 $password = $_GET['password'];
 $id = rand(0,99999999);
@@ -10,16 +11,16 @@ $hash = password_hash($password,PASSWORD_BCRYPT);

 $session = init_cass_db();

-$statement = $session->prepare('SELECT id FROM users WHERE email=? OR username=? ALLOW FILTERING;');
-$result = $session->execute($statement, array('arguments' => array($email,$username)));
+$statement = $session->prepare("SELECT id FROM users WHERE email=? ALLOW FILTERING;");
+$result = $session->execute($statement, array('arguments' => array($email)));

 if ($result->count() != 0) {
-	echo('The username or email address already exists. Please try another username/email address.');
+	echo('The username or email address already exists. Please try another email address.');
 	exit();
 }

-$statement = $session->prepare('INSERT INTO users (id,email_addr,username,password_hash) VALUES (?,?,?,?);');
-$result = $session->execute($statement, array('arguments' => array($id,$email,$username,$hash)));
+$statement = $session->prepare('INSERT INTO users (id,email,username,password_hash) VALUES (?,?,null,?);');
+$result = $session->execute($statement, array('arguments' => array($id,$email,$hash)));

 echo('Registration successful.');
Author	SHA1	Message	Date
Aadhavan Srinivasan	e36a2cbd77	Changed the ID of the input element	2023-06-25 15:22:22 -05:00
Aadhavan Srinivasan	1392c62d31	Fixed bugs in PHP database code	2023-06-25 15:21:43 -05:00
Aadhavan Srinivasan	e37bf086dd	Added code to regex for password	2023-06-25 15:21:10 -05:00
Aadhavan Srinivasan	67228048e1	Fixed JS errors with validation	2023-06-25 15:20:39 -05:00
Aadhavan Srinivasan	de1a7f0687	Modified CSS for inputs	2023-06-25 15:20:08 -05:00