Skip to content

Commit b581cfb

Browse files
AMZheleva21AMZheleva21
committed
Add show password option and footer
1 parent b4450a1 commit b581cfb

File tree

3 files changed

+274
-147
lines changed

3 files changed

+274
-147
lines changed

‎My_path_team9/auth/templates/login.html‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,82 @@
22

33
{% block title %}Login{% endblock %}
44
{% block content %}
5+
6+
<style>
7+
.password-input {
8+
border-radius: 1.2rem;
9+
border: 2px solid #2563eb;
10+
transition: border 0.2s;
11+
}
12+
.password-input:focus {
13+
border: 2px solid #2563eb;
14+
box-shadow: 0 0 0 2px #2563eb22;
15+
}
16+
.password-group .password-error {
17+
color: #2563eb;
18+
font-weight: 500;
19+
}
20+
.btn-eye:focus { outline: none; }
21+
</style>
22+
23+
524
<div class="row justify-content-center">
625
<div class="col-md-5">
726
<h2 class="mb-4">Login</h2>
827
<form method="POST" novalidate>
9-
1028
{{ form.hidden_tag() }}
1129
<div class="mb-3">
12-
1330
{{ form.username.label(class="form-label") }}
1431
{{ form.username(class="form-control", placeholder="Enter username") }}
1532
{% for error in form.username.errors %}
16-
<div class="text-danger small">{{ error }}</div>
33+
<div class="text-danger small">{{ error }}</div>
1734
{% endfor %}
1835
</div>
1936

20-
<div class="mb-3">
37+
<div class="mb-3 password-group" style="position:relative;">
2138
{{ form.password.label(class="form-label") }}
22-
{{ form.password(class="form-control", placeholder="Enter password") }}
39+
<div style="position:relative;">
40+
{{ form.password(class="form-control password-input", placeholder="Enter password", id="login-password", style="padding-right:2.5rem;") }}
41+
<button type="button" class="btn btn-eye" id="toggle-login-password" tabindex="-1" aria-label="Show password" style="position:absolute;top:50%;right:0.9rem;transform:translateY(-50%);background:none;border:none;padding:0;display:flex;align-items:center;">
42+
<span id="login-eye">
43+
<!-- Eye with slash SVG (default, hidden) -->
44+
<svg id="eye-closed-login" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="#2563eb" stroke-width="2"><path d="M17.94 17.94C16.12 19.13 14.13 20 12 20c-5 0-9-6-9-8 0-1.09 1.13-3.13 3.06-5.06M6.06 6.06C7.88 4.87 9.87 4 12 4c5 0 9 6 9 8 0 .91-.97 2.7-2.7 4.36"/><path d="M3 3l18 18"/><path d="M9.88 9.88A2 2 0 0112 8a2 2 0 012 2c0 .414-.126.8-.34 1.12"/></svg>
45+
<!-- Open eye SVG (hidden by default) -->
46+
<svg id="eye-open-login" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="#2563eb" stroke-width="2" style="display:none"><ellipse cx="12" cy="12" rx="9" ry="7"/><circle cx="12" cy="12" r="3"/></svg>
47+
</span>
48+
</button>
49+
</div>
2350
{% for error in form.password.errors %}
24-
<div class="text-danger small">{{ error }}</div>
51+
<div class="password-error" style="color:#2563eb;display:flex;align-items:center;font-size:0.98rem;margin-top:0.3rem;"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#2563eb" stroke-width="2" style="margin-right:0.3rem;"><circle cx="12" cy="12" r="10" fill="none"/><path d="M12 8v4m0 4h.01"/></svg> {{ error }}</div>
2552
{% endfor %}
26-
</div>
53+
</div>
2754

2855
<button type="submit" class="btn btn-primary">{{ form.submit.label.text }}</button>
2956
</form>
3057
<p class="mt-3">
31-
3258
Don't have an account? <a href="{{ url_for('auth.register') }}">Register here</a>.
3359
</p>
3460
</div>
3561
</div>
62+
<script>
63+
document.addEventListener('DOMContentLoaded', function() {
64+
const pwInput = document.getElementById('login-password');
65+
const toggleBtn = document.getElementById('toggle-login-password');
66+
const eyeClosed = document.getElementById('eye-closed-login');
67+
const eyeOpen = document.getElementById('eye-open-login');
68+
if (toggleBtn && pwInput && eyeClosed && eyeOpen) {
69+
toggleBtn.addEventListener('click', function() {
70+
if (pwInput.type === 'password') {
71+
pwInput.type = 'text';
72+
eyeClosed.style.display = 'none';
73+
eyeOpen.style.display = 'inline';
74+
} else {
75+
pwInput.type = 'password';
76+
eyeClosed.style.display = 'inline';
77+
eyeOpen.style.display = 'none';
78+
}
79+
});
80+
}
81+
});
82+
</script>
3683
{% endblock %}

‎My_path_team9/auth/templates/register.html‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,25 @@
33
{% block title %}Register{% endblock %}
44

