Extract component to render account permissions

We were using similar code in four different places; six, if we count the welcome pages seeds. Reducing duplication in the pages seeds is a bit tricky because administrators are supposed to edit their content and might remove the HTML class we use to define styles. However, we can share the code everywhere else. Note that there's a bug in the application since we show that level 2 users cannot vote for budget projects but we give them permission to do so in the abilities model. We're keeping the same behavior after this refactoring but we might change it in the future.
consuldemocracy · javierm · Dec 1, 2022 · Aug 10, 2022 · Aug 10, 2022 · Aug 11, 2022
commit 9b908d72641728457d6357ea50a4c2c191559fac
diff --git a/app/assets/stylesheets/account/permissions_list.scss b/app/assets/stylesheets/account/permissions_list.scss
@@ -0,0 +1,23 @@
+.permissions-list {
+ list-style-type: none;
+ margin-bottom: 0;
+ margin-left: 0;
+
+ li {
+ font-size: $small-font-size;
+ margin-bottom: $line-height / 2;
+
+ span {
+ color: $text-medium;
+ font-size: rem-calc(12);
+ }
+
+ .icon-check {
+ color: $check;
+ }
+
+ .icon-x {
+ color: $delete;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
@@ -525,32 +525,6 @@ code {
 // 05. Management
 // --------------
 
-.user-permissions {
-
- ul {
- list-style-type: none;
- margin-left: 0;
- }
-
- li {
- font-size: rem-calc(14);
- margin-bottom: rem-calc(12);
-
- span {
- color: $text-medium;
- font-size: rem-calc(12);
- }
-
- .icon-check {
- color: $check;
- }
-
- .icon-x {
- color: $delete;
- }
- }
-}
-
 .account-info,
 .login-as {
  background-color: $highlight;

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -41,6 +41,7 @@
 @import "stats";
 @import "sticky_overrides";
 @import "tags";
+@import "account/**/*";
 @import "admin/**/*";
 @import "budgets/**/*";
 @import "debates/**/*";

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -1278,30 +1278,6 @@ form {
  font-size: rem-calc(12);
  }
  }
-
- ul {
- list-style-type: none;
- margin-bottom: 0;
- margin-left: 0;
- }
-
- li {
- font-size: $small-font-size;
- margin-bottom: $line-height / 2;
-
- span {
- color: $text-medium;
- font-size: rem-calc(12);
- }
-
- .icon-check {
- color: $check;
- }
-
- .icon-x {
- color: $delete;
- }
- }
 }
 
 .notifications-list {

diff --git a/app/components/account/permissions_list_component.html.erb b/app/components/account/permissions_list_component.html.erb
@@ -0,0 +1,20 @@
+<ul class="permissions-list">
+ <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
+ <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
+ <li>
+ <% if user.level_two_or_three_verified? %>
+ <span class="icon-check"></span>
+ <% else %>
+ <span class="icon-x"></span>
+ <% end %>
+ <%= t("verification.user_permission_support_proposal") %>
+ </li>
+ <li>
+ <% if user.level_three_verified? %>
+ <span class="icon-check"></span>
+ <% else %>
+ <span class="icon-x"></span>
+ <% end %>
+ <%= t("verification.user_permission_votes") %>
+ </li>
+</ul>
diff --git a/app/components/account/permissions_list_component.rb b/app/components/account/permissions_list_component.rb
@@ -0,0 +1,7 @@
+class Account::PermissionsListComponent < ApplicationComponent
+ attr_reader :user
+
+ def initialize(user)
+ @user = user
+ end
+end
diff --git a/app/controllers/management/users_controller.rb b/app/controllers/management/users_controller.rb
@@ -1,6 +1,6 @@
 class Management::UsersController < Management::BaseController
  def new
- @user = User.new(user_params)
+ @user = User.new(user_params.merge(verified_at: Time.current))
  end
 
  def create

diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb
@@ -93,26 +93,7 @@
 
  <p><%= t("account.show.user_permission_info") %></p>
 
- <ul>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
- <li>
- <% if current_user.level_two_or_three_verified? %>
- <span class="icon-check"></span>
- <% else %>
- <span class="icon-x"></span>
- <% end %>
- <%= t("verification.user_permission_support_proposal") %>
- </li>
- <li>
- <% if current_user.level_three_verified? %>
- <span class="icon-check"></span>
- <% else %>
- <span class="icon-x"></span>
- <% end %>
- <%= t("verification.user_permission_votes") %>
- </li>
- </ul>
+ <%= render Account::PermissionsListComponent.new(current_user) %>
 
  <p>
  <%= t("account.show.user_permission_verify") %>

diff --git a/app/views/management/_user_permissions.html.erb b/app/views/management/_user_permissions.html.erb
@@ -1,18 +1,5 @@
-<%# # Parameters:
- # message: A string explaining the permissions
- # permissions: An array of symbols containing the permissions
- # (can be :debates, :proposal, :support_proposal, :votes) %>
 <div class="user-permissions">
-
  <p><%= message %></p>
 
- <ul>
- <% [:debates, :proposal, :support_proposal, :votes].each do |permission| %>
- <li>
- <span class="<%= permissions.include?(permission) ? "icon-check" : "icon-x" %>"></span>
- <%= t("verification.user_permission_#{permission}") %>
- </li>
- <% end %>
- </ul>
-
+ <%= render Account::PermissionsListComponent.new(user) %>
 </div>
diff --git a/app/views/management/document_verifications/invalid_document.html.erb b/app/views/management/document_verifications/invalid_document.html.erb
@@ -8,7 +8,7 @@
 
 <%= render "management/user_permissions",
  message: t("management.document_verifications.not_in_census_info"),
- permissions: [:debates, :proposal] %>
+ user: User.new %>
 
 <p>
  <%= sanitize(t("management.document_verifications.has_no_account",

diff --git a/app/views/management/document_verifications/new.html.erb b/app/views/management/document_verifications/new.html.erb
@@ -4,7 +4,7 @@
 
 <%= render "management/user_permissions",
  message: t("management.document_verifications.in_census_has_following_permissions"),
- permissions: [:debates, :proposal, :support_proposal] %>
+ user: @document_verification.user %>
 
 <%= form_for @document_verification,
  as: :document_verification,

diff --git a/app/views/management/document_verifications/verified.html.erb b/app/views/management/document_verifications/verified.html.erb
@@ -4,6 +4,6 @@
 
 <%= render "management/user_permissions",
  message: t("management.document_verifications.in_census_has_following_permissions"),
- permissions: [:debates, :proposal, :support_proposal, :votes] %>
+ user: @document_verification.user %>
 
 <a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>
diff --git a/app/views/management/email_verifications/sent.html.erb b/app/views/management/email_verifications/sent.html.erb
@@ -4,7 +4,7 @@
 
 <%= render "management/user_permissions",
  message: t("management.email_verifications.document_found_in_census"),
- permissions: [:debates, :proposal, :support_proposal, :votes] %>
+ user: @email_verification.user %>
 
 <p>
  <a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>

diff --git a/app/views/management/users/new.html.erb b/app/views/management/users/new.html.erb
@@ -25,6 +25,6 @@
  <div class="callout">
  <%= render "management/user_permissions",
  message: t("management.document_verifications.in_census_has_following_permissions"),
- permissions: [:debates, :proposal, :support_proposal, :votes] %>
+ user: @user %>
  </div>
 </div>
diff --git a/app/views/management/users/show.html.erb b/app/views/management/users/show.html.erb
@@ -6,6 +6,6 @@
 
 <%= render "management/user_permissions",
  message: t("management.document_verifications.in_census_has_following_permissions"),
- permissions: [:debates, :proposal, :support_proposal, :votes] %>
+ user: @user %>
 
 <a href="javascript:window.print();" class="button warning radius"><%= t("management.print_info") %></a>
diff --git a/app/views/verification/letter/new.html.erb b/app/views/verification/letter/new.html.erb
@@ -24,15 +24,9 @@
  <h1><%= t("verification.letter.new.title") %></h1>
 
  <div class="user-permissions">
-
  <p><%= t("verification.letter.new.user_permission_info") %></p>
 
- <ul>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_support_proposal") %></li>
- <li><span class="icon-x"></span>&nbsp;<%= t("verification.user_permission_votes") %></li>
- </ul>
+ <%= render Account::PermissionsListComponent.new(current_user) %>
  </div>
 
  <%= link_to t("verification.letter.new.go_to_index"), root_path, class: "button warning" %>

diff --git a/app/views/verification/residence/new.html.erb b/app/views/verification/residence/new.html.erb
@@ -24,12 +24,7 @@
  <div class="user-permissions small-12">
  <p><%= t("verification.user_permission_info") %></p>
 
- <ul>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
- <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_support_proposal") %></li>
- <li><span class="icon-x"></span>&nbsp;<%= t("verification.user_permission_votes") %></li>
- </ul>
+ <%= render Account::PermissionsListComponent.new(User.new(level_two_verified_at: Time.current)) %>
  </div>
 
  <%= form_for @residence, as: "residence", url: residence_path do |f| %>