97 lines
2.8 KiB
Cheetah
97 lines
2.8 KiB
Cheetah
{{/*
|
|
Gitea a11y fix: R1 — Password visibility toggle + R2 — aria-required
|
|
|
|
Override of user/auth/signin_inner.tmpl
|
|
Adds:
|
|
- Eye icon toggle to show/hide password content
|
|
- aria-required="true" on required fields
|
|
- Proper label associations
|
|
|
|
Deploy to: custom/templates/user/auth/signin_inner.tmpl
|
|
*/}}
|
|
{{template "base/head" .}}
|
|
<div class="page-content container">
|
|
<div class="signin">
|
|
<h1>{{.locale.Tr "sign_in"}}</h1>
|
|
|
|
<form action="{{AppSubUrl}}/user/login" method="post">
|
|
{{.CsrfTokenHtml}}
|
|
|
|
{{/* a11y R2: aria-required on username field */}}
|
|
<div class="field">
|
|
<label for="user_name">{{.locale.Tr "username"}}</label>
|
|
<input
|
|
id="user_name"
|
|
name="user_name"
|
|
type="text"
|
|
value="{{.user_name}}"
|
|
autofocus
|
|
required
|
|
aria-required="true"
|
|
autocomplete="username"
|
|
placeholder="{{.locale.Tr "username"}}"
|
|
/>
|
|
</div>
|
|
|
|
{{/* a11y R1: Password field with visibility toggle */}}
|
|
<div class="field" style="position:relative">
|
|
<label for="password">{{.locale.Tr "password"}}</label>
|
|
<div style="display:flex;align-items:center;position:relative">
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
aria-required="true"
|
|
autocomplete="current-password"
|
|
placeholder="{{.locale.Tr "password"}}"
|
|
style="flex:1;padding-right:36px"
|
|
/>
|
|
<button
|
|
type="button"
|
|
id="toggle-password"
|
|
aria-label="Show password"
|
|
title="Show password"
|
|
style="position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:16px"
|
|
onclick="togglePasswordVisibility()"
|
|
>👁</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<button type="submit" class="ui green button">
|
|
{{.locale.Tr "sign_in"}}
|
|
</button>
|
|
</div>
|
|
|
|
{{if .EnableOAuth2}}
|
|
<div class="ui divider"></div>
|
|
<div class="field">
|
|
<a href="{{AppSubUrl}}/user/oauth2" class="ui basic button">
|
|
{{.locale.Tr "sign_in_with_provider"}}
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePasswordVisibility() {
|
|
const input = document.getElementById('password');
|
|
const btn = document.getElementById('toggle-password');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
btn.textContent = '🙈';
|
|
btn.setAttribute('aria-label', 'Hide password');
|
|
btn.setAttribute('title', 'Hide password');
|
|
} else {
|
|
input.type = 'password';
|
|
btn.textContent = '👁';
|
|
btn.setAttribute('aria-label', 'Show password');
|
|
btn.setAttribute('title', 'Show password');
|
|
}
|
|
}
|
|
</script>
|
|
{{template "base/footer" .}}
|