plutonium 0.34.1 → 0.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. checksums.yaml +4 -4
  2. data/.claude/skills/plutonium/skill.md +53 -0
  3. data/.claude/skills/{assets → plutonium-assets}/SKILL.md +13 -8
  4. data/.claude/skills/{connect-resource → plutonium-connect-resource}/SKILL.md +1 -1
  5. data/.claude/skills/{controller → plutonium-controller}/SKILL.md +27 -13
  6. data/.claude/skills/{create-resource → plutonium-create-resource}/SKILL.md +1 -1
  7. data/.claude/skills/{definition → plutonium-definition}/SKILL.md +10 -10
  8. data/.claude/skills/{definition-actions → plutonium-definition-actions}/SKILL.md +34 -9
  9. data/.claude/skills/{definition-fields → plutonium-definition-fields}/SKILL.md +38 -10
  10. data/.claude/skills/plutonium-definition-query/SKILL.md +356 -0
  11. data/.claude/skills/{forms → plutonium-forms}/SKILL.md +6 -6
  12. data/.claude/skills/{installation → plutonium-installation}/SKILL.md +9 -9
  13. data/.claude/skills/{interaction → plutonium-interaction}/SKILL.md +20 -19
  14. data/.claude/skills/{model → plutonium-model}/SKILL.md +3 -3
  15. data/.claude/skills/{model-features → plutonium-model-features}/SKILL.md +3 -3
  16. data/.claude/skills/{nested-resources → plutonium-nested-resources}/SKILL.md +5 -5
  17. data/.claude/skills/{package → plutonium-package}/SKILL.md +7 -8
  18. data/.claude/skills/{policy → plutonium-policy}/SKILL.md +26 -4
  19. data/.claude/skills/{portal → plutonium-portal}/SKILL.md +33 -31
  20. data/.claude/skills/{resource → plutonium-resource}/SKILL.md +27 -27
  21. data/.claude/skills/{rodauth → plutonium-rodauth}/SKILL.md +5 -5
  22. data/.claude/skills/plutonium-theming/SKILL.md +424 -0
  23. data/.claude/skills/{views → plutonium-views}/SKILL.md +7 -7
  24. data/CHANGELOG.md +52 -0
  25. data/CLAUDE.md +215 -0
  26. data/CONTRIBUTING.md +72 -18
  27. data/README.md +100 -19
  28. data/app/assets/plutonium.css +1 -11
  29. data/app/assets/plutonium.js +1685 -1146
  30. data/app/assets/plutonium.js.map +4 -4
  31. data/app/assets/plutonium.min.js +70 -70
  32. data/app/assets/plutonium.min.js.map +4 -4
  33. data/app/views/resource/interactive_bulk_action.html.erb +1 -5
  34. data/app/views/rodauth/_email_auth_request_form.html.erb +1 -1
  35. data/app/views/rodauth/_login_form.html.erb +15 -55
  36. data/app/views/rodauth/_login_form_footer.html.erb +2 -2
  37. data/app/views/rodauth/_password_visibility.html.erb +2 -8
  38. data/app/views/rodauth/add_recovery_codes.html.erb +2 -2
  39. data/app/views/rodauth/change_login.html.erb +36 -19
  40. data/app/views/rodauth/change_password.html.erb +34 -10
  41. data/app/views/rodauth/close_account.html.erb +12 -4
  42. data/app/views/rodauth/confirm_password.html.erb +19 -17
  43. data/app/views/rodauth/create_account.html.erb +30 -109
  44. data/app/views/rodauth/email_auth.html.erb +1 -1
  45. data/app/views/rodauth/logout.html.erb +4 -4
  46. data/app/views/rodauth/otp_auth.html.erb +13 -4
  47. data/app/views/rodauth/otp_disable.html.erb +12 -4
  48. data/app/views/rodauth/otp_setup.html.erb +29 -12
  49. data/app/views/rodauth/otp_unlock.html.erb +19 -10
  50. data/app/views/rodauth/otp_unlock_not_available.html.erb +7 -7
  51. data/app/views/rodauth/recovery_auth.html.erb +12 -4
  52. data/app/views/rodauth/recovery_codes.html.erb +12 -4
  53. data/app/views/rodauth/remember.html.erb +7 -7
  54. data/app/views/rodauth/reset_password.html.erb +23 -7
  55. data/app/views/rodauth/reset_password_request.html.erb +14 -10
  56. data/app/views/rodauth/sms_auth.html.erb +13 -4
  57. data/app/views/rodauth/sms_confirm.html.erb +13 -4
  58. data/app/views/rodauth/sms_disable.html.erb +12 -4
  59. data/app/views/rodauth/sms_request.html.erb +1 -1
  60. data/app/views/rodauth/sms_setup.html.erb +23 -7
  61. data/app/views/rodauth/two_factor_auth.html.erb +2 -2
  62. data/app/views/rodauth/two_factor_disable.html.erb +12 -4
  63. data/app/views/rodauth/two_factor_manage.html.erb +7 -7
  64. data/app/views/rodauth/unlock_account.html.erb +13 -5
  65. data/app/views/rodauth/unlock_account_request.html.erb +2 -2
  66. data/app/views/rodauth/verify_account.html.erb +25 -7
  67. data/app/views/rodauth/verify_account_resend.html.erb +14 -10
  68. data/app/views/rodauth/verify_login_change.html.erb +1 -1
  69. data/app/views/rodauth/webauthn_auth.html.erb +1 -1
  70. data/app/views/rodauth/webauthn_remove.html.erb +18 -8
  71. data/app/views/rodauth/webauthn_setup.html.erb +12 -4
  72. data/docs/.vitepress/config.ts +15 -26
  73. data/docs/.vitepress/theme/custom.css +388 -29
  74. data/docs/getting-started/index.md +1 -1
  75. data/docs/getting-started/tutorial/02-first-resource.md +9 -0
  76. data/docs/getting-started/tutorial/06-nested-resources.md +2 -2
  77. data/docs/getting-started/tutorial/07-author-portal.md +191 -0
  78. data/docs/getting-started/tutorial/{07-customizing-ui.md → 08-customizing-ui.md} +7 -7
  79. data/docs/getting-started/tutorial/index.md +5 -2
  80. data/docs/guides/authorization.md +33 -0
  81. data/docs/guides/creating-packages.md +12 -16
  82. data/docs/guides/custom-actions.md +36 -0
  83. data/docs/guides/search-filtering.md +121 -42
  84. data/docs/guides/theming.md +232 -36
  85. data/docs/index.md +203 -57
  86. data/docs/public/og-image.png +0 -0
  87. data/docs/reference/controller/index.md +14 -16
  88. data/docs/reference/definition/actions.md +38 -3
  89. data/docs/reference/definition/fields.md +3 -3
  90. data/docs/reference/definition/index.md +2 -2
  91. data/docs/reference/generators/index.md +0 -1
  92. data/docs/reference/interaction/index.md +14 -10
  93. data/docs/reference/model/index.md +0 -1
  94. data/docs/reference/portal/index.md +13 -27
  95. data/gemfiles/rails_7.gemfile.lock +1 -1
  96. data/gemfiles/rails_8.0.gemfile.lock +1 -1
  97. data/gemfiles/rails_8.1.gemfile.lock +1 -1
  98. data/lib/generators/pu/pkg/portal/portal_generator.rb +0 -2
  99. data/lib/generators/pu/pkg/portal/templates/app/views/package/dashboard/index.html.erb +28 -72
  100. data/lib/plutonium/action/interactive.rb +2 -2
  101. data/lib/plutonium/core/controller.rb +2 -1
  102. data/lib/plutonium/definition/actions.rb +2 -2
  103. data/lib/plutonium/lib/deep_freezer.rb +3 -7
  104. data/lib/plutonium/query/filter.rb +14 -0
  105. data/lib/plutonium/query/filters/association.rb +49 -0
  106. data/lib/plutonium/query/filters/boolean.rb +35 -0
  107. data/lib/plutonium/query/filters/date.rb +97 -0
  108. data/lib/plutonium/query/filters/date_range.rb +58 -0
  109. data/lib/plutonium/query/filters/select.rb +55 -0
  110. data/lib/plutonium/resource/controllers/crud_actions.rb +24 -6
  111. data/lib/plutonium/resource/controllers/interactive_actions.rb +76 -58
  112. data/lib/plutonium/resource/controllers/queryable.rb +4 -2
  113. data/lib/plutonium/resource/query_object.rb +1 -1
  114. data/lib/plutonium/ui/action_button.rb +23 -65
  115. data/lib/plutonium/ui/actions_dropdown.rb +103 -0
  116. data/lib/plutonium/ui/block.rb +1 -1
  117. data/lib/plutonium/ui/breadcrumbs.rb +12 -19
  118. data/lib/plutonium/ui/color_mode_selector.rb +1 -1
  119. data/lib/plutonium/ui/component/kit.rb +6 -0
  120. data/lib/plutonium/ui/component_classes.rb +102 -0
  121. data/lib/plutonium/ui/display/base.rb +15 -0
  122. data/lib/plutonium/ui/display/components/attachment.rb +6 -5
  123. data/lib/plutonium/ui/display/components/boolean.rb +23 -0
  124. data/lib/plutonium/ui/display/components/color.rb +23 -0
  125. data/lib/plutonium/ui/display/resource.rb +1 -1
  126. data/lib/plutonium/ui/display/theme.rb +29 -15
  127. data/lib/plutonium/ui/empty_card.rb +3 -3
  128. data/lib/plutonium/ui/form/base.rb +20 -0
  129. data/lib/plutonium/ui/form/components/key_value_store.rb +11 -11
  130. data/lib/plutonium/ui/form/components/resource_select.rb +31 -0
  131. data/lib/plutonium/ui/form/components/secure_association.rb +1 -2
  132. data/lib/plutonium/ui/form/components/uppy.rb +5 -4
  133. data/lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb +4 -4
  134. data/lib/plutonium/ui/form/interaction.rb +17 -1
  135. data/lib/plutonium/ui/form/query.rb +133 -80
  136. data/lib/plutonium/ui/form/theme.rb +50 -35
  137. data/lib/plutonium/ui/frame_navigator_panel.rb +2 -2
  138. data/lib/plutonium/ui/layout/base.rb +1 -1
  139. data/lib/plutonium/ui/layout/header.rb +4 -7
  140. data/lib/plutonium/ui/layout/rodauth_layout.rb +7 -7
  141. data/lib/plutonium/ui/layout/sidebar.rb +1 -1
  142. data/lib/plutonium/ui/nav_grid_menu.rb +7 -6
  143. data/lib/plutonium/ui/nav_user.rb +9 -8
  144. data/lib/plutonium/ui/page/interactive_action.rb +5 -5
  145. data/lib/plutonium/ui/page_header.rb +29 -10
  146. data/lib/plutonium/ui/panel.rb +4 -4
  147. data/lib/plutonium/ui/sidebar_menu.rb +8 -8
  148. data/lib/plutonium/ui/skeleton_table.rb +7 -8
  149. data/lib/plutonium/ui/tab_list.rb +5 -5
  150. data/lib/plutonium/ui/table/base.rb +3 -0
  151. data/lib/plutonium/ui/table/components/attachment.rb +4 -3
  152. data/lib/plutonium/ui/table/components/bulk_actions_toolbar.rb +82 -0
  153. data/lib/plutonium/ui/table/components/pagy_info.rb +2 -2
  154. data/lib/plutonium/ui/table/components/pagy_pagination.rb +13 -8
  155. data/lib/plutonium/ui/table/components/row_actions_dropdown.rb +101 -0
  156. data/lib/plutonium/ui/table/components/scopes_bar.rb +2 -2
  157. data/lib/plutonium/ui/table/components/selection_column.rb +100 -0
  158. data/lib/plutonium/ui/table/display_theme.rb +6 -6
  159. data/lib/plutonium/ui/table/resource.rb +93 -52
  160. data/lib/plutonium/ui/table/theme.rb +28 -15
  161. data/lib/plutonium/version.rb +1 -1
  162. data/package.json +2 -2
  163. data/plutonium.gemspec +5 -4
  164. data/src/css/components.css +471 -0
  165. data/src/css/intl_tel_input.css +2 -2
  166. data/src/css/plutonium.css +2 -0
  167. data/src/css/tokens.css +149 -0
  168. data/src/js/controllers/bulk_actions_controller.js +109 -0
  169. data/src/js/controllers/filter_panel_controller.js +35 -0
  170. data/src/js/controllers/register_controllers.js +5 -1
  171. data/src/js/controllers/resource_drop_down_controller.js +25 -1
  172. data/src/js/controllers/slim_select_controller.js +6 -2
  173. data/src/js/turbo/turbo_actions.js +1 -1
  174. metadata +52 -39
  175. data/.claude/skills/definition-query/SKILL.md +0 -334
  176. data/docs/concepts/architecture.md +0 -226
  177. data/docs/concepts/auto-detection.md +0 -254
  178. data/docs/concepts/index.md +0 -61
  179. data/docs/concepts/packages-portals.md +0 -304
  180. data/docs/concepts/resources.md +0 -224
  181. data/docs/cookbook/blog.md +0 -411
  182. data/docs/cookbook/index.md +0 -289
  183. data/docs/cookbook/saas.md +0 -481
  184. data/docs/public/CLAUDE.md +0 -578
  185. data/lib/generators/pu/pkg/portal/templates/app/controllers/resource_controller.rb.tt +0 -5
