Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactored JS form submission function #4

Merged
merged 1 commit into from
Feb 25, 2024
Merged

Refactored JS form submission function #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion app/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ input:-webkit-autofill:focus {

.flashed-message {
color: var(--dark-grey-text);
background: var(--light-grey-bg);
background: white;
border: none;
z-index: 99;
margin: 0;
Expand All @@ -355,3 +355,7 @@ input:-webkit-autofill:focus {
text-align: left;
box-shadow: var(--my-box-shadow);
}

.sidebar-layout .flashed-message {
left: var(--sidebar-width);
}
185 changes: 52 additions & 133 deletions app/static/js/forms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,55 @@
// Toggles loading button
function showLoadingBtn(isLoading) {
if (isLoading == true) {
function handleSubmitForm(formID, endpoint) {

$('#' + formID).on('submit', function(event) {

event.preventDefault();

// Show loading button
$(":input[type='submit']").prop('disabled', true);
$('.btn-text').hide();
$('.spinner-border').show();
} else {
$(":input[type='submit']").prop('disabled', false);
$('.btn-text').show();
$('.spinner-border').hide();
}
}

// Function to display error messages
function displayFormErrors(errors) {
for (const key in errors) {
const inputField = $('#' + key);
const errorMessage = $(
'<div class="error-message">'
+ '<i class="fa-solid fa-circle-exclamation"></i> '
+ errors[key]
+ '</div>'
);
inputField.after(errorMessage);
inputField.addClass('input-error');
}
var formData = $(this).serialize();
formData += "&form-id=" + $(this).attr('id');

$.post(endpoint, formData, function(data) {

// Hide loading button
$(":input[type='submit']").prop('disabled', false);
$('.btn-text').show();
$('.spinner-border').hide();

// Clear previous errors
$('.error-message').remove();
$('.input-error').removeClass('input-error');

if (response.success) {

// Redirect if url returned
if (response.url) {
window.location = response.url;
}
} else {

// Display error messages for each input field
if (response.errors) {
for (const key in response.errors) {
const inputField = $('#' + key);
const errorMessage = $(
'<div class="error-message">'
+ '<i class="fa-solid fa-circle-exclamation"></i> '
+ response.errors[key]
+ '</div>'
);
inputField.after(errorMessage);
inputField.addClass('input-error');
}
}
}
});
});
}

function ajaxFormResponseHandler(response) {

// Clear previous errors
$('.error-message').remove();
$('.input-error').removeClass('input-error');

if (response.success) {
if (response.url) {
window.location = response.url;
}
} else {
if (response.errors) {
displayFormErrors(response.errors);
}
}
}

$(document).ready(function() {

Expand All @@ -61,99 +69,10 @@ $(document).ready(function() {
}
});



// Registration handler using AJAX
$('#register-form').on('submit', function(event) {

event.preventDefault();
showLoadingBtn(true);

$.post('/register', {
'role': $('input[name="role"]:checked').attr('id'),
'first_name': $('#first_name').val(),
'last_name': $('#last_name').val(),
'email': $('#email').val(),
'password': $('#password').val()
},
function(data) {
showLoadingBtn(false);
ajaxFormResponseHandler(data);
});
});


// Login handler using AJAX
$('#login-form').on('submit', function(event) {

event.preventDefault();
showLoadingBtn(true);

$.post(
'/login', {
'email': $('#email').val(),
'password': $('#password').val()
},
function(data) {
showLoadingBtn(false);
ajaxFormResponseHandler(data);
}
);
});


// Resend email verification handler using AJAX
$('#verify-email-form').on('submit', function(event) {

event.preventDefault();
showLoadingBtn(true);

$.post(
'/verify-email', {},
function(data) {
showLoadingBtn(false);
ajaxFormResponseHandler(data);
}
);
});


// Password reset request handler using AJAX
$('#initiate-password-reset-form').on('submit', function(event) {

event.preventDefault();
showLoadingBtn(true);

$.post(
'/reset-password', {
'form-type': 'initiate_password_reset',
'email': $('#email').val()
},
function(data) {
showLoadingBtn(false);
ajaxFormResponseHandler(data);
}
);
});


// Password reset handler using AJAX
$('#reset-password-form').on('submit', function(event) {

event.preventDefault();
showLoadingBtn(true)

$.post(
'/reset-password', {
'form-type': 'reset_password',
'email': $('#email').val(),
'password': $('#password').val(),
'password_confirmation': $('#password_confirmation').val()
},
function(data) {
showLoadingBtn(false);
ajaxFormResponseHandler(data);
}
);
});
// Form handlers using AJAX
handleSubmitForm('register-form', '/register');
handleSubmitForm('login-form', '/login');
handleSubmitForm('verify-email-form', '/verify-email');
handleSubmitForm('initiate-password-reset-form', '/reset-password');
handleSubmitForm('reset-password-form', '/reset-password');
});
6 changes: 3 additions & 3 deletions app/templates/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ <h3>Sign in</h3>
<p>Don't have an account? <a href='/register'>Register</a></p>
<form id='login-form'>
<div class='form-floating'>
<input type='email' id='email' placeholder='Email address' class='form-control'>
<input type='email' id='email' name='email' placeholder='Email address' class='form-control'>
<label for='email'>Email address</label>
</div>
<div class='form-floating'>
<input type='password' id='password' placeholder='Password' class='form-control'>
<input type='password' id='password' name='password' placeholder='Password' class='form-control'>
<label for='password'>Password</label>
<button type='button' id='togglePassword'>
<i class="fa-solid fa-eye"></i>
<i class='fa-solid fa-eye'></i>
</button>
</div>
<div class='description'>
Expand Down
24 changes: 12 additions & 12 deletions app/templates/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,39 @@ <h3>Create account</h3>

<form id='register-form'>

<div class="radio-group" id="role">
<input type="radio" class="btn-check" name="role" id="therapist" autocomplete="off">
<label class="btn btn-outline-primary" for="therapist">
<i class="fa-solid fa-check"></i>
<div class='radio-group' id='role'>
<input type='radio' class='btn-check' id='therapist' name='role' value='therapist' autocomplete='off'>
<label class='btn btn-outline-primary' for='therapist'>
<i class='fa-solid fa-check'></i>
Therapist
</label>
<input type="radio" class="btn-check" name="role" id="client" autocomplete="off">
<label class="btn btn-outline-primary" for="client">
<i class="fa-solid fa-check"></i>
<input type='radio' class='btn-check' id='client' name='role' value='client' autocomplete='off'>
<label class='btn btn-outline-primary' for='client'>
<i class='fa-solid fa-check'></i>
Client
</label>
</div>

<div class='form-floating'>
<input type='text' id='first_name' placeholder='First name' class='form-control'>
<input type='text' id='first_name' name='first_name' placeholder='First name' class='form-control'>
<label for='first_name'>First name</label>
</div>

<div class='form-floating'>
<input type='text' id='last_name' placeholder='Last name' class='form-control'>
<input type='text' id='last_name' name='last_name' placeholder='Last name' class='form-control'>
<label for='last_name'>Last name</label>
</div>

<div class='form-floating'>
<input type='email' id='email' placeholder='Email address' class='form-control'>
<input type='email' id='email' name='email' placeholder='Email address' class='form-control'>
<label for='email'>Email</label>
</div>

<div class='form-floating'>
<input type='password' id='password' placeholder='Password' class='form-control'>
<input type='password' id='password' name='password' placeholder='Password' class='form-control'>
<label for='password'>Password</label>
<button type='button' id='togglePassword'>
<i class="fa-solid fa-eye"></i>
<i class='fa-solid fa-eye'></i>
</button>
</div>

Expand Down
6 changes: 3 additions & 3 deletions app/templates/reset-password.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
<div class='my-container'>
<h3>Reset password</h3>
<form id='reset-password-form'>
<input type='text' readonly class='form-control-plaintext hidden' id='email' value="{{ email }}">
<input type='text' readonly class='form-control-plaintext hidden' id='email' name='email' value="{{ email }}">
<div class='form-floating'>
<input type='password' id='password' placeholder='New password' class='form-control'>
<input type='password' id='password' name='password' placeholder='New password' class='form-control'>
<label for='password'>New password</label>
</div>
<div class='form-floating'>
<input type='password' id='password_confirmation' placeholder='Password confirmation' class='form-control'>
<input type='password' id='password_confirmation' name='password_confirmation' placeholder='Password confirmation' class='form-control'>
<label for='password_confirmation'>Password confirmation</label>
</div>
<div class='description'>
Expand Down
6 changes: 3 additions & 3 deletions app/views/auth.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,9 +211,9 @@ def reset_request() -> Response:

elif request.method == "POST":
errors = {}

# Form submitted to initiate a password reset
if request.form.get("form-type") == "initiate_password_reset":
if request.form.get("form-id") == "initiate-password-reset-form":
# Get form data
email = request.form.get("email").lower()

Expand Down Expand Up @@ -241,7 +241,7 @@ def reset_request() -> Response:
return jsonify({"success": True, "url": url_for("main.index")})

# Form submitted to reset password
elif request.form.get("form-type") == "reset_password":
elif request.form.get("form-id") == "reset-password-form":
# Get form data
email = request.form.get("email")
password = request.form.get("password")
Expand Down
Loading