diff --git a/scripts/client/gui/2fa.js b/scripts/client/gui/2fa.js new file mode 100644 index 00000000..16c092c2 --- /dev/null +++ b/scripts/client/gui/2fa.js @@ -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]); +} + +// =========================================================================== \ No newline at end of file diff --git a/scripts/client/gui/changepass.js b/scripts/client/gui/changepass.js new file mode 100644 index 00000000..a16a5dfe --- /dev/null +++ b/scripts/client/gui/changepass.js @@ -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(); +} + +// =========================================================================== \ No newline at end of file diff --git a/scripts/client/gui/resetpass.js b/scripts/client/gui/resetpass.js index 177a98cd..00fd2df1 100644 --- a/scripts/client/gui/resetpass.js +++ b/scripts/client/gui/resetpass.js @@ -5,4 +5,162 @@ // FILE: resetpass.js // 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(); +} + // =========================================================================== \ No newline at end of file