@@ -1,8 +1,17 @@
1
1
  <%= form_with url: rodauth.otp_auth_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <div>
3
- <%= form.label "otp-auth-code", rodauth.otp_auth_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
4
- <%= form.text_field rodauth.otp_auth_param, value: "", id: "otp-auth-code", autocomplete: "off", inputmode: "numeric", required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.otp_auth_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "otp-auth-code_error_message" } if rodauth.field_error(rodauth.otp_auth_param)) %>
5
- <%= content_tag(:span, rodauth.field_error(rodauth.otp_auth_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "otp-auth-code_error_message") if rodauth.field_error(rodauth.otp_auth_param) %>
3
+ <%= form.label "otp-auth-code", rodauth.otp_auth_label, class: "pu-label" %>
4
+ <%= form.text_field rodauth.otp_auth_param,
5
+ value: "",
6
+ id: "otp-auth-code",
7
+ autocomplete: "off",
8
+ inputmode: "numeric",
9
+ required: true,
10
+ class: "pu-input #{rodauth.field_error(rodauth.otp_auth_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.otp_auth_param) ? { invalid: true, describedby: "otp-auth-code_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.otp_auth_param) %>
13
+ <span class="pu-error" id="otp-auth-code_error_message"><%= rodauth.field_error(rodauth.otp_auth_param) %></span>
14
+ <% end %>
6
15
  </div>
