connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve login form layout and accessibility

Browse Source 
- Move remember checkboxes inline with inputs for better space utilization
- Implement proper tab order: server → username → password → checkboxes
- Increase form width from 400px to 500px to accommodate horizontal layout
- Make checkbox labels more concise ("Remember" instead of full text)
- Enhance checkbox styling with vertical label placement and larger size
- Reduce form label bottom margin for tighter spacing
- Ensure consistent input widths across all form fields

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-13 18:15:47 -04:00
parent a4476dcfae
commit fad03f94f9
2 changed files with 64 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/login.rs
View File

@@ -164,45 +164,53 @@ pub fn Login(props: &LoginProps) -> Html {
<form onsubmit={on_submit}>
<div class="form-group">
<label for="server_url">{"CalDAV Server URL"}</label>
<input
ref={server_url_ref}
type="text"
id="server_url"
placeholder="https://your-caldav-server.com/dav/"
value={(*server_url).clone()}
onchange={on_server_url_change}
disabled={*is_loading}
/>
<div class="remember-checkbox">
<div class="input-with-checkbox">
<input
type="checkbox"
id="remember_server"
checked={*remember_server}
onchange={on_remember_server_change}
ref={server_url_ref}
type="text"
id="server_url"
placeholder="https://your-caldav-server.com/dav/"
value={(*server_url).clone()}
onchange={on_server_url_change}
disabled={*is_loading}
tabindex="1"
/>
<label for="remember_server">{"Remember server"}</label>
<div class="remember-checkbox">
<label for="remember_server">{"Remember"}</label>
<input
type="checkbox"
id="remember_server"
checked={*remember_server}
onchange={on_remember_server_change}
tabindex="4"
/>
</div>
</div>
</div>
<div class="form-group">
<label for="username">{"Username"}</label>
<input
ref={username_ref}
type="text"
id="username"
placeholder="Enter your username"
value={(*username).clone()}
onchange={on_username_change}
disabled={*is_loading}
/>
<div class="remember-checkbox">
<div class="input-with-checkbox">
<input
type="checkbox"
id="remember_username"
checked={*remember_username}
onchange={on_remember_username_change}
ref={username_ref}
type="text"
id="username"
placeholder="Enter your username"
value={(*username).clone()}
onchange={on_username_change}
disabled={*is_loading}
tabindex="2"
/>
<label for="remember_username">{"Remember username"}</label>
<div class="remember-checkbox">
<label for="remember_username">{"Remember"}</label>
<input
type="checkbox"
id="remember_username"
checked={*remember_username}
onchange={on_remember_username_change}
tabindex="5"
/>
</div>
</div>
</div>
@@ -216,6 +224,7 @@ pub fn Login(props: &LoginProps) -> Html {
value={(*password).clone()}
onchange={on_password_change}
disabled={*is_loading}
tabindex="3"
/>
</div>