55
{% block content %}
6+
7+
<style>
8+
.password-input {
9+
border-radius: 1.2rem;
10+
border: 2px solid #2563eb;
11+
transition: border 0.2s;
12+
}
13+
.password-input:focus {
14+
border: 2px solid #2563eb;
15+
box-shadow: 0 0 0 2px #2563eb22;
16+
}
17+
.password-group .password-error {
18+
color: #2563eb;
19+
font-weight: 500;
20+
}
21+
.btn-eye:focus { outline: none; }
22+
</style>
23+
24+
625
<div class="row justify-content-center">
726
<div class="col-md-5">
827
<h2 class="mb-4">Register</h2>
@@ -23,18 +42,35 @@ <h2 class="mb-4">Register</h2>
2342
{{ form.email(class="form-control", placeholder="Enter email") }}
2443
{% for error in form.email.errors %}
2544
<div class="text-danger small">{{ error }}</div>
26-
2745
{% endfor %}
2846
</div>
2947

30-
<div class="mb-3">
48+
<div class="mb-3 password-group" style="position:relative;">
3149
{{ form.password.label(class="form-label") }}
32-
{{ form.password(class="form-control", placeholder="Enter password") }}
50+
<div style="position:relative;">
51+
{{ form.password(class="form-control password-input", placeholder="Enter password", id="register-password", style="padding-right:2.5rem;") }}
52+
<button type="button" class="btn btn-eye" id="toggle-register-password" tabindex="-1" aria-label="Show password" style="position:absolute;top:50%;right:0.9rem;transform:translateY(-50%);background:none;border:none;padding:0;display:flex;align-items:center;">
53+
<span id="register-eye">
54+
<!-- Eye with slash SVG (default, hidden) -->
55+
<svg id="eye-closed-register" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="#2563eb" stroke-width="2"><path d="M17.94 17.94C16.12 19.13 14.13 20 12 20c-5 0-9-6-9-8 0-1.09 1.13-3.13 3.06-5.06M6.06 6.06C7.88 4.87 9.87 4 12 4c5 0 9 6 9 8 0 .91-.97 2.7-2.7 4.36"/><path d="M3 3l18 18"/><path d="M9.88 9.88A2 2 0 0112 8a2 2 0 012 2c0 .414-.126.8-.34 1.12"/></svg>
56+
<!-- Open eye SVG (hidden by default) -->
57+
<svg id="eye-open-register" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="#2563eb" stroke-width="2" style="display:none"><ellipse cx="12" cy="12" rx="9" ry="7"/><circle cx="12" cy="12" r="3"/></svg>
58+
</span>
59+
</button>
60+
</div>
61+
<div class="password-info-list glassy-password-list" style="margin-top:0.5rem;margin-left:0;max-width:370px;padding:1rem 1.2rem 0.7rem 1.2rem;border-radius:1.1rem;background:#f0f6ff;border:1.5px solid #dbeafe;box-shadow:0 4px 24px 0 rgba(37,99,235,0.07);">
62+
<div style="font-weight:600;color:#2563eb;margin-bottom:0.3rem;letter-spacing:0.01em;">The password must have:</div>
63+
<ul style="list-style:none;padding-left:0;margin-bottom:0;">
64+
<li style="color:#2563eb;font-size:1rem;margin-bottom:0.18rem;display:flex;align-items:center;font-weight:500;"><span style="color:#2563eb;font-size:1.2em;margin-right:0.6em;">✓</span>At least 8 characters</li>
65+
<li style="color:#2563eb;font-size:1rem;margin-bottom:0.18rem;display:flex;align-items:center;font-weight:500;"><span style="color:#2563eb;font-size:1.2em;margin-right:0.6em;">✓</span>At least one number</li>
66+
<li style="color:#2563eb;font-size:1rem;margin-bottom:0.18rem;display:flex;align-items:center;font-weight:500;"><span style="color:#2563eb;font-size:1.2em;margin-right:0.6em;">✓</span>At least one uppercase letter</li>
67+
<li style="color:#2563eb;font-size:1rem;display:flex;align-items:center;font-weight:500;"><span style="color:#2563eb;font-size:1.2em;margin-right:0.6em;">✓</span>At least one lowercase letter</li>
68+
</ul>
69+
</div>
3370
{% for error in form.password.errors %}
34-
<div class="text-danger small">{{ error }}</div>
35-
71+
<div class="password-error" style="color:#2563eb;display:flex;align-items:center;font-size:0.98rem;margin-top:0.3rem;"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#2563eb" stroke-width="2" style="margin-right:0.3rem;"><circle cx="12" cy="12" r="10" fill="none"/><path d="M12 8v4m0 4h.01"/></svg> {{ error }}</div>
3672
{% endfor %}
37-
</div>
73+
</div>
3874

3975
<div class="mb-3">
4076
{{ form.role.label(class="form-label") }}
@@ -51,7 +87,25 @@ <h2 class="mb-4">Register</h2>
5187
</p>
5288
</div>
5389
</div>
54-
90+
<script>
91+
document.addEventListener('DOMContentLoaded', function() {
92+
const pwInput = document.getElementById('register-password');
93+
const toggleBtn = document.getElementById('toggle-register-password');
94+
const eyeClosed = document.getElementById('eye-closed-register');
95+
const eyeOpen = document.getElementById('eye-open-register');
96+
toggleBtn.addEventListener('click', function() {
97+
if (pwInput.type === 'password') {
98+
pwInput.type = 'text';
99+
eyeClosed.style.display = 'none';
100+
eyeOpen.style.display = 'inline';
101+
} else {
102+
pwInput.type = 'password';
103+
eyeClosed.style.display = 'inline';
104+
eyeOpen.style.display = 'none';
105+
}
106+
});
107+
});
108+
</script>
55109
{% endblock %}
56110

57111

0 commit comments

Comments
 (0)