7
- <%= form.submit rodauth.otp_auth_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
16
+ <%= form.submit rodauth.otp_auth_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
8
17
  <% end %>
@@ -1,10 +1,18 @@
1
1
  <%= form_with url: rodauth.otp_disable_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <% if rodauth.two_factor_modifications_require_password? %>
3
3
  <div>
4
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
5
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
6
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
4
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
5
+ <%= form.password_field rodauth.password_param,
6
+ value: "",
7
+ id: "password",
8
+ autocomplete: rodauth.password_field_autocomplete_value,
9
+ required: true,
10
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.password_param) %>
13
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
14
+ <% end %>
7
15
  </div>
8
16
  <% end %>
9
- <%= form.submit rodauth.otp_disable_button, class: "w-full px-8 py-3 cursor-pointer font-semibold text-sm rounded-md bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-300 dark:bg-violet-400 dark:hover:bg-violet-500 dark:text-gray-900 dark:focus:ring-violet-400 dark:focus:ring-offset-current" %>
17
+ <%= form.submit rodauth.otp_disable_button, class: "w-full pu-btn pu-btn-md pu-btn-warning" %>
10
18
  <% end %>
@@ -8,27 +8,44 @@
8
8
  </div>
9
9
  </div>
10
10
 
11
- <dl class="mb-6 text-sm">
12
- <dt class="font-semibold"><%= rodauth.otp_secret_label %>:</dt>
13
- <dd><%= rodauth.otp_user_key %></dd>
11
+ <dl class="mb-6 text-sm space-y-2">
12
+ <dt class="font-semibold text-[var(--pu-text)]"><%= rodauth.otp_secret_label %>:</dt>
13
+ <dd class="text-[var(--pu-text-muted)]"><%= rodauth.otp_user_key %></dd>
14
14
 
15
- <dt class="font-semibold mt-2"><%= rodauth.otp_provisioning_uri_label %>:</dt>
16
- <dd><%= rodauth.otp_provisioning_uri %></dd>
15
+ <dt class="font-semibold text-[var(--pu-text)] mt-2"><%= rodauth.otp_provisioning_uri_label %>:</dt>
16
+ <dd class="text-[var(--pu-text-muted)] break-all"><%= rodauth.otp_provisioning_uri %></dd>
17
17
  </dl>
18
18
 
19
19
  <div>
