Skip to content

Commit

Permalink
create a simple sign-in page which link the signup page and vice versa
Browse files Browse the repository at this point in the history
  • Loading branch information
@salonijoshi1980
salonijoshi1980 committed Oct 24, 2024
1 parent e6bf02f commit 4b8bf66
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 140 deletions.
11 changes: 10 additions & 1 deletion client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
height: 400px;
height: 450px;
margin-bottom: 50px;
}

Expand Down Expand Up @@ -101,6 +101,7 @@
.sign-in-button {
width: 100%;
padding: 14px;
margin-bottom:12px;
background-color: #38bdf8;
color: white;
border: none;
Expand Down Expand Up @@ -137,6 +138,12 @@
color: #0369a1;
}

.sign-up {
padding: 25px 27px;
}



footer {
background: #111827;
color: white;
Expand Down Expand Up @@ -175,6 +182,8 @@ <h2>Welcome Back</h2>

<button type="submit" class="sign-in-button">Sign In</button>

<a href="signup.html" class="sign-up">Don't have an account? Sign up here</a>

</form>
</div>
</main>
Expand Down
281 changes: 142 additions & 139 deletions auth/signup/index.html → client/signup.html
View file
Original file line number Diff line number Diff line change
@@ -1,139 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign Up to fusionFLOW</title>
<link rel="icon" href="../assets/fusionFLOW-logo.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
</head>
<body class="bg-body-tertiary">
<div class="d-flex align-items-center py-4" style="height: 100vh;">
<main
class="form-signin m-auto rounded-4"
style="width: 25rem; background-color: white; padding: 25px;"
>
<form id="signupForm">
<h1 class="h3 mb-3 fw-normal">Sign Up to fusionFLOW</h1>

<div class="form-floating mb-2">
<input
type="text"
class="form-control"
id="username"
placeholder="name_123"
name="username"
/>
<label for="username">Username</label>
</div>

<div class="form-floating mb-2">
<input
type="email"
class="form-control"
id="email"
placeholder="[email protected]"
name="email"
/>
<label for="email">Email address</label>
</div>

<div class="form-floating mb-2">
<input
type="password"
class="form-control"
id="password"
placeholder="Password"
name="password"
/>
<label for="password">Password</label>
</div>

<div class="form-floating">
<input
type="password"
class="form-control"
id="confirmPassword"
placeholder="Password"
name="confirmPassword"
/>
<label for="confirmPassword">Confirm Password</label>
</div>

<!-- warning message -->
<div
class="text-danger m-2"
id="warningMsg"
style="height: 24px; text-align: center;"
></div>

<div class="form-check text-start my-3">
<input
class="form-check-input"
type="checkbox"
value="remember-me"
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
Remember me
</label>
</div>

<button class="btn btn-primary py-2" type="submit" style="width: 10rem;">
Sign up
</button>
</form>
</main>
</div>

<script>
document.getElementById('signupForm').addEventListener('submit', async function (e) {
e.preventDefault();
const warningMsg = document.getElementById('warningMsg');
warningMsg.textContent = '';

const form = e.target;

const username = form.username.value;
const email = form.email.value;
const password = form.password.value;
const confirmPassword = form.confirmPassword.value;

if (password !== confirmPassword) {
warningMsg.textContent = 'Passwords do not match';
return;
}

const userDetails = { username, email, password, confirmPassword };

const response = await signup(userDetails);

if (response.signup) {
window.location.href = 'https://fusionflow-signin.onrender.com';
} else {
warningMsg.textContent = response.msg;
}
});

async function signup(userDetails) {
try {
const response = await fetch('https://fusionflow-vm59.onrender.com/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify(userDetails),
});
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign Up to fusionFLOW</title>
<link rel="icon" href="../assets/fusionFLOW-logo.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
</head>
<body class="bg-body-tertiary">
<div class="d-flex align-items-center py-4" style="height: 100vh;">
<main
class="form-signin m-auto rounded-4"
style="width: 25rem; background-color: white; padding: 25px;"
>
<form id="signupForm">
<h1 class="h3 mb-3 fw-normal">Sign Up to fusionFLOW</h1>

<div class="form-floating mb-2">
<input
type="text"
class="form-control"
id="username"
placeholder="name_123"
name="username"
/>
<label for="username">Username</label>
</div>

<div class="form-floating mb-2">
<input
type="email"
class="form-control"
id="email"
placeholder="[email protected]"
name="email"
/>
<label for="email">Email address</label>
</div>

<div class="form-floating mb-2">
<input
type="password"
class="form-control"
id="password"
placeholder="Password"
name="password"
/>
<label for="password">Password</label>
</div>

<div class="form-floating">
<input
type="password"
class="form-control"
id="confirmPassword"
placeholder="Password"
name="confirmPassword"
/>
<label for="confirmPassword">Confirm Password</label>
</div>

<!-- warning message -->
<div
class="text-danger m-2"
id="warningMsg"
style="height: 24px; text-align: center;"
></div>

<div class="form-check text-start my-3">
<input
class="form-check-input"
type="checkbox"
value="remember-me"
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
Remember me
</label>
</div>

<button class="btn btn-primary py-2" type="submit" style="width: 10rem;">
Sign up
</button>

<a href="index.html">Already have an account? Log in here</a>

</form>
</main>
</div>

<script>
document.getElementById('signupForm').addEventListener('submit', async function (e) {
e.preventDefault();
const warningMsg = document.getElementById('warningMsg');
warningMsg.textContent = '';

const form = e.target;

const username = form.username.value;
const email = form.email.value;
const password = form.password.value;
const confirmPassword = form.confirmPassword.value;

if (password !== confirmPassword) {
warningMsg.textContent = 'Passwords do not match';
return;
}

const userDetails = { username, email, password, confirmPassword };

const response = await signup(userDetails);

if (response.signup) {
window.location.href = 'https://fusionflow-signin.onrender.com';
} else {
warningMsg.textContent = response.msg;
}
});

async function signup(userDetails) {
try {
const response = await fetch('https://fusionflow-vm59.onrender.com/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify(userDetails),
});
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

0 comments on commit 4b8bf66

Please sign in to comment.