Skip to content

Commit

Permalink
Merge pull request #102 from ChandelAnish/SignUp
Browse files Browse the repository at this point in the history 
Update index.html
  • Loading branch information
@CogitoKunal
CogitoKunal authored Oct 26, 2024
2 parents 06cebd4 + e9d837f commit 95be171
Showing 1 changed file with 70 additions and 47 deletions.
117 changes: 70 additions & 47 deletions auth/signup/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,136 +4,159 @@
<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>
<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"
/>
<style>
body {
background-color: #f8f9fa;
}
.form-signup-container {
max-width: 420px;
padding: 30px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.form-signup-container h1 {
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 20px;
text-align: center;
color: #333;
}
.form-signup-container .btn-primary {
width: 100%;
padding: 12px;
}
#warningMsg {
min-height: 24px;
text-align: center;
}
</style>
</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;"
>
<body>
<div class="d-flex align-items-center justify-content-center vh-100">
<main class="form-signup-container">
<form id="signupForm">
<h1 class="h3 mb-3 fw-normal">Sign Up to fusionFLOW</h1>
<h1>Sign Up to fusionFLOW</h1>

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

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

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

<div class="form-floating">
<div class="form-floating mb-3">
<input
type="password"
class="form-control"
id="confirmPassword"
placeholder="Password"
placeholder="Confirm Password"
name="confirmPassword"
required
/>
<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="text-danger" id="warningMsg"></div>

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

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

<script>
document.getElementById('signupForm').addEventListener('submit', async function (e) {
document.getElementById("signupForm").addEventListener("submit", async (e) => {
e.preventDefault();
const warningMsg = document.getElementById('warningMsg');
warningMsg.textContent = '';
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';
warningMsg.textContent = "Passwords do not match";
return;
}

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

const response = await signup(userDetails);
const response = await signup({ username, email, password });

if (response.signup) {
window.location.href = 'https://fusionflow-signin.onrender.com';
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',
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;
return await response.json();
} catch (error) {
console.error(error);
console.error("Signup Error:", error);
}
}
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></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 95be171

Please sign in to comment.