20
- <%= form.label "otp-auth-code", rodauth.otp_auth_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
21
- <%= form.text_field rodauth.otp_auth_param, value: "", id: "otp-auth-code", autocomplete: "off", inputmode: "numeric", required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.otp_auth_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }" , aria: ({ invalid: true, describedby: "otp-auth-code_error_message" } if rodauth.field_error(rodauth.otp_auth_param)) %>
22
- <%= content_tag(:span, rodauth.field_error(rodauth.otp_auth_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "otp-auth-code_error_message") if rodauth.field_error(rodauth.otp_auth_param) %>
20
+ <%= form.label "otp-auth-code", rodauth.otp_auth_label, class: "pu-label" %>
21
+ <%= form.text_field rodauth.otp_auth_param,
22
+ value: "",
23
+ id: "otp-auth-code",
24
+ autocomplete: "off",
25
+ inputmode: "numeric",
26
+ required: true,
27
+ class: "pu-input #{rodauth.field_error(rodauth.otp_auth_param) ? 'pu-input-invalid' : ''}",
28
+ aria: (rodauth.field_error(rodauth.otp_auth_param) ? { invalid: true, describedby: "otp-auth-code_error_message" } : nil) %>
29
+ <% if rodauth.field_error(rodauth.otp_auth_param) %>
30
+ <span class="pu-error" id="otp-auth-code_error_message"><%= rodauth.field_error(rodauth.otp_auth_param) %></span>
31
+ <% end %>
23
32
  </div>
24
33
 
25
34
  <% if rodauth.two_factor_modifications_require_password? %>
26
35
  <div>
27
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
28
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
29
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
36
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
37
+ <%= form.password_field rodauth.password_param,
38
+ value: "",
39
+ id: "password",
40
+ autocomplete: rodauth.password_field_autocomplete_value,
41
+ required: true,
42
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
43
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
44
+ <% if rodauth.field_error(rodauth.password_param) %>
45
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
46
+ <% end %>
30
47
  </div>
31
48
  <% end %>
32
49
 
33
- <%= form.submit rodauth.otp_setup_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
50
+ <%= form.submit rodauth.otp_setup_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
34
51
  <% end %>
@@ -1,22 +1,31 @@
1
1
  <%= form_with url: rodauth.otp_unlock_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <dl class="mb-6 text-sm space-y-2">
3
- <dt class="font-semibold text-gray-900 dark:text-white"><%= rodauth.otp_unlock_consecutive_successes_label %>:</dt>
4
- <dd class="text-gray-700 dark:text-gray-300"><%= rodauth.otp_unlock_num_successes %></dd>
3
+ <dt class="font-semibold text-[var(--pu-text)]"><%= rodauth.otp_unlock_consecutive_successes_label %>:</dt>
4
+ <dd class="text-[var(--pu-text-muted)]"><%= rodauth.otp_unlock_num_successes %></dd>
5
5
 
6
- <dt class="font-semibold text-gray-900 dark:text-white"><%= rodauth.otp_unlock_required_consecutive_successes_label %>:</dt>
7
- <dd class="text-gray-700 dark:text-gray-300"><%= rodauth.otp_unlock_auths_required %></dd>
6
+ <dt class="font-semibold text-[var(--pu-text)]"><%= rodauth.otp_unlock_required_consecutive_successes_label %>:</dt>
7
+ <dd class="text-[var(--pu-text-muted)]"><%= rodauth.otp_unlock_auths_required %></dd>
8
8
 
9
- <dt class="font-semibold text-gray-900 dark:text-white"><%= rodauth.otp_unlock_next_auth_deadline_label %>:</dt>
10
- <dd class="text-gray-700 dark:text-gray-300"><%= rodauth.otp_unlock_deadline.strftime(rodauth.strftime_format) %></dd>
9
+ <dt class="font-semibold text-[var(--pu-text)]"><%= rodauth.otp_unlock_next_auth_deadline_label %>:</dt>
10
+ <dd class="text-[var(--pu-text-muted)]"><%= rodauth.otp_unlock_deadline.strftime(rodauth.strftime_format) %></dd>
11
11
  </dl>
12
12
 
13
13
  <div>
14
- <%= form.label "otp-auth-code", rodauth.otp_auth_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
15
- <%= form.text_field rodauth.otp_auth_param, value: "", id: "otp-auth-code", autocomplete: "off", inputmode: "numeric", required: true, class: "mt-2 text-sm w-1/2 px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.otp_auth_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "otp-auth-code_error_message" } if rodauth.field_error(rodauth.otp_auth_param)) %>
16
- <%= content_tag(:span, rodauth.field_error(rodauth.otp_auth_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "otp-auth-code_error_message") if rodauth.field_error(rodauth.otp_auth_param) %>
14
+ <%= form.label "otp-auth-code", rodauth.otp_auth_label, class: "pu-label" %>
15
+ <%= form.text_field rodauth.otp_auth_param,
16
+ value: "",
17
+ id: "otp-auth-code",
18
+ autocomplete: "off",
19
+ inputmode: "numeric",
20
+ required: true,
21
+ class: "pu-input w-1/2 #{rodauth.field_error(rodauth.otp_auth_param) ? 'pu-input-invalid' : ''}",
22
+ aria: (rodauth.field_error(rodauth.otp_auth_param) ? { invalid: true, describedby: "otp-auth-code_error_message" } : nil) %>
23
+ <% if rodauth.field_error(rodauth.otp_auth_param) %>
24
+ <span class="pu-error" id="otp-auth-code_error_message"><%= rodauth.field_error(rodauth.otp_auth_param) %></span>
25
+ <% end %>
17
26
  </div>
18
27
 
19
- <%= form.submit rodauth.otp_unlock_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
28
+ <%= form.submit rodauth.otp_unlock_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
20
29
  <% end %>
21
30
 
22
31
  <%== rodauth.otp_unlock_form_footer %>
@@ -1,14 +1,14 @@
1
1
  <dl class="mb-6 text-sm space-y-2">
2
- <dt class="font-semibold text-gray-900 dark:text-white"><%= rodauth.otp_unlock_consecutive_successes_label %>:</dt>
3
- <dd class="text-gray-700 dark:text-gray-300"><%= rodauth.otp_unlock_num_successes %></dd>
2
+ <dt class="font-semibold text-[var(--pu-text)]"><%= rodauth.otp_unlock_consecutive_successes_label %>:</dt>
3
+ <dd class="text-[var(--pu-text-muted)]"><%= rodauth.otp_unlock_num_successes %></dd>
4
4
 
5
- <dt class="font-semibold text-gray-900 dark:text-white"><%= rodauth.otp_unlock_required_consecutive_successes_label %>:</dt>
6
- <dd class="text-gray-700 dark:text-gray-300"><%= rodauth.otp_unlock_auths_required %></dd>
5
+ <dt class="font-semibold text-[var(--pu-text)]"><%= rodauth.otp_unlock_required_consecutive_successes_label %>:</dt>
6
+ <dd class="text-[var(--pu-text-muted)]"><%= rodauth.otp_unlock_auths_required %></dd>
7
7
 
8
- <dt class="font-semibold text-gray-900 dark:text-white"><%= rodauth.otp_unlock_next_auth_attempt_label %>:</dt>
9
- <dd class="text-gray-700 dark:text-gray-300"><%= rodauth.otp_unlock_deadline.strftime(rodauth.strftime_format) %></dd>
8
+ <dt class="font-semibold text-[var(--pu-text)]"><%= rodauth.otp_unlock_next_auth_attempt_label %>:</dt>
9
+ <dd class="text-[var(--pu-text-muted)]"><%= rodauth.otp_unlock_deadline.strftime(rodauth.strftime_format) %></dd>
10
10
  </dl>
11
11
 
12
- <p class="mt-2 text-gray-900 dark:text-white font-semibold"><%= rodauth.otp_unlock_next_auth_attempt_refresh_label %></p>
12
+ <p class="mt-2 font-semibold text-[var(--pu-text)]"><%= rodauth.otp_unlock_next_auth_attempt_refresh_label %></p>
13
13
 
14
14
  <%== rodauth.otp_unlock_refresh_tag %>
@@ -1,9 +1,17 @@
1
1
  <%= resource_form_with url: rodauth.recovery_auth_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <div>
3
- <%= form.label "recovery-code", rodauth.recovery_codes_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
4
- <%= form.text_field rodauth.recovery_codes_param, value: "", id: "recovery-code", autocomplete: "off", required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.recovery_codes_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "recovery-code_error_message" } if rodauth.field_error(rodauth.recovery_codes_param)) %>
5
- <%= content_tag(:span, rodauth.field_error(rodauth.recovery_codes_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "recovery-code_error_message") if rodauth.field_error(rodauth.recovery_codes_param) %>
3
+ <%= form.label "recovery-code", rodauth.recovery_codes_label, class: "pu-label" %>
4
+ <%= form.text_field rodauth.recovery_codes_param,
5
+ value: "",
6
+ id: "recovery-code",
7
+ autocomplete: "off",
8
+ required: true,
9
+ class: "pu-input #{rodauth.field_error(rodauth.recovery_codes_param) ? 'pu-input-invalid' : ''}",
10
+ aria: (rodauth.field_error(rodauth.recovery_codes_param) ? { invalid: true, describedby: "recovery-code_error_message" } : nil) %>
11
+ <% if rodauth.field_error(rodauth.recovery_codes_param) %>
12
+ <span class="pu-error" id="recovery-code_error_message"><%= rodauth.field_error(rodauth.recovery_codes_param) %></span>
13
+ <% end %>
6
14
  </div>
7
15
 
8
- <%= form.submit rodauth.recovery_auth_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
16
+ <%= form.submit rodauth.recovery_auth_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
9
17
  <% end %>
@@ -1,11 +1,19 @@
1
1
  <%= form_with url: rodauth.recovery_codes_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <% if rodauth.two_factor_modifications_require_password? %>
3
3
  <div>
4
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
5
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
6
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
4
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
5
+ <%= form.password_field rodauth.password_param,
6
+ value: "",
7
+ id: "password",
8
+ autocomplete: rodauth.password_field_autocomplete_value,
9
+ required: true,
10
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.password_param) %>
13
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
14
+ <% end %>
7
15
  </div>
