added functions to disable certain components instead of all at once

This commit is contained in:
Miodec 2022-05-24 16:03:54 +02:00
parent 80d05a186f
commit 2fcea65d68
2 changed files with 46 additions and 24 deletions

View file

@ -301,6 +301,8 @@ export function signIn(): void {
authListener();
LoginPage.showPreloader();
LoginPage.disableInputs();
LoginPage.disableSignUpButton();
LoginPage.disableSignInButton();
const email = ($(".pageLogin .login input")[0] as HTMLInputElement).value;
const password = ($(".pageLogin .login input")[1] as HTMLInputElement).value;
@ -343,6 +345,8 @@ export function signIn(): void {
Notifications.add(message, -1);
LoginPage.hidePreloader();
LoginPage.enableInputs();
LoginPage.enableSignInButton();
LoginPage.updateSignupButton();
});
});
}
@ -351,6 +355,8 @@ export async function signInWithGoogle(): Promise<void> {
UpdateConfig.setChangedBeforeDb(false);
LoginPage.showPreloader();
LoginPage.disableInputs();
LoginPage.disableSignUpButton();
LoginPage.disableSignInButton();
authListener();
const persistence = $(".pageLogin .login #rememberMe input").prop("checked")
? browserLocalPersistence
@ -380,6 +386,8 @@ export async function signInWithGoogle(): Promise<void> {
Notifications.add(message, -1);
LoginPage.hidePreloader();
LoginPage.enableInputs();
LoginPage.enableSignInButton();
LoginPage.updateSignupButton();
});
}
@ -509,6 +517,7 @@ export function signOut(): void {
async function signUp(): Promise<void> {
LoginPage.disableInputs();
LoginPage.disableSignUpButton();
LoginPage.showPreloader();
const nname = ($(".pageLogin .register input")[0] as HTMLInputElement).value;
const email = ($(".pageLogin .register input")[1] as HTMLInputElement).value;
@ -523,6 +532,7 @@ async function signUp(): Promise<void> {
if (nname === "" || email === "" || emailVerify === "" || password === "") {
LoginPage.hidePreloader();
LoginPage.enableInputs();
LoginPage.updateSignupButton();
Notifications.add("Please fill in all fields", 0);
return;
}
@ -534,16 +544,16 @@ async function signUp(): Promise<void> {
) {
Notifications.add("Invalid email", 0, 3);
LoginPage.hidePreloader();
$(".pageLogin .button").removeClass("disabled");
$(".pageLogin input").prop("disabled", false);
LoginPage.enableInputs();
LoginPage.updateSignupButton();
return;
}
if (email !== emailVerify) {
Notifications.add("Emails do not match", 0, 3);
LoginPage.hidePreloader();
$(".pageLogin .button").removeClass("disabled");
$(".pageLogin input").prop("disabled", false);
LoginPage.enableInputs();
LoginPage.updateSignupButton();
return;
}
@ -551,8 +561,8 @@ async function signUp(): Promise<void> {
if (password.length < 8) {
Notifications.add("Password must be at least 8 characters", 0, 3);
LoginPage.hidePreloader();
$(".pageLogin .button").removeClass("disabled");
$(".pageLogin input").prop("disabled", false);
LoginPage.enableInputs();
LoginPage.updateSignupButton();
return;
}
@ -566,16 +576,16 @@ async function signUp(): Promise<void> {
3
);
LoginPage.hidePreloader();
$(".pageLogin .button").removeClass("disabled");
$(".pageLogin input").prop("disabled", false);
LoginPage.enableInputs();
LoginPage.updateSignupButton();
return;
}
if (password !== passwordVerify) {
Notifications.add("Passwords do not match", 0, 3);
LoginPage.hidePreloader();
$(".pageLogin .button").removeClass("disabled");
$(".pageLogin input").prop("disabled", false);
LoginPage.enableInputs();
LoginPage.updateSignupButton();
return;
}
@ -634,8 +644,8 @@ async function signUp(): Promise<void> {
const message = Misc.createErrorMessage(e, "Failed to create account");
Notifications.add(message, -1);
LoginPage.hidePreloader();
$(".pageLogin .button").removeClass("disabled");
$(".pageLogin input").prop("disabled", false);
LoginPage.enableInputs();
LoginPage.updateSignupButton();
signOut();
return;
}

View file

@ -4,13 +4,27 @@ import Page from "./page";
import * as Notifications from "../elements/notifications";
import { InputIndicator } from "../elements/input-indicator";
export function enableSignUpButton(): void {
$(".page.pageLogin .register.side .button").removeClass("disabled");
}
export function disableSignUpButton(): void {
$(".page.pageLogin .register.side .button").addClass("disabled");
}
export function enableSignInButton(): void {
$(".page.pageLogin .login.side .button").removeClass("disabled");
}
export function disableSignInButton(): void {
$(".page.pageLogin .login.side .button").addClass("disabled");
}
export function enableInputs(): void {
$(".pageLogin .button").removeClass("disabled");
$(".pageLogin input").prop("disabled", false);
}
export function disableInputs(): void {
$(".pageLogin .button").addClass("disabled");
$(".pageLogin input").prop("disabled", true);
}
@ -22,9 +36,7 @@ export function hidePreloader(): void {
$(".pageLogin .preloader").addClass("hidden");
}
const updateSignupButton = (): void => {
const $button = $(".page.pageLogin .register.side .button");
export const updateSignupButton = (): void => {
if (
nameIndicator.get() !== "available" ||
emailIndicator.get() !== "valid" ||
@ -32,9 +44,9 @@ const updateSignupButton = (): void => {
passwordIndicator.get() !== "good" ||
verifyPasswordIndicator.get() !== "match"
) {
$button.addClass("disabled");
disableSignUpButton();
} else {
$button.removeClass("disabled");
enableSignUpButton();
}
};
@ -134,7 +146,7 @@ const checkPasswordsMatch = (): void => {
};
const nameIndicator = new InputIndicator(
$(".page.pageLogin .register.side .username.inputAndIndicator"),
$(".page.pageLogin .register.side input.usernameInput"),
{
available: {
icon: "fa-check",
@ -157,7 +169,7 @@ const nameIndicator = new InputIndicator(
);
const emailIndicator = new InputIndicator(
$(".page.pageLogin .register.side .email.inputAndIndicator"),
$(".page.pageLogin .register.side input.emailInput"),
{
valid: {
icon: "fa-check",
@ -171,7 +183,7 @@ const emailIndicator = new InputIndicator(
);
const verifyEmailIndicator = new InputIndicator(
$(".page.pageLogin .register.side .verifyEmail.inputAndIndicator"),
$(".page.pageLogin .register.side input.verifyEmailInput"),
{
match: {
icon: "fa-check",
@ -185,7 +197,7 @@ const verifyEmailIndicator = new InputIndicator(
);
const passwordIndicator = new InputIndicator(
$(".page.pageLogin .register.side .password.inputAndIndicator"),
$(".page.pageLogin .register.side input.passwordInput"),
{
good: {
icon: "fa-check",
@ -203,7 +215,7 @@ const passwordIndicator = new InputIndicator(
);
const verifyPasswordIndicator = new InputIndicator(
$(".page.pageLogin .register.side .verifyPassword.inputAndIndicator"),
$(".page.pageLogin .register.side input.verifyPasswordInput"),
{
match: {
icon: "fa-check",