Enhance user settings UX with separate profile and key management pages.

app/assets/stylesheets/application.tailwind.css

@@ -45,31 +45,75 @@
 }
 
 @layer components {
-  p.alert, p.notice {
-    @apply border my-5;
-  }
+  /* header */
 
   body > header {
     @apply relative w-full flex flex-wrap items-center py-4 bg-gray-100 text-gray-900 shadow-lg mb-4;
   }
 
-  header > nav {
+  header > nav.bar {
     @apply container mx-auto flex flex-wrap items-center justify-between;
   }
 
-  nav > a.logo {
+  header > nav.bar ul {
+    @apply flex space-x-3;
+  }
+
+  nav.bar > a.logo {
     @apply text-lg font-bold hover:no-underline space-x-3 flex;
   }
 
   a.logo > svg {
+    @apply text-cyan-700;
     width: 23px;
     height: 27px;
   }
 
-  body > main {
+  /* notifications */
+
+  p.alert, p.notice {
+    @apply border my-5;
+  }
+
+  /* bodyer */
+
+  body .bodyer {
     @apply container mx-auto flex-col;
   }
 
+  .with-sidebar {
+    @apply flex flex-row;
+  }
+
+  .with-sidebar aside {
+    @apply w-1/4 px-2;
+  }
+
+  .with-sidebar main {
+    @apply w-3/4 pt-4 px-2;
+  }
+
+  .with-sidebar aside .sticky-menu {
+    @apply sticky top-0 p-4 w-full;
+  }
+
+  .sticky-menu ul {
+    @apply flex flex-col overflow-hidden;
+  }
+
+  .sticky-menu svg {
+    width: 14px;
+    heigth: 16px;
+  }
+
+  .sticky-menu li > a {
+    @apply items-center flex space-x-2 p-3 text-black hover:no-underline;
+  }
+
+  .sticky-menu li > a.active {
+    @apply bg-sky-200;
+  }
+
   form, .form {
     @apply flex flex-col space-y-4 mb-4;
   }

app/controllers/settings/base_controller.rb

@@ -0,0 +1,8 @@
+class Settings::BaseController < ApplicationController
+  before_action :require_login
+
+  def active?(name)
+    name == controller_name ? :active : nil
+  end
+  helper_method :active?
+end

app/controllers/settings/keys_controller.rb

@@ -0,0 +1,5 @@
+class Settings::KeysController < Settings::BaseController
+  def show
+    nil
+  end
+end

app/controllers/settings/profile_controller.rb

@@ -0,0 +1,5 @@
+class Settings::ProfileController < Settings::BaseController
+  def show
+    nil
+  end
+end

app/views/application/_header.html.slim

@@ -1,9 +1,11 @@
 header
-  nav
+  nav.bar
     a.logo href=root_path
-      svg.svg-inline--fal.fa-xl.text-cyan-700[aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" data-fa-i2svg=""]
-        path[fill="currentColor" d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"]
-      span Book
+      = render 'svg/fa_book'
+      span = t('book')
     - if current_user.present?
-      a href=user_path(current_user) Profile
-      = link_to 'Logout', destroy_user_session_path, method: :delete
+      ul
+        li
+          a href=settings_profile_path = t('profile')
+        li
+          = link_to t('logout'), destroy_user_session_path, method: :delete

app/views/application/_main.html.slim

@@ -0,0 +1,3 @@
+main
+  = yield
+

app/views/layouts/application.html.slim

@@ -0,0 +1,16 @@
+doctype html
+html
+  head
+    title = t('book')
+    meta[name="viewport" content="width=device-width,initial-scale=1"]
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_link_tag "application", "data-turbo-track": "reload"
+    = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
+    = javascript_importmap_tags
+  body
+    = render "header"
+    .bodyer
+      = render "notifications"
+      = content_for?(:bodyer) ? yield(:bodyer) : render('main')
+    = render "footer"

app/views/layouts/settings/base.html.slim

@@ -0,0 +1,17 @@
+- content_for :bodyer do
+  .with-sidebar
+    aside
+      .sticky-menu
+        ul
+          li
+            = link_to settings_profile_path, class: active?('profile')
+              = render 'svg/fa_user'
+              span = t('profile')
+          li
+            = link_to settings_keys_path, class: active?('keys')
+              = render 'svg/fa_key'
+              span = t('keys')
+    main
+      = yield
+
+= render template: 'layouts/application'

app/views/settings/keys/show.html.slim

@@ -0,0 +1,43 @@
+h1 = t('key_management')
+
+.info
+  - if current_user.public_key.present?
+    h3 = t('your_public_key')
+    pre.mb-4 = current_user.public_key
+
+div data-controller="keys"
+  .form
+    .field
+      label for="full_name" Full name
+      br
+      input id="full_name" type="text" data-keys-target="username"
+
+    .field
+      label for="passphrase" Passphrase
+      br
+      input id="passphrase" type="password" data-keys-target="passphrase"
+
+  = form_with model: current_user do |f|
+    = f.hidden_field :email, name: nil, value: current_user.email, data: { keys_target: "email" }
+
+    .button
+      button data-action="click->keys#generate" Generate Key Pair
+
+    .field
+      = f.label :public_key
+      br
+      = f.text_area :public_key, required: true, data: { keys_target: "publicKey", action: "input->keys#publicKeyInput" }
+
+    .field
+      = f.label :private_key
+      br
+      = f.text_area :private_key, name: nil, data: { keys_target: "privateKey", action: "input->keys#privateKeyInput" }
+
+    .field
+      = f.label :fingerprint
+      br
+      = f.text_field :fingerprint, data: { keys_target: "fingerprint" }, readonly: true
+
+    .button
+      = f.submit "Update Keys", data: { action: "click->keys#register" }
+

app/views/settings/profile/show.html.slim

@@ -0,0 +1,6 @@
+h1 = t('user_details')
+
+.controller[data-controller="user_details"]
+  .form
+    .field
+      label for="first_name" = t('settings.user.first_name')

app/views/svg/_fa_book.html.slim

@@ -0,0 +1,2 @@
+svg.svg-inline--fa[aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" data-fa-i2svg=""]
+  path[fill="currentColor" d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"]

app/views/svg/_fa_key.html.slim

@@ -0,0 +1,2 @@
+svg.svg-inline--fa[aria-hidden="true" focusable="false" data-prefix="fas" data-icon="key" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" data-fa-i2svg=""]
+  path[fill="currentColor" d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"]

app/views/svg/_fa_user.html.slim

@@ -0,0 +1,2 @@
+svg.svg-inline--fa[aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" data-fa-i2svg=""]
+  path[fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"]

config/locales/en.yml

@@ -1,4 +1,12 @@
 en:
-  hello: Hello
+  book: Book
+  profile: Profile
+  logout: Logout
+
+  keys: Keys
+
   key_management: Key Management
   your_public_key: Your public key
+  user_details: User Details
+
+  first_name: First Name

config/locales/ru.yml

@@ -1,4 +1,12 @@
 ru:
-  hello: Привет
+  book: Книга
+  profile: Профиль
+  logout: Выйти
+
+  keys: Ключи
+
   key_management: Управление ключами
   your_public_key: Ваш публичный ключ
+  user_details: Данные пользователя
+
+  first_name: Имя

config/routes.rb

@@ -9,6 +9,9 @@
   end
   resources :users, only: %i[show update]
 
+  get '/settings/profile', to: 'settings/profile#show'
+  get '/settings/keys', to: 'settings/keys#show'
+
   get '/records/introduction/new', as: 'new_introduction'
   post '/records/introduction', to: 'records/introduction#create', as: 'create_introduction'
   post '/records/signature', to: 'records/signature#create', as: 'sign_record'