8
16
  <% end %>
9
17
 
10
- <%= form.submit rodauth.recovery_codes_button || rodauth.view_recovery_codes_button, name: (rodauth.add_recovery_codes_param if rodauth.recovery_codes_button), class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
18
+ <%= form.submit rodauth.recovery_codes_button || rodauth.view_recovery_codes_button, name: (rodauth.add_recovery_codes_param if rodauth.recovery_codes_button), class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
11
19
  <% end %>
@@ -1,18 +1,18 @@
1
1
  <%= form_with url: rodauth.remember_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <fieldset class="mb-6 space-y-2">
3
3
  <div class="flex items-center space-x-2">
4
- <%= form.radio_button rodauth.remember_param, rodauth.remember_remember_param_value, id: "remember-remember", class: "dark:bg-gray-900 dark:border-gray-600 dark:checked:bg-current dark:checked:border-current dark:checked:text-emerald-400 dark:focus:ring-emerald-400 dark:focus:ring-offset-gray-900" %>
5
- <%= form.label "remember-remember", rodauth.remember_remember_label, class: "text-sm" %>
4
+ <%= form.radio_button rodauth.remember_param, rodauth.remember_remember_param_value, id: "remember-remember", class: "pu-checkbox" %>
5
+ <%= form.label "remember-remember", rodauth.remember_remember_label, class: "text-sm text-[var(--pu-text)]" %>
6
6
  </div>
7
7
  <div class="flex items-center space-x-2">
8
- <%= form.radio_button rodauth.remember_param, rodauth.remember_forget_param_value, id: "remember-forget", class: "dark:bg-gray-900 dark:border-gray-600 dark:checked:bg-current dark:checked:border-current dark:checked:text-emerald-400 dark:focus:ring-emerald-400 dark:focus:ring-offset-gray-900" %>
9
- <%= form.label "remember-forget", rodauth.remember_forget_label, class: "text-sm" %>
8
+ <%= form.radio_button rodauth.remember_param, rodauth.remember_forget_param_value, id: "remember-forget", class: "pu-checkbox" %>
9
+ <%= form.label "remember-forget", rodauth.remember_forget_label, class: "text-sm text-[var(--pu-text)]" %>
10
10
  </div>
