easy-admin-rails 0.2.5 → 0.2.6

data/app/assets/builds/easy_admin.css

@@ -3644,6 +3644,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   margin-top: auto;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -3748,6 +3752,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   height: 100%;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -3929,6 +3937,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   max-width: 24rem;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -4257,6 +4269,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   white-space: pre-wrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -5005,6 +5021,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   padding-top: 1.5rem;
 }
 
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -5113,6 +5133,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   letter-spacing: 0.05em;
 }
 
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
 .text-amber-400 {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
@@ -5277,6 +5301,21 @@ input:checked + .toggle-switch .toggle-slider:before {
   color: rgb(133 77 14 / var(--tw-text-opacity, 1));
 }
 
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+}
+
+.text-yellow-900 {
+  --tw-text-opacity: 1;
+  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -5836,6 +5875,21 @@ input:checked + .toggle-switch .toggle-slider:before {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-green-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-green-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-red-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:from-blue-600:hover {
   --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);

data/app/components/easy_admin/navbar_component.rb

@@ -160,17 +160,28 @@ module EasyAdmin
           data: { dropdown_target: "menu" }
         ) do
           div(class: "py-1") do
-            render_menu_item("Sign out", logout_icon, "#", "text-red-600 hover:bg-red-50")
+            render_menu_item("Settings", settings_menu_icon, EasyAdmin::Engine.routes.url_helpers.profile_path, "text-gray-700 hover:bg-gray-100")
+            render_menu_item("Sign out", logout_icon, EasyAdmin::Engine.routes.url_helpers.destroy_admin_user_session_path, "text-red-600 hover:bg-red-50", method: :delete)
           end
         end
       end
     end
 
-    def render_menu_item(label, icon_svg, url, extra_classes = "text-gray-700 hover:bg-gray-100")
-      a(
+    def render_menu_item(label, icon_svg, url, extra_classes = "text-gray-700 hover:bg-gray-100", method: :get)
+      link_options = {
         href: url,
         class: "block px-4 py-2 text-sm #{extra_classes}"
-      ) do
+      }
+      
+      # Add method and confirmation for delete operations
+      if method == :delete
+        link_options[:data] = { 
+          turbo_method: :delete,
+          turbo_confirm: "Are you sure you want to sign out?"
+        }
+      end
+      
+      a(**link_options) do
         div(class: "flex items-center space-x-2") do
           unsafe_raw(icon_svg)
           span { label }
@@ -219,6 +230,10 @@ module EasyAdmin
       '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>'
     end
 
+    def settings_menu_icon
+      '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>'
+    end
+
     def logout_icon
       '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>'
     end

data/app/components/easy_admin/profile/change_password_modal_component.rb

@@ -0,0 +1,75 @@
+module EasyAdmin
+  module Profile
+    class ChangePasswordModalComponent < BaseComponent
+      def initialize(user:)
+        @user = user
+      end
+      
+      def view_template
+        div do
+          p(class: "text-sm text-gray-600 mb-6") { "Update your password to keep your account secure" }
+          
+          form(action: EasyAdmin::Engine.routes.url_helpers.update_password_path, method: :patch, data: { turbo_frame: "_top" }) do
+            input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token) if helpers.respond_to?(:form_authenticity_token)
+            input(type: "hidden", name: "_method", value: "patch")
+            
+            div(class: "space-y-4") do
+              # Current Password
+              div do
+                label(for: "admin_user_current_password", class: "block text-sm font-medium text-gray-700 mb-2") { "Current Password" }
+                input(
+                  type: "password",
+                  name: "admin_user[current_password]",
+                  id: "admin_user_current_password",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Enter current password",
+                  required: true
+                )
+              end
+              
+              # New Password
+              div do
+                label(for: "admin_user_password", class: "block text-sm font-medium text-gray-700 mb-2") { "New Password" }
+                input(
+                  type: "password",
+                  name: "admin_user[password]",
+                  id: "admin_user_password",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Enter new password",
+                  required: true
+                )
+              end
+              
+              # Confirm Password
+              div do
+                label(for: "admin_user_password_confirmation", class: "block text-sm font-medium text-gray-700 mb-2") { "Confirm New Password" }
+                input(
+                  type: "password",
+                  name: "admin_user[password_confirmation]",
+                  id: "admin_user_password_confirmation",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Confirm new password",
+                  required: true
+                )
+              end
+              
+              # Submit button
+              div(class: "flex space-x-3 pt-4") do
+                input(
+                  type: "submit",
+                  value: "Update Password",
+                  class: "flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer"
+                )
+                button(
+                  type: "button",
+                  class: "flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-400 transition-colors",
+                  data: { action: "click->modal#close" }
+                ) { "Cancel" }
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/profile/profile_tab_component.rb

