aravind/glink-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Signup added. Backend added

Browse Source
This commit is contained in:
Aravind142857
2023-06-25 10:50:38 -05:00
parent 2f2ee1100f
commit b700ef7423
454 changed files with 67001 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
public/css/output.css
View File

@@ -696,6 +696,10 @@ select {
visibility: hidden;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
@@ -704,6 +708,56 @@ select {
position: sticky;
}
.-inset-4 {
inset: -1rem;
}
.-inset-24 {
inset: -6rem;
}
.inset-52 {
inset: 13rem;
}
.inset-56 {
inset: 14rem;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.-inset-x-4 {
left: -1rem;
right: -1rem;
}
.inset-x-full {
left: 100%;
right: 100%;
}
.-inset-x-full {
left: -100%;
right: -100%;
}
.inset-x-0\.5 {
left: 0.125rem;
right: 0.125rem;
}
.right-0 {
right: 0px;
}
.top-0 {
top: 0px;
}
@@ -716,6 +770,10 @@ select {
margin: 1rem;
}
.m-auto {
margin: auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@@ -762,6 +820,14 @@ select {
margin-top: 1rem;
}
.mr-8 {
margin-right: 2rem;
}
.mr-10 {
margin-right: 2.5rem;
}
.block {
display: block;
}
@@ -822,6 +888,14 @@ select {
width: 100%;
}
.w-10\/12 {
width: 83.333333%;
}
.w-11\/12 {
width: 91.666667%;
}
.max-w-sm {
max-width: 24rem;
}
@@ -852,6 +926,10 @@ select {
flex-wrap: wrap;
}
.content-center {
align-content: center;
}
.items-center {
align-items: center;
}
@@ -890,6 +968,16 @@ select {
border-radius: 0.375rem;
}
.rounded-l-md {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
.border {
border-width: 1px;
}
@@ -903,16 +991,6 @@ select {
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.border-green-400 {
--tw-border-opacity: 1;
border-color: rgb(74 222 128 / var(--tw-border-opacity));
}
.border-red-400 {
--tw-border-opacity: 1;
border-color: rgb(248 113 113 / var(--tw-border-opacity));
}
.border-teal-400 {
--tw-border-opacity: 1;
border-color: rgb(45 212 191 / var(--tw-border-opacity));
@@ -948,6 +1026,26 @@ select {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-amber-200 {
--tw-bg-opacity: 1;
background-color: rgb(253 230 138 / var(--tw-bg-opacity));
}
.bg-sky-800 {
--tw-bg-opacity: 1;
background-color: rgb(7 89 133 / var(--tw-bg-opacity));
}
.bg-teal-200 {
--tw-bg-opacity: 1;
background-color: rgb(153 246 228 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
@@ -1031,6 +1129,43 @@ select {
padding-bottom: 0.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.pr-1 {
padding-right: 0.25rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pr-10 {
padding-right: 2.5rem;
}
.pr-1\.5 {
padding-right: 0.375rem;
}
.pr-0 {
padding-right: 0px;
}
.text-center {
text-align: center;
}
@@ -1118,11 +1253,6 @@ select {
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1133,6 +1263,11 @@ select {
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgb(153 27 27 / var(--tw-text-opacity));
}
.text-teal-200 {
--tw-text-opacity: 1;
color: rgb(153 246 228 / var(--tw-text-opacity));
@@ -1143,9 +1278,8 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgb(153 27 27 / var(--tw-text-opacity));
.caret-amber-200 {
caret-color: #fde68a;
}
.shadow-lg {
@@ -1439,16 +1573,16 @@ input.valid {
--tw-ring-inset: inset;
}
.focus\:ring-indigo-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
}
.focus\:ring-green-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
}
.focus\:ring-indigo-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
}
.focus\:ring-red-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));

32
public/login.html
View File

@@ -8,11 +8,11 @@
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
<img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Log in to your account</h2>
</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" method="POST"> <!--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>
@@ -49,7 +71,7 @@
</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>

108
public/signup.html Normal file
View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en" class="h-full bg-white">
<head>
<link rel="stylesheet" href="css/output.css">
<title>Title</title>
</head>
<body class="h-full">
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
<img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign up for an account</h2>
</div>
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form class="space-y-6" action="/__login" method="POST"> <!--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">
<input id="email" name="email" type="email" autocomplete="email" 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 id="email-error" class="hidden mt-2 text-red-800 text-xs">
invalid Email
</div>
</div>
</div>
<div>
<div class="flex items-center justify-between">
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
</div>
<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>
<p id="capital" class="hidden text-red-800 text-xs">
A <b>capital (uppercase)</b> letter
</p>
<p id="number" class="hidden text-red-800 text-xs">
A <b>number</b>
</p>
<p id="symbol" class="hidden text-red-800 text-xs">
A <b>symbol</b>
</p>
<p id="length" class="hidden text-red-800 text-xs">
Minimum <b>10 characters</b>
</p>
</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>
</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">
<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"
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="check-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="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>
</div>
</form>
</div>
</div>
<script src="./src/login.js"></script>
</body>
</html>

62
public/src/login.js
View File

@@ -1,6 +1,33 @@
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");
pswd_visible.addEventListener('click', () => {
pswd_visible.classList.add("hidden");
pswd_invisible.classList.remove("hidden");
password.type = "password";
});
pswd_invisible.addEventListener('click', () => {
pswd_invisible.classList.add("hidden");
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";
});
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!@#$%^&*]*$");
let emailError = document.getElementById("email-error");
let capsRX = new RegExp(".*[A-Z]+");
let capsError = document.getElementById("capital");
@@ -12,6 +39,9 @@ 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");
email.addEventListener('keyup', function(event) {
if (emailRX.test(email.value)) {
console.log("email valid");
@@ -33,7 +63,7 @@ email.addEventListener('keyup', function(event) {
return false;
}
});
password.addEventListener('keyup', function() {
password.addEventListener('keyup', () => {
let pswd = password.value;
if (!capsRX.test(pswd)) {
capsError.classList.remove("hidden");
@@ -63,6 +93,13 @@ password.addEventListener('keyup', function() {
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");
@@ -81,4 +118,25 @@ password.addEventListener('keyup', function() {
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");
}
});