11
11
  <div class="flex items-center space-x-2">
12
- <%= form.radio_button rodauth.remember_param, rodauth.remember_disable_param_value, id: "remember-disable", class: "dark:bg-gray-900 dark:border-gray-600 dark:checked:bg-current dark:checked:border-current dark:checked:text-emerald-400 dark:focus:ring-emerald-400 dark:focus:ring-offset-gray-900" %>
13
- <%= form.label "remember-disable", rodauth.remember_disable_label, class: "text-sm" %>
12
+ <%= form.radio_button rodauth.remember_param, rodauth.remember_disable_param_value, id: "remember-disable", class: "pu-checkbox" %>
13
+ <%= form.label "remember-disable", rodauth.remember_disable_label, class: "text-sm text-[var(--pu-text)]" %>
14
14
  </div>
15
15
  </fieldset>
16
16
 
17
- <%= form.submit rodauth.remember_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
17
+ <%= form.submit rodauth.remember_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
18
18
  <% end %>
@@ -1,17 +1,33 @@
1
1
  <%= form_with url: rodauth.reset_password_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <div>
3
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
4
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
5
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
3
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
4
+ <%= form.password_field rodauth.password_param,
5
+ value: "",
6
+ id: "password",
7
+ autocomplete: rodauth.password_field_autocomplete_value,
8
+ required: true,
9
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
10
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
11
+ <% if rodauth.field_error(rodauth.password_param) %>
12
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
13
+ <% end %>
6
14
  </div>
7
15
 
8
16
  <% if rodauth.require_password_confirmation? %>
9
17
  <div>
10
- <%= form.label "password-confirm", rodauth.password_confirm_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
11
- <%= form.password_field rodauth.password_confirm_param, value: "", id: "password-confirm", autocomplete: "new-password", required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_confirm_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password-confirm_error_message" } if rodauth.field_error(rodauth.password_confirm_param)) %>
12
- <%= content_tag(:span, rodauth.field_error(rodauth.password_confirm_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password-confirm_error_message") if rodauth.field_error(rodauth.password_confirm_param) %>
18
+ <%= form.label "password-confirm", rodauth.password_confirm_label, class: "pu-label" %>
19
+ <%= form.password_field rodauth.password_confirm_param,
20
+ value: "",
21
+ id: "password-confirm",
22
+ autocomplete: "new-password",
23
+ required: true,
24
+ class: "pu-input #{rodauth.field_error(rodauth.password_confirm_param) ? 'pu-input-invalid' : ''}",
25
+ aria: (rodauth.field_error(rodauth.password_confirm_param) ? { invalid: true, describedby: "password-confirm_error_message" } : nil) %>
26
+ <% if rodauth.field_error(rodauth.password_confirm_param) %>
27
+ <span class="pu-error" id="password-confirm_error_message"><%= rodauth.field_error(rodauth.password_confirm_param) %></span>
28
+ <% end %>
13
29
  </div>
14
30
  <% end %>
15
31
 
16
- <%= form.submit rodauth.reset_password_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
32
+ <%= form.submit rodauth.reset_password_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
17
33
  <% end %>
@@ -1,4 +1,4 @@
1
- <div class="mb-4 text-sm text-gray-500 dark:text-gray-400">
1
+ <div class="mb-4 text-sm text-[var(--pu-text-muted)]">
2
2
  <%== rodauth.reset_password_explanatory_text %>
3
3
  </div>
4
4
  <%= form_with url: rodauth.reset_password_request_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
@@ -6,16 +6,20 @@
6
6
  <%= form.hidden_field rodauth.login_param, value: params[rodauth.login_param] %>
7
7
  <% else %>
8
8
  <div>
9
- <%= form.label "login", rodauth.login_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
10
- <%= form.email_field rodauth.login_param, value: params[rodauth.login_param],
11
- id: "login",
12
- autocomplete: "email",
13
- required: true,
14
- placeholder: "jane@acme.inc",
15
- class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.login_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "login_error_message" } if rodauth.field_error(rodauth.login_param)) %>
16
- <%= content_tag(:span, rodauth.field_error(rodauth.login_param), class: "block mt-1 text-red-600 text-sm dark:text-red-400", id: "login_error_message") if rodauth.field_error(rodauth.login_param) %>
9
+ <%= form.label "login", rodauth.login_label, class: "pu-label" %>
10
+ <%= form.email_field rodauth.login_param,
11
+ value: params[rodauth.login_param],
12
+ id: "login",
13
+ autocomplete: "email",
14
+ required: true,
15
+ placeholder: "jane@acme.inc",
16
+ class: "pu-input #{rodauth.field_error(rodauth.login_param) ? 'pu-input-invalid' : ''}",
17
+ aria: (rodauth.field_error(rodauth.login_param) ? { invalid: true, describedby: "login_error_message" } : nil) %>
18
+ <% if rodauth.field_error(rodauth.login_param) %>
19
+ <span class="pu-error" id="login_error_message"><%= rodauth.field_error(rodauth.login_param) %></span>
20
+ <% end %>
17
21
  </div>
18
22
  <% end %>
19
23
 
20
- <%= form.submit rodauth.reset_password_request_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
24
+ <%= form.submit rodauth.reset_password_request_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
21
25
  <% end %>
@@ -1,9 +1,18 @@
1
1
  <%= form_with url: rodauth.sms_auth_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <div>