@@ -0,0 +1,92 @@
+module EasyAdmin
+  module Profile
+    class ProfileTabComponent < BaseComponent
+      def initialize(user:)
+        @user = user
+      end
+      
+      def view_template
+        div do
+          # Section header
+          div(class: "mb-6") do
+            h2(class: "text-lg font-medium text-gray-900") { "Profile Information" }
+            p(class: "text-sm text-gray-600 mt-1") { "Update your personal information" }
+          end
+          
+          # Profile form
+          form(action: EasyAdmin::Engine.routes.url_helpers.update_profile_path, method: :patch) do
+            # Rails CSRF token
+            input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token) if helpers.respond_to?(:form_authenticity_token)
+            # Rails method spoofing for PATCH
+            input(type: "hidden", name: "_method", value: "patch")
+            
+            div(class: "space-y-6") do
+              # First Name
+              div do
+                label(for: "admin_user_first_name", class: "block text-sm font-medium text-gray-700 mb-2") { "First Name" }
+                input(
+                  type: "text",
+                  name: "admin_user[first_name]",
+                  id: "admin_user_first_name",
+                  value: @user.first_name,
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Enter your first name"
+                )
+                render_field_errors(@user, :first_name)
+              end
+              
+              # Last Name  
+              div do
+                label(for: "admin_user_last_name", class: "block text-sm font-medium text-gray-700 mb-2") { "Last Name" }
+                input(
+                  type: "text",
+                  name: "admin_user[last_name]",
+                  id: "admin_user_last_name", 
+                  value: @user.last_name,
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Enter your last name"
+                )
+                render_field_errors(@user, :last_name)
+              end
+              
+              # Email
+              div do
+                label(for: "admin_user_email", class: "block text-sm font-medium text-gray-700 mb-2") { "Email" }
+                input(
+                  type: "email",
+                  name: "admin_user[email]",
+                  id: "admin_user_email",
+                  value: @user.email,
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  placeholder: "Enter your email address"
+                )
+                render_field_errors(@user, :email)
+              end
+              
+              # Submit button
+              div do
+                input(
+                  type: "submit",
+                  value: "Update Profile",
+                  class: "bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors cursor-pointer"
+                )
+              end
+            end
+          end
+        end
+      end
+      
+      private
+      
+      def render_field_errors(object, field)
+        return unless object.errors[field].any?
+        
+        div(class: "mt-1") do
+          object.errors[field].each do |error|
+            p(class: "text-sm text-red-600") { error }
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/profile/security_tab_component.rb

