From 622fc07a7624f79d5d025997495c13efba8ff7d1 Mon Sep 17 00:00:00 2001
From: Edrick Leong <10529706+edrickleong@users.noreply.github.com>
Date: Mon, 5 Feb 2024 22:19:23 +0800
Subject: [PATCH] feat: add settings page (#274)

* feat: add settings page

* feat: add updating family name

* fix: formatting

* refactor: update to use Rails label helper
---
 .gitignore                             |  3 ++
 app/controllers/settings_controller.rb | 21 +++++++++++++
 app/models/user.rb                     |  1 +
 app/views/layouts/application.html.erb |  1 +
 app/views/settings/edit.html.erb       | 42 ++++++++++++++++++++++++++
 config/routes.rb                       |  1 +
 6 files changed, 69 insertions(+)
 create mode 100644 app/controllers/settings_controller.rb
 create mode 100644 app/views/settings/edit.html.erb

diff --git a/.gitignore b/.gitignore
index c3cf448c..763dc3f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,6 @@
 
 /app/assets/builds/*
 !/app/assets/builds/.keep
+
+# Ignore Jetbrains IDEs
+.idea
diff --git a/app/controllers/settings_controller.rb b/app/controllers/settings_controller.rb
new file mode 100644
index 00000000..c7b4d73a
--- /dev/null
+++ b/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
diff --git a/app/models/user.rb b/app/models/user.rb
index 5c8f05de..97d9d362 100644
--- a/app/models/user.rb
+++ b/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 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index bcfed54a..f491f517 100644
--- a/app/views/layouts/application.html.erb
+++ b/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>
diff --git a/app/views/settings/edit.html.erb b/app/views/settings/edit.html.erb
new file mode 100644
index 00000000..dffe29b0
--- /dev/null
+++ b/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 %>
diff --git a/config/routes.rb b/config/routes.rb
index f46a9718..7453b36c 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -3,6 +3,7 @@ Rails.application.routes.draw do
   resource :session
   resource :password_reset
   resource :password
+  resource :settings, only: %i[edit update]
 
   resources :accounts