steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
237 lines
10 KiB
HTML
237 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description"
|
|
content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality. ">
|
|
<meta name="author" content="Webpixels">
|
|
<title>Reset password Page</title>
|
|
<!-- Fonts -->
|
|
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet"> -->
|
|
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
|
<link href="../assets/css/style.css" rel="stylesheet">
|
|
<!-- Theme CSS -->
|
|
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
|
<!-- Demo CSS - No need to use these in your project -->
|
|
<!-- <link type="text/css" href="../assets/css/demo.css" rel="stylesheet"> -->
|
|
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
|
<link type="text/css" href="../assets/css/password.css" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body class="aifo-bg-primary">
|
|
|
|
<!-- fixed-header glass-panel -->
|
|
<main class="auth-page d-flex justify-content-center align-items-center" id="reset-password">
|
|
<!-- banner start -->
|
|
|
|
<div class="auth-container">
|
|
<div class="auth-card">
|
|
<div class="logo-container">
|
|
<a href="../index.html">
|
|
<img src="../assets/images/brand/logo_1.svg" alt="" />
|
|
</a>
|
|
</div>
|
|
<h1 class="auth-title" id="pageTitle">Set password at AIFO</h1>
|
|
<p class="auth-description" id="pageDescription">Reset your password and choose a new one to log in to
|
|
your AIFO profile.</p>
|
|
<form id="passwordForm" novalidate>
|
|
<div class="form-group">
|
|
<label for="newPassword" class="form-label" id="passwordLabel">Create new password</label>
|
|
<div class="input-wrapper">
|
|
<input type="password" class="form-control" id="newPassword"
|
|
placeholder="Enter your password" required>
|
|
<button type="button"
|
|
class="toggle-password" data-target="newPassword"
|
|
aria-label="Toggle password visibility"> <i class="fas fa-eye"></i> </button>
|
|
</div>
|
|
<p class="password-hint" id="hintText">Uppercase and lowercase letters and numeric symbols</p>
|
|
<div class="invalid-feedback" id="newPasswordError"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword" class="form-label" id="confirmLabel">Confirm Password</label>
|
|
<div class="input-wrapper">
|
|
<input type="password" class="form-control" id="confirmPassword"
|
|
placeholder="Confirm your password" required>
|
|
<button type="button"
|
|
class="toggle-password" data-target="confirmPassword"
|
|
aria-label="Toggle password visibility"> <i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div class="invalid-feedback" id="confirmPasswordError"></div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<span id="buttonText">Create new password</span> </button>
|
|
|
|
<p class="security-note" id="securityNote">Please note that we recommend creating a strong password
|
|
for your account due to protective security measures.</p>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
<!-- Core -->
|
|
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
|
|
<script src="../assets/vendor/popper/popper.min.js"></script>
|
|
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
|
|
<!-- FontAwesome 5 -->
|
|
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
|
<!-- Page plugins -->
|
|
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
|
|
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
|
|
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
|
|
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
|
|
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
|
|
<!-- Theme JS -->
|
|
<script src="../assets/js/theme.js"></script>
|
|
<!-- Top code bar behavior -->
|
|
|
|
</body>
|
|
|
|
<script>
|
|
const defaultConfig = {
|
|
page_title: "Set password at AIFO",
|
|
description_text: "Reset your password and choose a new one to log in to your AIFO profile.",
|
|
password_label: "Create new password",
|
|
confirm_label: "Confirm Password",
|
|
button_text: "Create new password",
|
|
hint_text: "Uppercase and lowercase letters and numeric symbols",
|
|
security_note: "Please note that we recommend creating a strong password for your account due to protective security measures."
|
|
};
|
|
|
|
async function onConfigChange(config) {
|
|
document.getElementById('pageTitle').textContent = config.page_title || defaultConfig.page_title;
|
|
document.getElementById('descriptionText').textContent = config.description_text || defaultConfig.description_text;
|
|
document.getElementById('passwordLabel').textContent = config.password_label || defaultConfig.password_label;
|
|
document.getElementById('confirmLabel').textContent = config.confirm_label || defaultConfig.confirm_label;
|
|
document.getElementById('buttonText').textContent = config.button_text || defaultConfig.button_text;
|
|
document.getElementById('hintText').textContent = config.hint_text || defaultConfig.hint_text;
|
|
document.getElementById('securityNote').textContent = config.security_note || defaultConfig.security_note;
|
|
}
|
|
|
|
function mapToCapabilities(config) {
|
|
return {
|
|
recolorables: [],
|
|
borderables: [],
|
|
fontEditable: undefined,
|
|
fontSizeable: undefined
|
|
};
|
|
}
|
|
|
|
function mapToEditPanelValues(config) {
|
|
return new Map([
|
|
["page_title", config.page_title || defaultConfig.page_title],
|
|
["description_text", config.description_text || defaultConfig.description_text],
|
|
["password_label", config.password_label || defaultConfig.password_label],
|
|
["confirm_label", config.confirm_label || defaultConfig.confirm_label],
|
|
["button_text", config.button_text || defaultConfig.button_text],
|
|
["hint_text", config.hint_text || defaultConfig.hint_text],
|
|
["security_note", config.security_note || defaultConfig.security_note]
|
|
]);
|
|
}
|
|
|
|
if (window.elementSdk) {
|
|
window.elementSdk.init({
|
|
defaultConfig,
|
|
onConfigChange,
|
|
mapToCapabilities,
|
|
mapToEditPanelValues
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Toggle password visibility
|
|
$('.toggle-password').on('click', function() {
|
|
const targetId = $(this).data('target');
|
|
const input = $('#' + targetId);
|
|
const icon = $(this).find('i');
|
|
|
|
if (input.attr('type') === 'password') {
|
|
input.attr('type', 'text');
|
|
icon.removeClass('fa-eye').addClass('fa-eye-slash');
|
|
} else {
|
|
input.attr('type', 'password');
|
|
icon.removeClass('fa-eye-slash').addClass('fa-eye');
|
|
}
|
|
});
|
|
|
|
// Form validation
|
|
$('#passwordForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const newPassword = $('#newPassword').val();
|
|
const confirmPassword = $('#confirmPassword').val();
|
|
let isValid = true;
|
|
|
|
// Clear previous errors
|
|
$('.form-control').removeClass('is-invalid');
|
|
$('.invalid-feedback').text('').hide();
|
|
|
|
// Validate new password
|
|
if (newPassword.length < 8) {
|
|
$('#newPassword').addClass('is-invalid');
|
|
$('#newPasswordError').text('Password must be at least 8 characters').show();
|
|
isValid = false;
|
|
} else if (!/[A-Z]/.test(newPassword)) {
|
|
$('#newPassword').addClass('is-invalid');
|
|
$('#newPasswordError').text('Password must contain uppercase letter').show();
|
|
isValid = false;
|
|
} else if (!/[a-z]/.test(newPassword)) {
|
|
$('#newPassword').addClass('is-invalid');
|
|
$('#newPasswordError').text('Password must contain lowercase letter').show();
|
|
isValid = false;
|
|
} else if (!/[0-9]/.test(newPassword)) {
|
|
$('#newPassword').addClass('is-invalid');
|
|
$('#newPasswordError').text('Password must contain number').show();
|
|
isValid = false;
|
|
}
|
|
|
|
// Validate confirm password
|
|
if (confirmPassword !== newPassword) {
|
|
$('#confirmPassword').addClass('is-invalid');
|
|
$('#confirmPasswordError').text('Passwords do not match').show();
|
|
isValid = false;
|
|
}
|
|
|
|
if (isValid) {
|
|
const $btn = $('#submitBtn');
|
|
const originalText = $('#buttonText').text();
|
|
|
|
$btn.prop('disabled', true);
|
|
$('#buttonText').html('<i class="fas fa-spinner fa-spin mr-2"></i>Creating...');
|
|
|
|
// Simulate submission
|
|
setTimeout(function() {
|
|
$btn.prop('disabled', false);
|
|
$('#buttonText').text(originalText);
|
|
|
|
// Show success message
|
|
const successMsg = $('<div class="alert alert-success mt-3" role="alert">Password created successfully!</div>');
|
|
$('#passwordForm').append(successMsg);
|
|
|
|
setTimeout(function() {
|
|
successMsg.fadeOut(function() {
|
|
$(this).remove();
|
|
});
|
|
}, 3000);
|
|
|
|
// Reset form
|
|
$('#passwordForm')[0].reset();
|
|
}, 1500);
|
|
}
|
|
});
|
|
|
|
// Clear error state on input
|
|
$('.form-control').on('input', function() {
|
|
$(this).removeClass('is-invalid');
|
|
$(this).siblings('.invalid-feedback').text('').hide();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</html> |