diff --git a/basicswap/templates/changepassword.html b/basicswap/templates/changepassword.html index 1e75742..466f74f 100644 --- a/basicswap/templates/changepassword.html +++ b/basicswap/templates/changepassword.html @@ -1,185 +1,447 @@ {% include 'header.html' %} -{% from 'style.html' import breadcrumb_line_svg %} +{% from 'style.html' import breadcrumb_line_svg %} +
-
-
-
- -
-
-
-
-
-
- - - -
-
-

Change/Set your Password

-

Change or Set your BasicSwap / Wallets password.

-
-
-
-
-
- {% include 'inc_messages.html' %} -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - -
-
- Password -
- 		-
- -
-
Old Password -
-
- - -
- -
-
New Password -
-
- - -
- -
-
Confirm Password -
-
- - -
- -
-
-
-
-
+ +
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- +
+ +
+
+
+ + + +
+
+

Change/Set your Password

+

Change or Set your BasicSwap / Wallets password.

-
-
- - - - - - + + + {% include 'inc_messages.html' %} +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+ + + +
+
+ Password Strength: + Enter password +
+
+
+
+
+
+ +
+ +
+ + +
+ + +
+
+ +
+
+

Password Requirements

+
+
+ + + + At least 8 characters +
+
+ + + + Uppercase letter (A-Z) +
+
+ + + + Lowercase letter (a-z) +
+
+ + + + Number (0-9) +
+
+
+
+
+ +
+ +
+ + +
+
+
+
+
+
+
+
+
-{% include 'footer.html' %} - - - + setupPasswordToggle('old'); + setupPasswordToggle('new'); + setupPasswordToggle('confirm'); + + function setupPasswordToggle(type) { + const toggleBtn = document.getElementById(`toggle-${type}-password`); + const passwordInput = document.getElementById(`${type}password`); + const eyeOpen = document.getElementById(`eye-open-${type}`); + const eyeClosed = document.getElementById(`eye-closed-${type}`); + + if (toggleBtn && passwordInput) { + toggleBtn.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + + const isPassword = passwordInput.type === 'password'; + const cursorPosition = passwordInput.selectionStart; + const inputValue = passwordInput.value; + + passwordInput.type = isPassword ? 'text' : 'password'; + passwordInput.value = inputValue; + + setTimeout(() => { + passwordInput.setSelectionRange(cursorPosition, cursorPosition); + }, 0); + + if (isPassword) { + eyeOpen.classList.add('hidden'); + eyeClosed.classList.remove('hidden'); + } else { + eyeOpen.classList.remove('hidden'); + eyeClosed.classList.add('hidden'); + } + }); + + toggleBtn.addEventListener('mousedown', function(e) { + e.preventDefault(); + }); + } + } + + if (newPasswordInput) { + const capsWarning = document.getElementById('caps-warning-new'); + + newPasswordInput.addEventListener('keydown', function(e) { + const capsLockOn = e.getModifierState && e.getModifierState('CapsLock'); + if (capsLockOn && capsWarning) { + capsWarning.classList.remove('hidden'); + } else if (capsWarning) { + capsWarning.classList.add('hidden'); + } + }); + + newPasswordInput.addEventListener('keyup', function(e) { + const capsLockOn = e.getModifierState && e.getModifierState('CapsLock'); + if (!capsLockOn && capsWarning) { + capsWarning.classList.add('hidden'); + } + }); + } + + function calculatePasswordStrength(password) { + let score = 0; + const requirements = { + length: password.length >= 8, + uppercase: /[A-Z]/.test(password), + lowercase: /[a-z]/.test(password), + number: /\d/.test(password) + }; + + if (requirements.length) score += 25; + if (requirements.uppercase) score += 25; + if (requirements.lowercase) score += 25; + if (requirements.number) score += 25; + + if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score += 10; + + if (password.length >= 12) score += 10; + + return { score: Math.min(score, 100), requirements }; + } + + function updatePasswordStrength(password) { + const { score, requirements } = calculatePasswordStrength(password); + const strengthBar = document.getElementById('strength-bar'); + const strengthText = document.getElementById('strength-text'); + + if (strengthBar) { + strengthBar.style.width = `${score}%`; + + if (score === 0) { + strengthBar.className = 'h-2 rounded-full transition-all duration-300 bg-gray-300 dark:bg-gray-500'; + strengthText.textContent = 'Enter password'; + strengthText.className = 'text-sm font-medium text-gray-500 dark:text-gray-400'; + } else if (score < 40) { + strengthBar.className = 'h-2 rounded-full transition-all duration-300 bg-red-500'; + strengthText.textContent = 'Weak'; + strengthText.className = 'text-sm font-medium text-red-600 dark:text-red-400'; + } else if (score < 70) { + strengthBar.className = 'h-2 rounded-full transition-all duration-300 bg-yellow-500'; + strengthText.textContent = 'Fair'; + strengthText.className = 'text-sm font-medium text-yellow-600 dark:text-yellow-400'; + } else if (score < 90) { + strengthBar.className = 'h-2 rounded-full transition-all duration-300 bg-blue-500'; + strengthText.textContent = 'Good'; + strengthText.className = 'text-sm font-medium text-blue-600 dark:text-blue-400'; + } else { + strengthBar.className = 'h-2 rounded-full transition-all duration-300 bg-green-500'; + strengthText.textContent = 'Strong'; + strengthText.className = 'text-sm font-medium text-green-600 dark:text-green-400'; + } + } + + updateRequirement('length', requirements.length); + updateRequirement('uppercase', requirements.uppercase); + updateRequirement('lowercase', requirements.lowercase); + updateRequirement('number', requirements.number); + + return score >= 60; + } + + function updateRequirement(type, met) { + const element = document.getElementById(`req-${type}`); + if (element) { + if (met) { + element.className = 'flex items-center text-green-600 dark:text-green-400'; + } else { + element.className = 'flex items-center text-gray-500 dark:text-gray-400'; + } + } + } + + function checkPasswordMatch() { + const newPassword = newPasswordInput.value; + const confirmPassword = confirmPasswordInput.value; + const matchContainer = document.getElementById('password-match'); + const matchSuccess = document.getElementById('match-success'); + const matchError = document.getElementById('match-error'); + + if (confirmPassword.length === 0) { + matchContainer.classList.add('hidden'); + return false; + } + + matchContainer.classList.remove('hidden'); + + if (newPassword === confirmPassword) { + matchSuccess.classList.remove('hidden'); + matchError.classList.add('hidden'); + return true; + } else { + matchSuccess.classList.add('hidden'); + matchError.classList.remove('hidden'); + return false; + } + } + + if (newPasswordInput) { + newPasswordInput.addEventListener('input', function() { + updatePasswordStrength(this.value); + if (confirmPasswordInput.value) { + checkPasswordMatch(); + } + }); + } + + if (confirmPasswordInput) { + confirmPasswordInput.addEventListener('input', checkPasswordMatch); + } + + if (form) { + form.addEventListener('submit', function(e) { + const newPassword = newPasswordInput.value; + const isStrongEnough = updatePasswordStrength(newPassword); + const passwordsMatch = checkPasswordMatch(); + + if (!isStrongEnough) { + e.preventDefault(); + alert('Please choose a stronger password.'); + return; + } + + if (!passwordsMatch) { + e.preventDefault(); + alert('Passwords do not match.'); + return; + } + + if (submitBtn && submitText && submitSpinner) { + submitBtn.disabled = true; + submitText.textContent = 'Changing Password...'; + submitSpinner.classList.remove('hidden'); + } + }); + } + }); + + +{% include 'footer.html' %} diff --git a/basicswap/templates/unlock.html b/basicswap/templates/unlock.html index 136e43a..e81c03d 100644 --- a/basicswap/templates/unlock.html +++ b/basicswap/templates/unlock.html @@ -3,39 +3,16 @@ + {% if refresh %} {% endif %} (BSX) BasicSwap - v{{ version }} - - - - - - - - - - - - - - - - - - - - - - - - {% if current_page == 'wallets' or current_page == 'wallet' %} - - {% endif %} - - - - - - - - (BSX) BasicSwap - v{{ version }} - - -
-
-
-
- - - - -

Unlock your wallets

- {% for m in messages %} - - {% endfor %} - {% for m in err_messages %} - - {% endfor %} + +
+
+
+
+ +
-
-
- -
-
- - -
- -
+

Unlock BasicSwap

+

Enter your password to access your wallets

+
+ + {% for m in messages %} +
+ {% endfor %} + + {% for m in err_messages %} + + {% endfor %} + +
+
+ +
+ + +
+ +
+ + + + +
+ +
+

+ Need help? + + View tutorials + +

+

+ {{ title }} +

-
+