235 lines
9.7 KiB
JavaScript
235 lines
9.7 KiB
JavaScript
import { apiPatch, apiPost, invalidateSessionCheck } from './api.js';
|
|
import { getRole, getUser, showToast } from './app.js';
|
|
|
|
/** @typedef {'admin_reset' | 'self'} PasswordModalMode */
|
|
|
|
/** @type {{ mode: PasswordModalMode, userID?: string, username?: string, role?: string } | null} */
|
|
let modalContext = null;
|
|
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s ?? '';
|
|
return d.innerHTML;
|
|
}
|
|
|
|
function roleLabel(role) {
|
|
if (!role) return '';
|
|
if (role === 'coach') return 'Counselor';
|
|
return role.charAt(0).toUpperCase() + role.slice(1);
|
|
}
|
|
|
|
function signInHintForRole(role) {
|
|
if (role === 'coach') {
|
|
return 'Counselors sign in through the mobile app and will be prompted to choose a new password there.';
|
|
}
|
|
return 'Supervisors sign in through this website and will be prompted to choose a new password at login.';
|
|
}
|
|
|
|
function ensurePasswordModal() {
|
|
let modal = document.getElementById('passwordModal');
|
|
if (modal) return modal;
|
|
|
|
modal = document.createElement('div');
|
|
modal.id = 'passwordModal';
|
|
modal.className = 'modal-overlay';
|
|
modal.hidden = true;
|
|
modal.setAttribute('role', 'dialog');
|
|
modal.setAttribute('aria-modal', 'true');
|
|
modal.setAttribute('aria-labelledby', 'passwordModalTitle');
|
|
modal.innerHTML = `
|
|
<div class="modal-dialog">
|
|
<h2 id="passwordModalTitle">Password</h2>
|
|
<p class="modal-subtitle" id="passwordModalSubtitle"></p>
|
|
<p class="modal-hint" id="passwordModalHint"></p>
|
|
<fieldset class="password-mode-fieldset" id="passwordModalModeFieldset">
|
|
<legend>Password type</legend>
|
|
<div class="password-mode-options">
|
|
<label class="password-mode-option">
|
|
<input type="radio" name="pw_mode" value="temporary" checked>
|
|
<span class="password-mode-option-title">Temporary password</span>
|
|
<span class="password-mode-option-desc">
|
|
They sign in with the password below, then must choose their own password before they can continue. Use this when you share the password by message or in person.
|
|
</span>
|
|
</label>
|
|
<label class="password-mode-option">
|
|
<input type="radio" name="pw_mode" value="permanent">
|
|
<span class="password-mode-option-title">Permanent password</span>
|
|
<span class="password-mode-option-desc">
|
|
This becomes their regular password. They are not asked to change it when signing in, until you reset it again.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<div class="form-group" id="passwordModalOldGroup" style="display:none">
|
|
<label for="pw_old_password">Current password</label>
|
|
<input type="password" id="pw_old_password" autocomplete="current-password" placeholder="Your current password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="pw_new_password">New password</label>
|
|
<input type="password" id="pw_new_password" autocomplete="new-password" placeholder="At least 6 characters">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="pw_new_password_confirm">Confirm new password</label>
|
|
<input type="password" id="pw_new_password_confirm" autocomplete="new-password" placeholder="Repeat password">
|
|
</div>
|
|
<p id="passwordModalError" class="error-text" style="display:none"></p>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-sm" data-password-cancel>Cancel</button>
|
|
<button type="button" class="btn btn-primary btn-sm" data-password-submit>Save</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(modal);
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) closePasswordModal();
|
|
});
|
|
modal.querySelector('[data-password-cancel]').addEventListener('click', closePasswordModal);
|
|
modal.querySelector('[data-password-submit]').addEventListener('click', submitPasswordModal);
|
|
modal.querySelector('#pw_new_password_confirm').addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') submitPasswordModal();
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
const el = document.getElementById('passwordModal');
|
|
if (!el || el.hidden) return;
|
|
if (e.key === 'Escape') closePasswordModal();
|
|
});
|
|
|
|
return modal;
|
|
}
|
|
|
|
/**
|
|
* @param {{ mode: PasswordModalMode, userID?: string, username?: string, role?: string }} options
|
|
*/
|
|
function openPasswordModal(options) {
|
|
modalContext = options;
|
|
const modal = ensurePasswordModal();
|
|
const isSelf = options.mode === 'self';
|
|
const username = options.username || getUser();
|
|
const role = options.role || getRole();
|
|
|
|
modal.querySelector('#passwordModalTitle').textContent = isSelf ? 'Change your password' : 'Reset password';
|
|
modal.querySelector('#passwordModalSubtitle').innerHTML = isSelf
|
|
? `Choose a new password for <strong>${esc(username)}</strong> (${esc(roleLabel(role))}).`
|
|
: `Set a new password for <strong>${esc(username)}</strong> (${esc(roleLabel(role))}).`;
|
|
modal.querySelector('#passwordModalHint').textContent = isSelf
|
|
? 'You will stay signed in after saving. Use this password on your next login.'
|
|
: signInHintForRole(role);
|
|
|
|
modal.querySelector('#passwordModalModeFieldset').style.display = isSelf ? 'none' : '';
|
|
modal.querySelector('#passwordModalOldGroup').style.display = isSelf ? '' : 'none';
|
|
|
|
if (!isSelf) {
|
|
modal.querySelector('input[name="pw_mode"][value="temporary"]').checked = true;
|
|
}
|
|
|
|
modal.querySelector('#pw_old_password').value = '';
|
|
modal.querySelector('#pw_new_password').value = '';
|
|
modal.querySelector('#pw_new_password_confirm').value = '';
|
|
const errEl = modal.querySelector('#passwordModalError');
|
|
errEl.style.display = 'none';
|
|
errEl.textContent = '';
|
|
|
|
modal.querySelector('[data-password-submit]').textContent = isSelf ? 'Change password' : 'Set password';
|
|
|
|
modal.hidden = false;
|
|
document.body.classList.add('modal-open');
|
|
(isSelf ? modal.querySelector('#pw_old_password') : modal.querySelector('#pw_new_password')).focus();
|
|
}
|
|
|
|
export function closePasswordModal() {
|
|
const modal = document.getElementById('passwordModal');
|
|
if (modal) modal.hidden = true;
|
|
document.body.classList.remove('modal-open');
|
|
modalContext = null;
|
|
}
|
|
|
|
export function openAdminResetPasswordModal({ userID, username, role }) {
|
|
openPasswordModal({ mode: 'admin_reset', userID, username, role });
|
|
}
|
|
|
|
export function openChangeOwnPasswordModal() {
|
|
openPasswordModal({ mode: 'self' });
|
|
}
|
|
|
|
function showModalError(el, msg) {
|
|
el.textContent = msg;
|
|
el.style.display = '';
|
|
}
|
|
|
|
async function submitPasswordModal() {
|
|
if (!modalContext) return;
|
|
const modal = document.getElementById('passwordModal');
|
|
const errEl = modal.querySelector('#passwordModalError');
|
|
errEl.style.display = 'none';
|
|
|
|
const newPassword = modal.querySelector('#pw_new_password').value;
|
|
const confirm = modal.querySelector('#pw_new_password_confirm').value;
|
|
|
|
if (newPassword.length < 6) {
|
|
showModalError(errEl, 'Password must be at least 6 characters');
|
|
return;
|
|
}
|
|
if (newPassword !== confirm) {
|
|
showModalError(errEl, 'Passwords do not match');
|
|
return;
|
|
}
|
|
|
|
const submitBtn = modal.querySelector('[data-password-submit]');
|
|
submitBtn.disabled = true;
|
|
const prevLabel = submitBtn.textContent;
|
|
submitBtn.textContent = 'Saving…';
|
|
|
|
try {
|
|
if (modalContext.mode === 'self') {
|
|
const oldPassword = modal.querySelector('#pw_old_password').value;
|
|
if (!oldPassword) {
|
|
showModalError(errEl, 'Current password is required');
|
|
return;
|
|
}
|
|
const data = await apiPost('auth/change-password', {
|
|
username: getUser(),
|
|
old_password: oldPassword,
|
|
new_password: newPassword,
|
|
});
|
|
if (!data.success) throw new Error(data.error || 'Failed to change password');
|
|
if (data.token) localStorage.setItem('qdb_token', data.token);
|
|
if (data.user) localStorage.setItem('qdb_user', data.user);
|
|
if (data.role) localStorage.setItem('qdb_role', data.role);
|
|
invalidateSessionCheck();
|
|
closePasswordModal();
|
|
showToast('Your password was changed', 'success');
|
|
return;
|
|
}
|
|
|
|
const mode = modal.querySelector('input[name="pw_mode"]:checked')?.value || 'temporary';
|
|
const temporary = mode === 'temporary';
|
|
const { userID, username } = modalContext;
|
|
|
|
const data = await apiPatch('users.php', {
|
|
userID,
|
|
password: newPassword,
|
|
mustChangePassword: temporary ? 1 : 0,
|
|
});
|
|
if (!data.success) throw new Error(data.error || 'Failed to reset password');
|
|
|
|
closePasswordModal();
|
|
showToast(
|
|
temporary
|
|
? `Temporary password set for "${username}" — they must change it on next sign-in`
|
|
: `Permanent password set for "${username}"`,
|
|
'success'
|
|
);
|
|
|
|
document.dispatchEvent(new CustomEvent('qdb:password-reset', {
|
|
detail: { userID, mustChangePassword: data.mustChangePassword ?? (temporary ? 1 : 0) },
|
|
}));
|
|
} catch (e) {
|
|
showModalError(errEl, e.message);
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = prevLabel;
|
|
}
|
|
}
|