hamyack/GTA4RP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add changepass, resetpass, and 2FA gui

Browse Source
This commit is contained in:
Vortrex
2021-10-25 12:57:32 -05:00
parent 0c79b2f310
commit 2a3d62abe2
3 changed files with 461 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
scripts/client/gui/2fa.js Normal file
View File

@@ -0,0 +1,133 @@
// ===========================================================================
// Vortrex's Roleplay Resource
// https://github.com/VortrexFTW/gtac_roleplay
// ===========================================================================
// FILE: 2fa.js
// DESC: Provides two factor authentication GUI
// TYPE: Client (JavaScript)
// ===========================================================================
let twoFactorAuth = {
window: null,
logoImage: null,
qrCode: null,
messageLabel: null,
codeLabel: null,
codeInput: null,
submitButton: null,
};
// ===========================================================================
function initTwoFactorAuthenticationGUI() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Creating two factor auth GUI ...`);
twoFactorAuth.window = mexui.window(game.width/2-150, game.height/2-129, 300, 258, 'LOGIN', {
main: {
backgroundColour: toColour(secondaryColour[0], secondaryColour[1], secondaryColour[2], windowAlpha),
transitionTime: 500,
},
title: {
textSize: 0.0,
textColour: toColour(0, 0, 0, 0),
},
icon: {
textSize: 0.0,
textColour: toColour(0, 0, 0, 0),
},
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
twoFactorAuth.window.titleBarIconSize = toVector2(0,0);
twoFactorAuth.window.titleBarHeight = 0;
twoFactorAuth.qrCode = twoFactorAuth.window.image(100, 20, 100, 100, mainLogoPath, {
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
twoFactorAuth.codeLabel = twoFactorAuth.window.text(20, 135, 260, 20, 'Please enter the code from your authenticator app!', {
main: {
textSize: 10.0,
textAlign: 0.5,
textColour: toColour(200, 200, 200, 255),
textFont: robotoFont,
},
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
twoFactorAuth.codeInput = twoFactorAuth.window.textInput(20, 170, 260, 25, '', {
main: {
backgroundColour: toColour(0, 0, 0, 120),
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], textInputAlpha),
textColour: toColour(200, 200, 200, 255),
textSize: 10.0,
textFont: robotoFont,
},
caret: {
lineColour: toColour(255, 255, 255, 255),
},
placeholder: {
textColour: toColour(200, 200, 200, 150),
textSize: 10.0,
textFont: robotoFont,
},
focused: {
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], 255),
},
});
twoFactorAuth.codeInput.placeholder = "Code";
twoFactorAuth.submitButton = twoFactorAuth.window.button(20, 205, 260, 30, 'SUBMIT', {
main: {
backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
textColour: toColour(0, 0, 0, 255),
textSize: 10.0,
textFont: robotoFont,
textAlign: 0.5,
},
focused: {
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
},
}, checkTwoFactorAuth);
logToConsole(LOG_DEBUG, `[VRR.GUI] Created two factor auth GUI`);
}
// ===========================================================================
function showTwoFactorAuthGUI() {
closeAllWindows();
logToConsole(LOG_DEBUG, `[VRR.GUI] Showing two-factor authentication window`);
setChatWindowEnabled(false);
mexui.setInput(true);
twoFactorAuth.window.shown = true;
}
// ===========================================================================
function twoFactorAuthFailed(errorMessage) {
logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports two-factor authentication failed. Reason: ${errorMessage}`);
twoFactorAuth.messageLabel.text = errorMessage;
twoFactorAuth.messageLabel.styles.main.textColour = toColour(180, 32, 32, 255);
twoFactorAuth.codeInput.text = "";
}
// ===========================================================================
function twoFactorAuthSuccess() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports two-factor authentication was successful`);
closeAllWindows();
}
// ===========================================================================
function checkTwoFactorAuth() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Checking two-factor authentication with server ...`);
triggerNetworkEvent("vrr.checkTwoFactorAuth", twoFactorAuth.codeInput.lines[0]);
}
// ===========================================================================

170
scripts/client/gui/changepass.js Normal file
View File

