fix decidim-user_extension

.rubocop.yml

@@ -24,3 +24,7 @@ RSpec/DescribeClass:
 
 Rails/I18nLocaleAssignment:
   Enabled: false
+
+RSpec/Rails/NegationBeValid:
+  Exclude:
+    - spec/shared/proposal_form_examples.rb

Gemfile

@@ -29,7 +29,7 @@ gem "newrelic_rpm"
 gem "omniauth-line_login", path: "omniauth-line_login"
 gem "omniauth-rails_csrf_protection"
 
-# gem "decidim-user_extension", path: "decidim-user_extension"
+gem "decidim-user_extension", path: "decidim-user_extension"
 
 gem "slack-ruby-client"
 

Gemfile.lock

@@ -27,6 +27,14 @@ GIT
       decidim-admin (~> 0.28.0)
       decidim-core (~> 0.28.0)
 
+PATH
+  remote: decidim-user_extension
+  specs:
+    decidim-user_extension (0.4.0)
+      decidim-admin
+      decidim-core
+      rails
+
 PATH
   remote: omniauth-line_login
   specs:
@@ -867,6 +875,7 @@ GEM
 
 PLATFORMS
   aarch64-linux
+  arm64-darwin-22
   arm64-darwin-23
   x86_64-linux
 
@@ -879,6 +888,7 @@ DEPENDENCIES
   decidim-dev (= 0.28.0)
   decidim-navigation_maps!
   decidim-term_customizer!
+  decidim-user_extension!
   deface
   dotenv-rails
   factory_bot_rails

app/packs/stylesheets/decidim/decidim_application.scss

@@ -11,3 +11,5 @@
 @import "./cfj/search";
 @import "./cfj/media_print";
 @import "./cfj/tiptap_html_edit";
+
+@import "stylesheets/decidim/user_extension/application";

config/locales/ja.yml

@@ -92,8 +92,9 @@ ja:
           nickname_help: 本人を識別するための任意のアルファベットを入力してください。
           nickname_notice: "※ 表示名とアカウントIDが投稿に表示されます。例）共創 歩@ayumi"
           nickname_placeholder: ayumi
-          password_help: 半角英数字%{minimun_characters}文字以上で入力してください。単純すぎてはいけません（例：123456）。アカウントIDやメールアドレスと異なる必要があります。
+          password_help: 半角英数字%{minimum_characters}文字以上で入力してください。単純すぎてはいけません（例：123456）。アカウントIDやメールアドレスと異なる必要があります。
           see_username: アカウントIDを見る
+          sign_in: ログイン
           subtitle: 参加するにはユーザ登録をしてください。
           terms: 利用規約
           username_placeholder: 共創 歩
@@ -303,7 +304,7 @@ ja:
         message: あなたのアカウントはログインに規定回数以上失敗したため、ロックされています。
     passwords:
       edit:
-        password_help: "%{minimun_characters} 半角英数字10文字以上で入力してください。単純すぎてはいけません（例：123456）。アカウントIDやメールアドレスと異なる必要があります。"
+        password_help: "半角英数字%{minimum_characters}文字以上で入力してください。単純すぎてはいけません（例：123456）。アカウントIDやメールアドレスと異なる必要があります。"
     shared:
       links:
         didn_t_receive_confirmation_instructions: ユーザ登録確認メールが届かない方はこちら

config/shakapacker.yml

@@ -17,6 +17,7 @@ default: &default
   additional_paths:
     - node_modules
     - app/packs
+    - decidim-user_extension/app/packs
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false

decidim-user_extension/app/overrides/decidim/admin/officializations/index/user_extension_override.html.erb.deface

@@ -1,5 +1,5 @@
 <!-- insert_bottom "td.table-list__actions" -->
 <% if allowed_to? :show_user_extension, :user, user: user %>
-  <%= icon_link_to "person", Decidim::UserExtension::AdminEngine.routes.url_helpers.officializations_show_user_extension_path(user.id), t("show_user_extension", scope: "decidim.admin.officializations.index"), class: "action-icon action-icon--show-user", data: { full_name: user.name, toggle: "show-user-modal" } %>
+  <%= icon_link_to "user-line", Decidim::UserExtension::AdminEngine.routes.url_helpers.officializations_show_user_extension_path(user.id), t("show_user_extension", scope: "decidim.admin.officializations.index"), class: "action-icon action-icon--show-user", data: { full_name: user.name, dialog_open: "show-user-modal" } %>
 <% end %>
 

decidim-user_extension/app/packs/entrypoints/decidim_user_extension.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/user_extension/application.scss";

decidim-user_extension/app/packs/stylesheets/decidim/user_extension/_show_user_extension.scss

@@ -0,0 +1,19 @@
+.show_user_extension {
+  @apply my-4;
+
+  h4 {
+    @apply text-md w-full text-gray-2 font-semibold mb-2;
+  }
+
+  > div {
+    @apply bg-gray-3 mb-2 p-2;
+  }
+
+  #user_extension + p {
+    @apply hidden;
+  }
+
+  #user_extension:empty + p {
+    @apply block;
+  }
+}

decidim-user_extension/app/packs/stylesheets/decidim/user_extension/application.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/user_extension/_show_user_extension.scss";

decidim-user_extension/app/views/decidim/account/show.html.erb

@@ -1,63 +1,78 @@
-<%= alert_box("", "account-notification hide", true) %>
 <% add_decidim_page_title(t("profile", scope: "layouts.decidim.user_menu")) %>
 <% content_for(:subtitle) { t("profile", scope: "layouts.decidim.user_menu") } %>
 
