Skip to content

Commit

Permalink
SIgnUp And OTP
Browse files Browse the repository at this point in the history
  • Loading branch information
@hardope
hardope committed May 16, 2024
1 parent 09b59f3 commit 1c570c2
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 13 deletions.
30 changes: 21 additions & 9 deletions auth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,40 +16,40 @@
<h2 class="title">Sign In</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="email" class="email" placeholder="Username" />
<input type="email" class="email" placeholder="Username" required />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" class="password" placeholder="Password" />
<input type="password" class="password" placeholder="Password" required />
</div>
<input type="submit" value="Login" class="btn solid" />
</form>

<form class="sign-up-form" style="margin-top: -20px;">
<form class="sign-up-form" id="sign-up-form" style="margin-top: -20px;">
<h2 class="title">Sign Up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" id="username" placeholder="Username" />
<input type="text" id="username" placeholder="Username" required />
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" class="email" placeholder="Email" />
<input type="email" class="email" placeholder="Email" required />
</div>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" id="first_name" placeholder="First Name" />
<input type="text" id="first_name" placeholder="First Name" required />
</div>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" id="last_name" placeholder="Last Name" />
<input type="text" id="last_name" placeholder="Last Name" required />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" class="password" placeholder="Password" />
<input type="password" class="password" placeholder="Password" required />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" id="confirm_password" placeholder="Confirm Password" />
<input type="password" id="confirm_password" placeholder="Confirm Password" required />
</div>
<input type="submit" value="Sign Up" class="btn solid" />
</form>
Expand Down Expand Up @@ -77,6 +77,18 @@ <h3>Sign In to Your account</h3>
</div>
</div>
</div>

<div id="otp-popup" class="popup">
<div class="popup-content">
<form id="popup_form">
<h2>Enter OTP</h2>
<input type="text" id="otp-input" placeholder="Enter 6-digit OTP" maxlength="6" />
<button id="otp-submit-btn">Submit</button>
</form>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<div class="sidebar-option"><img src="images/lock.svg" alt="Return"> <span>Privacy</span></div>
<div class="sidebar-option"><img src="images/shield.svg" alt="Return"> <span>Security</span></div>
<div class="sidebar-option"><img src="images/info.svg" alt="Return"> <span>Help</span></div>
<div class="sidebar-option"><img src="images/power.svg" alt="Return"> <span>Logout</span></div>
<div class="sidebar-option"><img src="images/power.svg" alt="Return" onclick="LogOut();"> <span>Logout</span></div>
</div>

<div id="sidebar-user-profile">
Expand Down
86 changes: 86 additions & 0 deletions scripts/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,93 @@ function Login(email, password) {
});
}

function SignUp() {
Notify('info', 'Creating Your Account...', 'Auth');
const email = $("#sign-up-form .email").val();
const username = $("#username").val();
const password = $("#sign-up-form .password").val();
const first_name = $("#first_name").val();
const last_name = $("#last_name").val();
const confirm_password = $("#confirm_password").val();

if (password != confirm_password) {
Notify('error', 'Passwords do not match', 'Auth');
return;
}

fetch(`${API()}/user/create`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: email,
username: username,
password: password,
first_name: first_name,
last_name: last_name,
}),
})
.then((response) => response.json())
.then((data) => {
if (data.status != "success") {
Notify('error', data.message, 'Auth');
return;
}
Notify('success', 'You have successfully signed up!', 'Auth');
GetSignUpOTP(data.data.id, email, password);
sessionStorage.setItem("token", data.token);
})
}

function LogOut() {
sessionStorage.removeItem("token");
window.location.href = "/auth";
}

function openOtpPopup() {
$('#otp-popup').fadeIn();
$('#otp-input').val('');
}

// Function to close the OTP popup
function closeOtpPopup() {
$('#otp-popup').fadeOut();
}

// Event handler for the OTP submit button

function GetSignUpOTP (id, email, password) {
//get OTP FROM USER

openOtpPopup();

$('#popup_form').submit(function(e) {
const inputOtp = $('#otp-input').val();
if (inputOtp.length === 6 ){
otp = inputOtp;
fetch(`${API()}/user/verify/${id}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
otp: otp,
}),
})
.then((response) => response.json())
.then((data) => {
if (data.status != "success") {
Notify('error', data.message, 'Auth');
return;
}
Login(email, password);
closeOtpPopup();
Notify('success', 'You have successfully verified your account!', 'Auth');
})
} else {
Notify('error', 'Invalid OTP', 'Auth');
}
e.preventDefault();
});
}
10 changes: 7 additions & 3 deletions scripts/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,13 @@ $(document).ready(function() {
});

$("#sign-in-form").submit(function(e) {
email=$("#sign-in-form .email").val();
password=$("#sign-in-form .password").val();
Login(email, password);
e.preventDefault();
});
});

$("#sign-up-form").submit(function(e) {
SignUp();
e.preventDefault();
});

});
55 changes: 55 additions & 0 deletions styles/auth.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,61 @@ input {
font-family: "Poppins", sans-serif;
}

/* Popup container */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 10;
}

/* Popup content */
.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Input field */
#otp-input {
width: calc(100% - 40px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
text-align: center;
}

/* Submit button */
#otp-submit-btn {
background-color: #5995fd;
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

#otp-submit-btn:hover {
background-color: #4d84e2;
}


.container {
position: relative;
width: 100%;
Expand Down

0 comments on commit 1c570c2

Please sign in to comment.