@@ -0,0 +1,170 @@
// ===========================================================================
// Vortrex's Roleplay Resource
// https://github.com/VortrexFTW/gtac_roleplay
// ===========================================================================
// FILE: changepass.js
// DESC: Provides change password GUI
// TYPE: Client (JavaScript)
// ===========================================================================
let passwordChange = {
window: null,
logoImage: null,
messageLabel: null,
passwordInput: null,
confirmPasswordInput: null,
verificationCodeInput: null,
submitButton: null,
};
// ===========================================================================
function initChangePasswordGUI() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Creating password change GUI ...`);
passwordChange.window = mexui.window(game.width/2-130, game.height/2-125, 300, 250, 'Change Password', {
main: {
backgroundColour: toColour(secondaryColour[0], secondaryColour[1], secondaryColour[2], windowAlpha),
transitionTime: 500,
},
title: {
textSize: 0.0,
textColour: toColour(0, 0, 0, 0),
backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha),
},
icon: {
textSize: 0.0,
textColour: toColour(0, 0, 0, 0),
backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], windowTitleAlpha),
}
});
passwordChange.window.titleBarIconSize = toVector2(0,0);
passwordChange.window.titleBarHeight = 0;
passwordChange.window.image(115, 10, 65, 65, mainLogoPath, {
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
passwordChange.messageLabel = passwordChange.window.text(20, 75, 260, 20, 'Check your email for a verification code!', {
main: {
textSize: 10.0,
textAlign: 0.5,
textColour: toColour(200, 200, 200, 255),
textFont: robotoFont,
},
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
passwordChange.passwordInput = passwordChange.window.textInput(20, 100, 260, 25, '', {
main: {
backgroundColour: toColour(0, 0, 0, 120),
textColour: toColour(200, 200, 200, 255),
textSize: 10.0,
textFont: robotoFont,
},
caret: {
lineColour: toColour(255, 255, 255, 255),
},
placeholder: {
backgroundColour: toColour(0, 0, 0, 120),
textColour: toColour(200, 200, 200, 200),
textSize: 10.0,
textFont: robotoFont,
}
});
passwordChange.passwordInput.masked = true;
passwordChange.passwordInput.placeholder = "Password";
passwordChange.confirmPasswordInput = passwordChange.window.textInput(20, 130, 260, 25, '', {
main: {
backgroundColour: toColour(0, 0, 0, 120),
textColour: toColour(200, 200, 200, 255),
textSize: 10.0,
textFont: robotoFont,
},
caret: {
lineColour: toColour(255, 255, 255, 255),
},
placeholder: {
backgroundColour: toColour(0, 0, 0, 120),
textColour: toColour(200, 200, 200, 200),
textSize: 10.0,
textFont: robotoFont,
}
});
passwordChange.confirmPasswordInput.masked = true;
passwordChange.confirmPasswordInput.placeholder = "Confirm password";
passwordChange.verificationCodeInput = passwordChange.window.textInput(20, 160, 260, 25, '', {
main: {
backgroundColour: toColour(0, 0, 0, 120),
textColour: toColour(200, 200, 200, 255),
textSize: 10.0,
textFont: robotoFont,
},
caret: {
lineColour: toColour(255, 255, 255, 255),
},
placeholder: {
backgroundColour: toColour(0, 0, 0, 120),
textColour: toColour(200, 200, 200, 200),
textSize: 10.0,
textFont: robotoFont,
}
});
passwordChange.verificationCodeInput.placeholder = "Verification Code (From Email)";
passwordChange.submitButton = passwordChange.window.button(20, 195, 260, 30, 'CHANGE PASSWORD', {
main: {
backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
textColour: toColour(255, 255, 255, 255),
textSize: 12.0,
textFont: robotoFont,
textAlign: 0.5,
},
focused: {
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
},
}, checkChangePassword);
logToConsole(LOG_DEBUG, `[VRR.GUI] Created change password GUI`);
}
// ===========================================================================
function passwordChangeFailed(errorMessage) {
logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports change password failed. Reason: ${errorMessage}`);
passwordChange.messageLabel.text = errorMessage;
passwordChange.messageLabel.styles.main.textColour = toColour(180, 32, 32, 255);
passwordChange.passwordInput.text = "";
passwordChange.confirmPasswordInput.text = "";
passwordChange.verificationCodeInput.text = "";
}
// ===========================================================================
function checkChangePassword() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Checking password change with server ...`);
triggerNetworkEvent("vrr.checkChangePassword", passwordChange.passwordInput.lines[0], passwordChange.confirmPasswordInput.lines[0], passwordChange.verificationCodeInput.lines[0]);
}
// ===========================================================================
function showChangePasswordGUI() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Showing change password window`);
closeAllWindows();
setChatWindowEnabled(false);
mexui.setInput(true);
passwordChange.window.shown = true;
}
// ===========================================================================
function passwordChangeSuccess() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports password change was successful`);
closeAllWindows();
}
// ===========================================================================

158
scripts/client/gui/resetpass.js
View File

@@ -6,3 +6,161 @@
// DESC: Provides password reset GUI
// TYPE: Client (JavaScript)
// ===========================================================================
let resetPassword = {
window: null,
logoImage: null,
messageLabel: null,
emailLabel: null,
emailInput: null,
resetPasswordButton: null,
backToLoginButton: null,
backToLoginLabel: null,
};
// ===========================================================================
function initResetPasswordGUI() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Creating password reset GUI ...`);
resetPassword.window = mexui.window(game.width/2-150, game.height/2-129, 300, 258, 'RESET PASSWORD', {
main: {
backgroundColour: toColour(secondaryColour[0], secondaryColour[1], secondaryColour[2], windowAlpha),
transitionTime: 500,
},
title: {
textSize: 0.0,
textColour: toColour(0, 0, 0, 0),
},
icon: {
textSize: 0.0,
textColour: toColour(0, 0, 0, 0),
},
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
resetPassword.window.titleBarIconSize = toVector2(0,0);
resetPassword.window.titleBarHeight = 0;
resetPassword.logoImage = resetPassword.window.image(100, 20, 100, 100, mainLogoPath, {
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
resetPassword.messageLabel = resetPassword.window.text(20, 135, 260, 20, 'Please confirm your email', {
main: {
textSize: 10.0,
textAlign: 0.5,
textColour: toColour(200, 200, 200, 255),
textFont: robotoFont,
},
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
resetPassword.emailInput = resetPassword.window.textInput(20, 170, 260, 25, '', {
main: {
backgroundColour: toColour(0, 0, 0, 120),
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], textInputAlpha),
textColour: toColour(200, 200, 200, 255),
textSize: 10.0,
textFont: robotoFont,
},
caret: {
lineColour: toColour(255, 255, 255, 255),
},
placeholder: {
textColour: toColour(200, 200, 200, 150),
textSize: 10.0,
textFont: robotoFont,
},
focused: {
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], 255),
},
});
resetPassword.emailInput.placeholder = "Email";
resetPassword.resetPasswordButton = resetPassword.window.button(20, 205, 260, 30, 'RESET PASSWORD', {
main: {
backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255),
textSize: 12.0,
textFont: robotoFont,
textAlign: 0.5,
},
focused: {
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
},
}, checkResetPassword);
resetPassword.backToLoginButton = resetPassword.window.button(200, 240, 60, 15, 'CANCEL', {
main: {
backgroundColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
textColour: toColour(primaryTextColour[0], primaryTextColour[1], primaryTextColour[2], 255),
textSize: 8.0,
textFont: robotoFont,
textAlign: 0.5,
},
focused: {
borderColour: toColour(primaryColour[0], primaryColour[1], primaryColour[2], buttonAlpha),
},
}, switchToLoginGUI);
resetPassword.backToLoginLabel = resetPassword.window.text(20, 140, 60, 15, 'Remembered your password? Click here >', {
main: {
textSize: 8.0,
textAlign: 1.0,
textColour: toColour(200, 200, 200, 255),
textFont: robotoFont,
},
focused: {
borderColour: toColour(0, 0, 0, 0),
},
});
logToConsole(LOG_DEBUG, `[VRR.GUI] Created password reset GUI`);
}
// ===========================================================================
function showResetPasswordGUI() {
closeAllWindows();
logToConsole(LOG_DEBUG, `[VRR.GUI] Showing password reset window`);
setChatWindowEnabled(false);
mexui.setInput(true);
resetPassword.window.shown = true;
}
// ===========================================================================
function checkResetPassword() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Checking password reset with server ...`);
triggerNetworkEvent("vrr.checkResetPassword", resetPassword.emailInput.lines[0]);
}
// ===========================================================================
function resetPasswordFailed(errorMessage) {
logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports password reset failed`);
resetPassword.messageLabel.text = errorMessage;
resetPassword.messageLabel.styles.main.textColour = toColour(180, 32, 32, 255);
resetPassword.emailInput.text = "";
}
// ===========================================================================
function resetPasswordSuccess() {
logToConsole(LOG_DEBUG, `[VRR.GUI] Server reports password reset was successful`);
closeAllWindows();
}
// ===========================================================================
function switchToLoginGUI() {
closeAllWindows();
showLoginGUI();
}
// ===========================================================================