@@ -0,0 +1,53 @@
+module EasyAdmin
+  module Profile
+    class SecurityTabComponent < BaseComponent
+      def initialize(user:)
+        @user = user
+      end
+      
+      def view_template
+        div(class: "space-y-8") do
+          # Password section
+          render_password_section
+          
+          # Two-factor authentication section
+          div(id: "two_factor_section") do
+            render_two_factor_section
+          end
+        end
+      end
+      
+      private
+      
+      def render_password_section
+        div do
+          # Section header
+          div(class: "mb-6") do
+            h2(class: "text-lg font-medium text-gray-900") { "Change Password" }
+            p(class: "text-sm text-gray-600 mt-1") { "Update your password to keep your account secure" }
+          end
+          
+          # Change password button
+          a(
+            href: EasyAdmin::Engine.routes.url_helpers.change_password_path,
+            class: "bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors",
+            data: { turbo_frame: "modal" }
+          ) { "Change Password" }
+        end
+      end
+      
+      def render_two_factor_section
+        div(class: "pt-8 border-t border-gray-200") do
+          # Section header
+          div(class: "mb-6") do
+            h2(class: "text-lg font-medium text-gray-900") { "Two-Factor Authentication" }
+            p(class: "text-sm text-gray-600 mt-1") { "Add an extra layer of security to your account" }
+          end
+          
+          # 2FA status and actions
+          render EasyAdmin::TwoFactor::StatusComponent.new(user: @user)
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/profile/settings_component.rb

@@ -0,0 +1,103 @@
+module EasyAdmin
+  module Profile
+    class SettingsComponent < BaseComponent
+      def initialize(user:)
+        @user = user
+      end
+      
+      def view_template
+        div(class: "min-h-screen bg-gray-50 py-6") do
+          div(class: "max-w-6xl mx-auto px-6") do
+            # Page header
+            div(class: "mb-8") do
+              h1(class: "text-2xl font-semibold text-gray-900") { "Settings" }
+              p(class: "text-gray-600 mt-1") { "Manage your account settings and preferences" }
+            end
+            
+            # Settings layout with vertical tabs
+            div(
+              class: "bg-white rounded-lg overflow-hidden",
+              data: { controller: "vertical-tabs" }
+            ) do
+              div(class: "flex") do
+                # Left sidebar - Tab navigation
+                render_tab_navigation
+                
+                # Right content area
+                render_content_area
+              end
+            end
+          end
+        end
+      end
+      
+      private
+      
+      def render_tab_navigation
+        nav(class: "w-64 bg-gray-50 border-r border-gray-200 py-6") do
+          div(class: "px-4") do
+            render_tab_item("profile", "Profile", profile_icon, active: true)
+            render_tab_item("security", "Security", security_icon)
+          end
+        end
+      end
+      
+      def render_tab_item(tab_id, label, icon_svg, active: false)
+        button(
+          class: "w-full flex items-center px-3 py-2 mb-2 text-left rounded-lg transition-colors #{tab_classes(active)}",
+          data: {
+            action: "click->vertical-tabs#switchTab",
+            vertical_tabs_target: "tab",
+            tab_id: tab_id
+          }
+        ) do
+          div(class: "w-5 h-5 mr-3") { unsafe_raw(icon_svg) }
+          span(class: "font-medium") { label }
+        end
+      end
+      
+      def render_content_area
+        div(class: "flex-1 p-6") do
+          # Profile tab content
+          div(
+            class: "tab-content",
+            data: { 
+              vertical_tabs_target: "content",
+              tab_id: "profile"
+            }
+          ) do
+            render EasyAdmin::Profile::ProfileTabComponent.new(user: @user)
+          end
+          
+          # Security tab content
+          div(
+            class: "tab-content hidden",
+            data: { 
+              vertical_tabs_target: "content",
+              tab_id: "security"
+            }
+          ) do
+            render EasyAdmin::Profile::SecurityTabComponent.new(user: @user)
+          end
+        end
+      end
+      
+      def tab_classes(active)
+        if active
+          "bg-blue-50 text-blue-700 border-blue-200"
+        else
+          "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+        end
+      end
+      
+      # SVG Icons
+      def profile_icon
+        '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>'
+      end
+      
+      def security_icon
+        '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>'
+      end
+    end
+  end
+end

data/app/components/easy_admin/two_factor/backup_codes_component.rb

