salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): align password action with status summary

Browse Source 
Keep the Change password control on the same row as the username and password-status copy in the settings card, so the summary reads as one horizontal unit instead of stacked text followed by a separate action row.
This commit is contained in:
VooDisss
2026-04-01 17:32:27 +03:00
parent 750e73f540
commit 5f3e9317ca
2 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/ui/src/components/settings/remote-access-settings-section.tsx
View File

@@ -220,31 +220,35 @@ export const RemoteAccessSettingsSection: Component = () => {
fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>} fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>}
> >
<div class="settings-card-content"> <div class="settings-card-content">
<p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p> <div class="settings-password-summary-row">
<p class="settings-help-text"> <div class="settings-password-summary-copy">
{authStatus()!.passwordUserProvided <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
? t("remoteAccess.password.status.set") <p class="settings-help-text">
: t("remoteAccess.password.status.unset")} {authStatus()!.passwordUserProvided
</p> ? t("remoteAccess.password.status.set")
: t("remoteAccess.password.status.unset")}
</p>
</div>
<div class="settings-password-actions"> <div class="settings-password-actions">
<button <button
class="settings-pill-button" class="settings-pill-button"
type="button" type="button"
onClick={() => { onClick={() => {
setPasswordFormOpen(!passwordFormOpen()) setPasswordFormOpen(!passwordFormOpen())
setPasswordError(null) setPasswordError(null)
}} }}
> >
{passwordFormOpen() {passwordFormOpen()
? t("remoteAccess.password.actions.cancel") ? t("remoteAccess.password.actions.cancel")
: authStatus()!.passwordUserProvided : authStatus()!.passwordUserProvided
? t("remoteAccess.password.actions.change") ? t("remoteAccess.password.actions.change")
: t("remoteAccess.password.actions.set")} : t("remoteAccess.password.actions.set")}
</button> </button>
</div>
</div> </div>
<Show when={passwordFormOpen()}> <Show when={passwordFormOpen()}>
<div class="settings-form-group"> <div class="settings-form-group">
<label class="settings-form-label">{t("remoteAccess.password.form.newPassword")}</label> <label class="settings-form-label">{t("remoteAccess.password.form.newPassword")}</label>
<input <input

19
packages/ui/src/styles/components/settings-screen.css
View File

@@ -279,10 +279,25 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }
.settings-password-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.settings-password-summary-copy {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.settings-password-actions { .settings-password-actions {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-end;
margin-top: 0.75rem; margin-top: 0;
} }
.settings-form-group { .settings-form-group {