3
- <%= form.label "sms-code", rodauth.sms_code_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
4
- <%= form.text_field rodauth.sms_code_param, value: "", id: "sms-code", autocomplete: "one-time-code", inputmode: "numeric", required: true, class: "mt-2 text-sm w-1/2 px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.sms_code_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "sms-code_error_message" } if rodauth.field_error(rodauth.sms_code_param)) %>
5
- <%= content_tag(:span, rodauth.field_error(rodauth.sms_code_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "sms-code_error_message") if rodauth.field_error(rodauth.sms_code_param) %>
3
+ <%= form.label "sms-code", rodauth.sms_code_label, class: "pu-label" %>
4
+ <%= form.text_field rodauth.sms_code_param,
5
+ value: "",
6
+ id: "sms-code",
7
+ autocomplete: "one-time-code",
8
+ inputmode: "numeric",
9
+ required: true,
10
+ class: "pu-input w-1/2 #{rodauth.field_error(rodauth.sms_code_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.sms_code_param) ? { invalid: true, describedby: "sms-code_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.sms_code_param) %>
13
+ <span class="pu-error" id="sms-code_error_message"><%= rodauth.field_error(rodauth.sms_code_param) %></span>
14
+ <% end %>
6
15
  </div>
7
16
 
8
- <%= form.submit rodauth.sms_auth_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
17
+ <%= form.submit rodauth.sms_auth_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
9
18
  <% end %>
@@ -1,9 +1,18 @@
1
1
  <%= form_with url: rodauth.sms_confirm_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <div>
3
- <%= form.label "sms-code", rodauth.sms_code_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
4
- <%= form.text_field rodauth.sms_code_param, value: "", id: "sms-code", autocomplete: "one-time-code", inputmode: "numeric", required: true, class: "mt-2 text-sm w-1/2 px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.sms_code_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "sms-code_error_message" } if rodauth.field_error(rodauth.sms_code_param)) %>
5
- <%= content_tag(:span, rodauth.field_error(rodauth.sms_code_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "sms-code_error_message") if rodauth.field_error(rodauth.sms_code_param) %>
3
+ <%= form.label "sms-code", rodauth.sms_code_label, class: "pu-label" %>
4
+ <%= form.text_field rodauth.sms_code_param,
5
+ value: "",
6
+ id: "sms-code",
7
+ autocomplete: "one-time-code",
8
+ inputmode: "numeric",
9
+ required: true,
10
+ class: "pu-input w-1/2 #{rodauth.field_error(rodauth.sms_code_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.sms_code_param) ? { invalid: true, describedby: "sms-code_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.sms_code_param) %>
13
+ <span class="pu-error" id="sms-code_error_message"><%= rodauth.field_error(rodauth.sms_code_param) %></span>
14
+ <% end %>
6
15
  </div>
7
16
 
8
- <%= form.submit rodauth.sms_confirm_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
17
+ <%= form.submit rodauth.sms_confirm_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
9
18
  <% end %>
@@ -1,11 +1,19 @@
1
1
  <%= form_with url: rodauth.sms_disable_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <% if rodauth.two_factor_modifications_require_password? %>
3
3
  <div>
4
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
5
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
6
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
4
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
5
+ <%= form.password_field rodauth.password_param,
6
+ value: "",
7
+ id: "password",
8
+ autocomplete: rodauth.password_field_autocomplete_value,
9
+ required: true,
10
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.password_param) %>
13
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
14
+ <% end %>
7
15
  </div>
8
16
  <% end %>
9
17
 
10
- <%= form.submit rodauth.sms_disable_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
18
+ <%= form.submit rodauth.sms_disable_button, class: "w-full pu-btn pu-btn-md pu-btn-warning" %>
11
19
  <% end %>
@@ -1,3 +1,3 @@
1
1
  <%= form_with url: rodauth.sms_request_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
- <%= form.submit rodauth.sms_request_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
2
+ <%= form.submit rodauth.sms_request_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
3
3
  <% end %>
@@ -1,17 +1,33 @@
1
1
  <%= form_with url: rodauth.sms_setup_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <% if rodauth.two_factor_modifications_require_password? %>
3
3
  <div>
4
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
5
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
6
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
4
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
5
+ <%= form.password_field rodauth.password_param,
6
+ value: "",
7
+ id: "password",
8
+ autocomplete: rodauth.password_field_autocomplete_value,
9
+ required: true,
10
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.password_param) %>
13
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
14
+ <% end %>
7
15
  </div>
8
16
  <% end %>
9
17
 
10
18
  <div>