@@ -0,0 +1,118 @@
+module EasyAdmin
+  module TwoFactor
+    class BackupCodesComponent < BaseComponent
+      def initialize(user:, codes: nil)
+        @user = user
+        @codes = codes # Fresh codes if just generated
+      end
+      
+      def view_template
+        return render_unavailable unless @user.two_factor_available?
+        return render_not_enabled unless @user.two_factor_enabled?
+        
+        if @codes
+          render_fresh_codes
+        else
+          render_existing_codes
+        end
+      end
+      
+      private
+      
+      def render_unavailable
+        div(class: "text-center") do
+          h3(class: "text-lg font-medium text-gray-900 mb-2") { "2FA Not Available" }
+          p(class: "text-gray-600") { "Two-factor authentication is not available." }
+        end
+      end
+      
+      def render_not_enabled
+        div(class: "text-center") do
+          h3(class: "text-lg font-medium text-gray-900 mb-2") { "2FA Not Enabled" }
+          p(class: "text-gray-600 mb-4") { "Enable two-factor authentication first to generate backup codes." }
+          a(
+            href: EasyAdmin::Engine.routes.url_helpers.two_factor_setup_path,
+            class: "bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+          ) { "Enable 2FA" }
+        end
+      end
+      
+      def render_fresh_codes
+        div do
+          div(class: "bg-green-50 border border-green-200 rounded-lg p-4 mb-6") do
+            div(class: "flex items-center mb-2") do
+              div(class: "w-5 h-5 text-green-500 mr-2") do
+                unsafe_raw '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
+              end
+              h3(class: "text-sm font-medium text-green-900") { "New Backup Codes Generated" }
+            end
+            p(class: "text-sm text-green-700") do
+              "Save these codes in a secure place. Each code can only be used once."
+            end
+          end
+          
+          render_codes_list(@codes)
+        end
+      end
+      
+      def render_existing_codes
+        div do
+          div(class: "mb-6") do
+            div(class: "flex items-center justify-between mb-4") do
+              span(class: "text-sm text-gray-500") do
+                "#{@user.backup_codes_remaining} codes remaining"
+              end
+            end
+            
+            if @user.backup_codes_remaining == 0
+              div(class: "bg-red-50 border border-red-200 rounded-lg p-4 mb-4") do
+                div(class: "flex items-center mb-2") do
+                  div(class: "w-5 h-5 text-red-500 mr-2") do
+                    unsafe_raw '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.996-.833-2.764 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>'
+                  end
+                  h4(class: "text-sm font-medium text-red-900") { "No Backup Codes Remaining" }
+                end
+                p(class: "text-sm text-red-700") do
+                  "You've used all your backup codes. Generate new ones to ensure you can access your account."
+                end
+              end
+            elsif @user.backup_codes_remaining <= 2
+              div(class: "bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4") do
+                div(class: "flex items-center mb-2") do
+                  div(class: "w-5 h-5 text-yellow-500 mr-2") do
+                    unsafe_raw '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.996-.833-2.764 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>'
+                  end
+                  h4(class: "text-sm font-medium text-yellow-900") { "Low on Backup Codes" }
+                end
+                p(class: "text-sm text-yellow-700") do
+                  "Consider generating new backup codes soon."
+                end
+              end
+            end
+          end
+          
+          render_codes_list(@user.otp_backup_codes || [])
+        end
+      end
+      
+      def render_codes_list(codes)
+        if codes.any?
+          div(class: "bg-gray-50 p-4 rounded-lg mb-6") do
+            div(class: "grid grid-cols-2 gap-2") do
+              codes.each do |code|
+                div(class: "bg-white p-3 rounded border text-center font-mono text-lg tracking-wider") do
+                  code
+                end
+              end
+            end
+          end
+        else
+          div(class: "bg-gray-50 p-4 rounded-lg mb-6 text-center") do
+            p(class: "text-gray-500 italic") { "No backup codes available" }
+          end
+        end
+      end
+      
+    end
+  end
+end