mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
69 lines
3.1 KiB
Plaintext
69 lines
3.1 KiB
Plaintext
---
|
|
import Button from '@ui/Button.astro'
|
|
import InputGroup from '@ui/InputGroup.astro'
|
|
import FormGroup from '@ui/FormGroup.astro'
|
|
import Strength from '@ui/Strength.astro'
|
|
---
|
|
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="modal-change-password-title">Change password</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<form>
|
|
<FormGroup label="Current password" for="password-current" class="mb-4">
|
|
<InputGroup type="password" id="password-current" placeholder="Enter your current password" autocomplete="current-password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat />
|
|
</FormGroup>
|
|
|
|
<FormGroup label="New password" for="password-new" class="mb-4">
|
|
<InputGroup type="password" id="password-new" placeholder="Enter new password" autocomplete="new-password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat />
|
|
<Strength input="#password-new" ariaLabel="New password strength">Use 8 to 20 characters, with letters and numbers.</Strength>
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Confirm new password" for="password-confirm" class="mb-4">
|
|
<InputGroup type="password" id="password-confirm" placeholder="Confirm your new password" autocomplete="new-password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat />
|
|
<div class="invalid-feedback d-none" id="password-match-error" role="alert">Passwords do not match.</div>
|
|
</FormGroup>
|
|
|
|
<Button type="submit" text="Update password" color="primary" block class="mt-4" />
|
|
</form>
|
|
</div>
|
|
<!-- BEGIN CHANGE PASSWORD -->
|
|
<script is:inline>
|
|
// Password show/hide toggles are wired generically by InputGroup.astro (data-password-toggle).
|
|
// The strength meter is wired by tabler.js from data-bs-strength.
|
|
function initChangePassword() {
|
|
const newPasswordInput = document.getElementById('password-new')
|
|
const confirmPasswordInput = document.getElementById('password-confirm')
|
|
const matchError = document.getElementById('password-match-error')
|
|
|
|
if (!newPasswordInput || !confirmPasswordInput || !matchError) {
|
|
return
|
|
}
|
|
|
|
const validateMatch = () => {
|
|
const newPassword = newPasswordInput.value
|
|
const confirmPassword = confirmPasswordInput.value
|
|
|
|
if (confirmPassword && newPassword !== confirmPassword) {
|
|
confirmPasswordInput.classList.add('is-invalid')
|
|
confirmPasswordInput.setAttribute('aria-invalid', 'true')
|
|
confirmPasswordInput.setAttribute('aria-describedby', 'password-match-error')
|
|
matchError.classList.remove('d-none')
|
|
} else {
|
|
confirmPasswordInput.classList.remove('is-invalid')
|
|
confirmPasswordInput.removeAttribute('aria-invalid')
|
|
confirmPasswordInput.removeAttribute('aria-describedby')
|
|
matchError.classList.add('d-none')
|
|
}
|
|
}
|
|
|
|
newPasswordInput.addEventListener('input', validateMatch)
|
|
confirmPasswordInput.addEventListener('input', validateMatch)
|
|
}
|
|
|
|
document.readyState !== 'loading' ? initChangePassword() : document.addEventListener('DOMContentLoaded', initChangePassword, { once: true })
|
|
</script>
|
|
<!-- END CHANGE PASSWORD -->
|