11
- <%= form.label "sms-phone", rodauth.sms_phone_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
12
- <%= form.telephone_field rodauth.sms_phone_param, value: "", id: "sms-phone", autocomplete: "tel", required: true, class: "mt-2 text-sm w-1/2 px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.sms_phone_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "sms-phone_error_message" } if rodauth.field_error(rodauth.sms_phone_param)) %>
13
- <%= content_tag(:span, rodauth.field_error(rodauth.sms_phone_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "sms-phone_error_message") if rodauth.field_error(rodauth.sms_phone_param) %>
19
+ <%= form.label "sms-phone", rodauth.sms_phone_label, class: "pu-label" %>
20
+ <%= form.telephone_field rodauth.sms_phone_param,
21
+ value: "",
22
+ id: "sms-phone",
23
+ autocomplete: "tel",
24
+ required: true,
25
+ class: "pu-input w-1/2 #{rodauth.field_error(rodauth.sms_phone_param) ? 'pu-input-invalid' : ''}",
26
+ aria: (rodauth.field_error(rodauth.sms_phone_param) ? { invalid: true, describedby: "sms-phone_error_message" } : nil) %>
27
+ <% if rodauth.field_error(rodauth.sms_phone_param) %>
28
+ <span class="pu-error" id="sms-phone_error_message"><%= rodauth.field_error(rodauth.sms_phone_param) %></span>
29
+ <% end %>
14
30
  </div>
15
31
 
16
- <%= form.submit rodauth.sms_setup_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
32
+ <%= form.submit rodauth.sms_setup_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
17
33
  <% end %>
@@ -1,5 +1,5 @@
1
- <ul>
1
+ <ul class="space-y-1">
2
2
  <% rodauth.two_factor_auth_links.sort.each do |_, link, text| %>
3
- <li><%= link_to text, link, class: "text-blue-600 rounded-sm text-sm hover:underline hover:text-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-300 dark:hover:text-blue-400 dark:focus-visible:ring-2 dark:focus-visible:ring-blue-300" %></li>
3
+ <li><%= link_to text, link, class: "text-sm font-medium text-secondary-600 dark:text-secondary-400 hover:underline transition-colors" %></li>
4
4
  <% end %>
5
5
  </ul>
@@ -1,11 +1,19 @@
1
1
  <%= form_with url: rodauth.two_factor_disable_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
2
2
  <% if rodauth.two_factor_modifications_require_password? %>
3
3
  <div>
4
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
5
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
6
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
4
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
5
+ <%= form.password_field rodauth.password_param,
6
+ value: "",
7
+ id: "password",
8
+ autocomplete: rodauth.password_field_autocomplete_value,
9
+ required: true,
10
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
11
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
12
+ <% if rodauth.field_error(rodauth.password_param) %>
13
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
14
+ <% end %>
7
15
  </div>
8
16
  <% end %>
9
17
 
10
- <%= form.submit rodauth.two_factor_disable_button, class: "w-full px-8 py-3 cursor-pointer font-semibold text-sm rounded-md bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-300 dark:bg-violet-400 dark:hover:bg-violet-500 dark:text-gray-900 dark:focus:ring-violet-400 dark:focus:ring-offset-current" %>
18
+ <%= form.submit rodauth.two_factor_disable_button, class: "w-full pu-btn pu-btn-md pu-btn-warning" %>
11
19
  <% end %>
@@ -1,25 +1,25 @@
1
1
  <div>
2
2
  <% if rodauth.two_factor_setup_links.any? %>
3
- <div class="text-2xl font-medium">
3
+ <div class="text-xl font-semibold text-[var(--pu-text)]">
4
4
  <%== rodauth.two_factor_setup_heading %>
5
5
  </div>
6
- <ul class="mt-1">
6
+ <ul class="mt-2 space-y-1">
7
7
  <% rodauth.two_factor_setup_links.sort.each do |_, link, text| %>
8
- <li><%= link_to text, link, class: "text-blue-600 rounded-sm text-sm hover:underline hover:text-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-300 dark:hover:text-blue-400 dark:focus-visible:ring-2 dark:focus-visible:ring-blue-300" %></li>
8
+ <li><%= link_to text, link, class: "text-sm font-medium text-secondary-600 dark:text-secondary-400 hover:underline transition-colors" %></li>
9
9
  <% end %>
10
10
  </ul>
11
11
  <% end %>
12
12
 
13
13
  <% if rodauth.two_factor_remove_links.any? %>
14
- <div class="text-2xl font-medium mt-4">
14
+ <div class="text-xl font-semibold text-[var(--pu-text)] mt-6">
15
15
  <%== rodauth.two_factor_remove_heading %>
16
16
  </div>
17
- <ul class="mt-1">
17
+ <ul class="mt-2 space-y-1">
18
18
  <% rodauth.two_factor_remove_links.sort.each do |_, link, text| %>
19
- <li><%= link_to text, link, class: "text-blue-600 rounded-sm text-sm hover:underline hover:text-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-300 dark:hover:text-blue-400 dark:focus-visible:ring-2 dark:focus-visible:ring-blue-300" %></li>
19
+ <li><%= link_to text, link, class: "text-sm font-medium text-secondary-600 dark:text-secondary-400 hover:underline transition-colors" %></li>
20
20
  <% end %>
21
21
  <% if rodauth.two_factor_remove_links.length > 1 %>
22
- <li><%= link_to rodauth.two_factor_disable_link_text, rodauth.two_factor_disable_path, class: "text-blue-600 rounded-sm text-sm hover:underline hover:text-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-300 dark:hover:text-blue-400 dark:focus-visible:ring-2 dark:focus-visible:ring-blue-300" %></li>
22
+ <li><%= link_to rodauth.two_factor_disable_link_text, rodauth.two_factor_disable_path, class: "text-sm font-medium text-secondary-600 dark:text-secondary-400 hover:underline transition-colors" %></li>
23
23
  <% end %>
24
24
  </ul>
25
25
  <% end %>
@@ -1,13 +1,21 @@
1
- <div class="mb-4 text-sm text-gray-500 dark:text-gray-400">
1
+ <div class="mb-4 text-sm text-[var(--pu-text-muted)]">
2
2
  <%== rodauth.unlock_account_explanatory_text %>
3
3
  </div>
4
4
  <%= form_with url: rodauth.unlock_account_path, method: :post, data: { turbo: false }, class: "space-y-4" do |form| %>
5
5
  <% if rodauth.unlock_account_requires_password? %>
6
6
  <div>
7
- <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
8
- <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
9
- <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
7
+ <%= form.label "password", rodauth.password_label, class: "pu-label" %>
8
+ <%= form.password_field rodauth.password_param,
9
+ value: "",
10
+ id: "password",
11
+ autocomplete: rodauth.password_field_autocomplete_value,
12
+ required: true,
13
+ class: "pu-input #{rodauth.field_error(rodauth.password_param) ? 'pu-input-invalid' : ''}",
14
+ aria: (rodauth.field_error(rodauth.password_param) ? { invalid: true, describedby: "password_error_message" } : nil) %>
15
+ <% if rodauth.field_error(rodauth.password_param) %>
16
+ <span class="pu-error" id="password_error_message"><%= rodauth.field_error(rodauth.password_param) %></span>
17
+ <% end %>
10
18
  </div>
11
19
  <% end %>
12
- <%= form.submit rodauth.unlock_account_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
20
+ <%= form.submit rodauth.unlock_account_button, class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
13
21
  <% end %>