-<div class="row">
-  <%= decidim_form_for(@account, url: account_path, method: :put, html: { autocomplete: "on" }) do |f| %>
-    <div class="columns large-4">
-      <%= f.upload :avatar %>
+<%= render layout: "layouts/decidim/shared/layout_user_profile" do %>
+  <% if current_user.unconfirmed_email.present? %>
+    <%# NOTE: announcement cell clean_body method will purge the button %>
+    <div id="email-change-pending" class="flash secondary" data-announcement>
+      <span class="flash__message flex-none block leading-relaxed">
+        <p>
+          <strong><%= t("decidim.account.email_change.title") %></strong>
+        </p>
+        <p>
+          <%= t("decidim.account.email_change.body1", unconfirmed_email: current_user.unconfirmed_email) %>
+        </p>
+        <p>
+          <%== t(
+            "decidim.account.email_change.body2",
+            resend_link: link_to(t("decidim.account.email_change.send_again"), resend_confirmation_instructions_account_path, role: :button, method: :post, remote: true),
+            cancel_link: link_to(t("decidim.account.email_change.cancel"), cancel_email_change_account_path, role: :button, method: :post, remote: true)) %>
+        </p>
+      </span>
     </div>
+  <% end %>
 
-    <div class="columns large-8 end">
-      <% if current_user.unconfirmed_email.present? %>
-        <div id="email-change-pending" class="callout secondary">
-          <p><strong><%= t("decidim.account.email_change.title") %></strong></p>
-          <p><%= t("decidim.account.email_change.body1", unconfirmed_email: current_user.unconfirmed_email) %></p>
-          <p>
-            <%== t(
-              "decidim.account.email_change.body2",
-              resend_link: link_to(t("decidim.account.email_change.send_again"), resend_confirmation_instructions_account_path, role: :button, method: :post, remote: true),
-              cancel_link: link_to(t("decidim.account.email_change.cancel"), cancel_email_change_account_path, role: :button, method: :post, remote: true)) %>
-          </p>
-        </div>
-      <% end %>
+  <%= decidim_form_for(@account, url: account_path, method: :put, html: { autocomplete: "on", class: "form-defaults edit_user" }) do |f| %>
+    <div class="form__wrapper pt-0">
+      <%= f.upload :avatar, button_class: "button button__lg button__transparent-secondary w-full" %>
 
       <%= form_required_explanation %>
 
       <%= f.text_field :name, autocomplete: "name" %>
       <%= f.text_field :nickname, autocomplete: "nickname" %>
-      <%= f.email_field :email, disabled: current_user.unconfirmed_email.present?, autocomplete: "email" %>
+      <%= f.email_field :email, disabled: current_user.unconfirmed_email.present?, autocomplete: "email", data: { original: current_user.email } %>
       <%= f.url_field :personal_url, autocomplete: "url" %>
       <%= f.text_area :about, rows: 5 %>
 
-      <%= f.collection_select(
-            :locale,
-            @account.organization.available_locales,
-            :to_s,
-            ->(locale) {locale_name(locale) }
-          ) %>
-      <p class="help-text"><%= t(".available_locales_helper") %></p>
-
       <!-- extension begin -->
       <% if current_organization.available_authorizations&.include?("user_extension") %>
         <%= render partial: "user_extension", locals: {f: f} %>
       <% end %>
       <!-- extension end -->
 
-      <% if @account.errors[:password].any? || @account.errors[:password_confirmation].any? %>
-        <%= render partial: "password_fields", locals: { form: f } %>
-      <% else %>
-        <% if current_organization.sign_in_enabled? %>
-          <p>
-            <button type="button" data-toggle="passwordChange" class="link change-password"><%= t ".change_password" %></button>
-          </p>
-          <div id="passwordChange" class="toggle-show" data-toggler=".is-expanded">
-            <%= render partial: "password_fields", locals: { form: f } %>
+      <%= f.collection_select(
+            :locale,
+            @account.organization.available_locales,
+            :to_s,
+            ->(locale) { locale_name(locale) },
+            help_text: t("available_locales_helper", scope:"decidim.account.show")
+          ) %>
+      <% if @account.password.present? %>
+        <%= render partial: "password_fields", locals: { form: f, user: current_user } %>
+        <%= render partial: "old_password_field", locals: { form: f, show_help_text: true } %>
+      <% elsif current_organization.sign_in_enabled? %>
+        <div data-component="accordion" id="accordion-password">
+          <%= button_tag(
+            class: "text-lg font-semibold text-secondary underline block cursor-pointer",
+            id: "accordion-trigger-panel-password",
+            type: "button",
+            data: { controls: "panel-password" }
+          ) do %>
+            <%= t("change_password", scope:"decidim.account.show") %>
+          <% end %>
+          <div id="panel-password" class="mt-6">
+            <%= render partial: "password_fields", locals: { form: f, user: current_user } %>
           </div>
+        </div>
+
+        <%= content_tag :div, id: "panel-old-password", class: @account.errors[:old_password].any? ? nil : "hidden" do %>
+          <%= render partial: "old_password_field", locals: { form: f, show_help_text: true } %>
         <% end %>
       <% end %>
 
-      <%= f.submit t(".update_account") %>
+      <div class="form__wrapper-block flex-col-reverse md:flex-row justify-between">
+        <%= f.submit t("update_account", scope:"decidim.account.show"), class: "button button__sm md:button__lg button__secondary mr-auto !ml-0" %>
+      </div>
     </div>
   <% end %>
-</div>
+<% end %>