Skip to content

Commit

Permalink
Improve users layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@svera
svera authored Jan 7, 2025
1 parent 95c87f8 commit b94cf83
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 165 deletions.
1 change: 1 addition & 0 deletions internal/webserver/embedded/translations/es.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"Delete": "Eliminar"
"Update your profile": "Actualizar tu perfil"
"Logout": "Cerrar sesión"
"New user": "Nuevo usuario"
"Edit user": "Editar usuario"
"Name cannot be empty": "Debes introducir un nombre"
"Incorrect email address": "Dirección de correo electrónico incorrecta"
Expand Down
1 change: 1 addition & 0 deletions internal/webserver/embedded/translations/fr.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"Delete": "Supprimer"
"Update your profile": "Mettre à jour votre profil"
"Logout": "Se déconnecter"
"New user": "Nouvel utilisateur"
"Edit user": "Modifier l'utilisateur"
"Name cannot be empty": "Le nom ne peut pas être vide"
"Incorrect email address": "Adresse e-mail incorrecte"
Expand Down
189 changes: 97 additions & 92 deletions internal/webserver/embedded/views/user/edit.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,110 @@
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class='nav-link {{if ne .ActiveTab "password"}}active{{end}}' id="home-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"
type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">{{t .Lang "Profile"}}</button>
</li>
<li class="nav-item" role="presentation">
<button class='nav-link {{if eq .ActiveTab "password"}}active{{end}}' id="profile-tab" data-bs-toggle="tab" data-bs-target="#password-tab-pane"
type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">{{t .Lang "Change password"}}</button>
</li>
</ul>
<div class="tab-content">
<div class='tab-pane fade p-3 {{if ne .ActiveTab "password"}}show active{{end}}' id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab"
tabindex="0">
<form hx-put="/users/{{.User.Username}}" hx-target="main" hx-target-400="main">
<div class="mb-3">
<label for="name" class="form-label">{{t .Lang "Name"}}</label>
<input type="text" name="name" class='form-control {{if ne (index .Errors "name") ""}}is-invalid{{end}}' id="name" required="required" value="{{.User.Name}}" maxlength="50">
{{if ne (index .Errors "name") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.name}}
<div class="row mb-3 mt-5">
<div class="col mb-3">
<h2>{{t .Lang "Edit user"}}</h2>
</div>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class='nav-link {{if ne .ActiveTab "password"}}active{{end}}' id="home-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"
type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">{{t .Lang "Profile"}}</button>
</li>
<li class="nav-item" role="presentation">
<button class='nav-link {{if eq .ActiveTab "password"}}active{{end}}' id="profile-tab" data-bs-toggle="tab" data-bs-target="#password-tab-pane"
type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">{{t .Lang "Change password"}}</button>
</li>
</ul>
<div class="tab-content">
<div class='tab-pane fade p-3 {{if ne .ActiveTab "password"}}show active{{end}}' id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab"
tabindex="0">
<form hx-put="/users/{{.User.Username}}" hx-target="main" hx-target-400="main">
<div class="mb-3">
<label for="name" class="form-label">{{t .Lang "Name"}}</label>
<input type="text" name="name" class='form-control {{if ne (index .Errors "name") ""}}is-invalid{{end}}' id="name" required="required" value="{{.User.Name}}" maxlength="50">
{{if ne (index .Errors "name") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.name}}
</div>
{{end}}
</div>
{{end}}
</div>
<div class="mb-3">
<label for="username" class="form-label">{{t .Lang "Username"}}</label>
<input type="text" name="username" class='form-control {{if ne (index .Errors "username") ""}}is-invalid{{end}}' id="username" required="required" value="{{.User.Username}}" maxlength="20" pattern="{{.UsernamePattern}}">
{{if ne (index .Errors "username") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.username}}
<div class="mb-3">
<label for="username" class="form-label">{{t .Lang "Username"}}</label>
<input type="text" name="username" class='form-control {{if ne (index .Errors "username") ""}}is-invalid{{end}}' id="username" required="required" value="{{.User.Username}}" maxlength="20" pattern="{{.UsernamePattern}}">
{{if ne (index .Errors "username") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.username}}
</div>
{{end}}
</div>
{{end}}
</div>
<div class="mb-3">
<label for="email" class="form-label">{{t .Lang "Email"}}</label>
<input type="email" name="email" class='form-control {{if ne (index .Errors "email") ""}}is-invalid{{end}}' id="email" required="required" value="{{.User.Email}}" maxlength="100">
{{if ne (index .Errors "email") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.email}}
<div class="mb-3">
<label for="email" class="form-label">{{t .Lang "Email"}}</label>
<input type="email" name="email" class='form-control {{if ne (index .Errors "email") ""}}is-invalid{{end}}' id="email" required="required" value="{{.User.Email}}" maxlength="100">
{{if ne (index .Errors "email") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.email}}
</div>
{{end}}
</div>
{{end}}
</div>
<div class="mb-3">
<label for="send-to-email" class="form-label">{{t .Lang "Default send to email address"}}</label>
<input type="email" name="send-to-email" class='form-control {{if ne (index .Errors "sendtoemail") ""}}is-invalid{{end}}' id="send-to-email" value="{{.User.SendToEmail}}" maxlength="100">
{{if ne (index .Errors "sendtoemail") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.sendtoemail}}
<div class="mb-3">
<label for="send-to-email" class="form-label">{{t .Lang "Default send to email address"}}</label>
<input type="email" name="send-to-email" class='form-control {{if ne (index .Errors "sendtoemail") ""}}is-invalid{{end}}' id="send-to-email" value="{{.User.SendToEmail}}" maxlength="100">
{{if ne (index .Errors "sendtoemail") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.sendtoemail}}
</div>
{{end}}
</div>
{{end}}
</div>
<div class="mb-3">
<label for="words-per-minute" class="form-label">{{t .Lang "Reading speed (in words per minute)"}}</label>
<input type="number" name="words-per-minute" class='form-control {{if ne (index .Errors "wordsperminute") ""}}is-invalid{{end}}' id="words-per-minute" value="{{.User.WordsPerMinute}}" min="1" max="999" required="required">
{{if ne (index .Errors "wordsperminute") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.wordsperminute}}
<div class="mb-3">
<label for="words-per-minute" class="form-label">{{t .Lang "Reading speed (in words per minute)"}}</label>
<input type="number" name="words-per-minute" class='form-control {{if ne (index .Errors "wordsperminute") ""}}is-invalid{{end}}' id="words-per-minute" value="{{.User.WordsPerMinute}}" min="1" max="999" required="required">
{{if ne (index .Errors "wordsperminute") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.wordsperminute}}
</div>
{{end}}
</div>
{{end}}
</div>
<input type="hidden" name="id" value="{{.User.Uuid}}">
<button type="submit" class="btn btn-primary">{{t .Lang "Update"}}</button>
</form>
</div>
<div class='tab-pane fade p-3 {{if eq .ActiveTab "password"}}show active{{end}}' id="password-tab-pane" role="tabpanel" aria-labelledby="password-tab"
tabindex="0">
<form hx-put="/users/{{.User.Username}}" hx-target="main" hx-target-400="main">
{{if eq .Session.Uuid .User.Uuid}}
<div class="mb-3">
<label for="old-password" class="form-label">{{t .Lang "Current password"}}</label>
<input type="password" name="old-password" class='form-control {{if ne (index .Errors "oldpassword") ""}}is-invalid{{end}}' id="old-password"
required="required" minlength="{{.MinPasswordLength}}" maxlength="50">
{{if ne (index .Errors "oldpassword") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.oldpassword}}
<input type="hidden" name="id" value="{{.User.Uuid}}">
<button type="submit" class="btn btn-primary">{{t .Lang "Update"}}</button>
</form>
</div>
<div class='tab-pane fade p-3 {{if eq .ActiveTab "password"}}show active{{end}}' id="password-tab-pane" role="tabpanel" aria-labelledby="password-tab"
tabindex="0">
<form hx-put="/users/{{.User.Username}}" hx-target="main" hx-target-400="main">
{{if eq .Session.Uuid .User.Uuid}}
<div class="mb-3">
<label for="old-password" class="form-label">{{t .Lang "Current password"}}</label>
<input type="password" name="old-password" class='form-control {{if ne (index .Errors "oldpassword") ""}}is-invalid{{end}}' id="old-password"
required="required" minlength="{{.MinPasswordLength}}" maxlength="50">
{{if ne (index .Errors "oldpassword") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.oldpassword}}
</div>
{{end}}
</div>
{{end}}
</div>
{{end}}
<div class="mb-3">
<label for="password" class="form-label">{{t .Lang "Password"}}</label>
<input type="password" name="password" class='form-control {{if ne (index .Errors "password") ""}}is-invalid{{end}}' id="password" required="required"
minlength="{{.MinPasswordLength}}" maxlength="50">
{{if ne (index .Errors "password") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.password .MinPasswordLength}}
<div class="mb-3">
<label for="password" class="form-label">{{t .Lang "Password"}}</label>
<input type="password" name="password" class='form-control {{if ne (index .Errors "password") ""}}is-invalid{{end}}' id="password" required="required"
minlength="{{.MinPasswordLength}}" maxlength="50">
{{if ne (index .Errors "password") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.password .MinPasswordLength}}
</div>
{{end}}
</div>
{{end}}
</div>
<div class="mb-3">
<label for="confirm-password" class="form-label">{{t .Lang "Confirm password"}}</label>
<input type="password" name="confirm-password" class='form-control {{if ne (index .Errors "confirmpassword") ""}}is-invalid{{end}}' id="confirm-password"
required="required" minlength="{{.MinPasswordLength}}" maxlength="50">
{{if ne (index .Errors "confirmpassword") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.confirmpassword}}
<div class="mb-3">
<label for="confirm-password" class="form-label">{{t .Lang "Confirm password"}}</label>
<input type="password" name="confirm-password" class='form-control {{if ne (index .Errors "confirmpassword") ""}}is-invalid{{end}}' id="confirm-password"
required="required" minlength="{{.MinPasswordLength}}" maxlength="50">
{{if ne (index .Errors "confirmpassword") ""}}
<div class="invalid-feedback">
{{t .Lang .Errors.confirmpassword}}
</div>
{{end}}
</div>
{{end}}
</div>

<input type="hidden" name="password-tab" value="true">
<button type="submit" class="btn btn-primary">{{t .Lang "Update"}}</button>
</form>
<input type="hidden" name="password-tab" value="true">
<button type="submit" class="btn btn-primary">{{t .Lang "Update"}}</button>
</form>
</div>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion internal/webserver/embedded/views/user/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{$lang := .Lang}}
{{$admins := .Admins}}
<div class="row mb-3">
<div class="row mb-3 mt-5">
<div class="col">
<h2>{{t $lang "Users"}}</h2>
</div>
Expand Down
Loading

0 comments on commit b94cf83

Please sign in to comment.