feat: add settings page (#274)

* feat: add settings page

* feat: add updating family name

* fix: formatting

* refactor: update to use Rails label helper

.gitignore

@@ -37,3 +37,6 @@
 
 /app/assets/builds/*
 !/app/assets/builds/.keep
+
+# Ignore Jetbrains IDEs
+.idea

app/controllers/settings_controller.rb

@@ -0,0 +1,21 @@
+class SettingsController < ApplicationController
+  before_action :authenticate_user!
+
+  def edit
+  end
+
+  def update
+    if Current.user.update(user_params)
+      redirect_to root_path, notice: "Profile updated successfully."
+    else
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  private
+
+  def user_params
+    params.require(:user).permit(:first_name, :last_name, :email, :password, :password_confirmation,
+                                 family_attributes: [ :name, :id ])
+  end
+end

app/models/user.rb

@@ -2,6 +2,7 @@ class User < ApplicationRecord
   has_secure_password
 
   belongs_to :family
+  accepts_nested_attributes_for :family
 
   validates :email, presence: true, uniqueness: true
   normalizes :email, with: ->(email) { email.strip.downcase }

app/views/layouts/application.html.erb

@@ -37,6 +37,7 @@
 
             <div class="absolute z-10 hidden w-screen px-2 mt-2 -translate-x-1/2 left-1/2 max-w-min" data-dropdown-target="menu">
               <div class="w-48 px-3 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+                <%= link_to "Settings", edit_settings_path, class: 'block p-2 hover:text-gray-600' %>
                 <%= button_to "Log Out", session_path, method: :delete, class: 'block p-2 hover:text-gray-600' %>
               </div>
             </div>

app/views/settings/edit.html.erb

@@ -0,0 +1,42 @@
+<h1 class="text-3xl font-semibold font-display">Update settings</h1>
+
+<%= form_with model: Current.user, url: settings_path, html: { class: "space-y-4" } do |form| %>
+  <%= form.fields_for :family_attributes do |family_fields| %>
+    <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+      <%= family_fields.label :name, "Family name", class: "block text-sm font-medium opacity-50 focus-within:opacity-100" %>
+      <%= family_fields.text_field :name, placeholder: "Family name", value: Current.family.name, class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+    </div>
+  <% end %>
+
+
+  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+    <%= form.label :first_name, class: "block text-sm font-medium opacity-50 focus-within:opacity-100" %>
+    <%= form.text_field :first_name, placeholder: "First name", value: Current.user.first_name, class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+  </div>
+
+  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+    <%= form.label :last_name, class: "block text-sm font-medium opacity-50 focus-within:opacity-100" %>
+    <%= form.text_field :last_name, placeholder: "Last name", value: Current.user.last_name, class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+  </div>
+
+  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+    <%= form.label :email, class: "block text-sm font-medium opacity-50 focus-within:opacity-100" %>
+    <%= form.email_field :email, placeholder: "Email", value: Current.user.email, class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+  </div>
+
+  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+    <%= form.label :password, class: "block text-sm font-medium opacity-50 focus-within:opacity-100" %>
+    <%= form.password_field :password, class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+  </div>
+
+  <div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+    <%= form.label :password_confirmation, class: "block text-sm font-medium opacity-50 focus-within:opacity-100" %>
+    <%= form.password_field :password_confirmation, class: "p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100" %>
+  </div>
+
+  <div class="absolute right-5 bottom-5">
+    <button type="submit" class="flex items-center justify-center w-12 h-12 mb-2 bg-black rounded-full shrink-0 grow-0 hover:bg-gray-600">
+      <i class="text-xl text-white fa-regular fa-check"></i>
+    </button>
+  </div>
+<% end %>

config/routes.rb

@@ -3,6 +3,7 @@
   resource :session
   resource :password_reset
   resource :password
+  resource :settings, only: %i[edit update]
 
   resources :accounts