Redesign: login & signup (decidim#9455)

* activate redesign

* login form

* adapt login to new layout

* extract styles login

* register form

* another forms of login

* fix space

* add placeholders & fix styles

* fix button color

* fix generic label css

* display inline for links

* password update

* password hidden char

* decorator size shunk

* fix test login + refactor omniauth buttons

* cheat tailwind compilation

* append note

* fix stylelint

* help-text as block via CSS not HTML

* fix position helper messages on login

* fix admin test

* fix focus border

decidim-admin/spec/shared/manage_impersonations_examples.rb

@@ -39,7 +39,7 @@
       let(:document_number) { "123456789Y" }
 
       it "shows the errors in the form" do
-        expect(page).to have_selector("label", text: "Document number*\nRequired field\nis invalid")
+        expect(page).to have_selector("label", text: "Document number*Required field\nis invalid")
       end
     end
 

decidim-core/app/controllers/concerns/decidim/devise_controllers.rb

@@ -22,7 +22,7 @@ module DeviseControllers
       include UserBlockedChecker
 
       include RedesignLayout
-      redesign active: false
+      redesign active: true
 
       helper Decidim::TranslationsHelper
       helper Decidim::MetaTagsHelper

decidim-core/app/helpers/decidim/passwords_helper.rb

@@ -27,7 +27,8 @@ def password_field_options_for(user)
         required: true,
         help_text:,
         minlength: min_length,
-        maxlength: ::PasswordValidator::MAX_LENGTH
+        maxlength: ::PasswordValidator::MAX_LENGTH,
+        placeholder: "••••••"
       }
     end
 

decidim-core/app/packs/stylesheets/decidim/_redesigned_forms.scss

@@ -14,7 +14,7 @@
   input[type="week"],
   textarea{
     &:not(.reset-defaults){
-      @apply inline-block px-4 py-2 border border-gray outline outline-1 outline-transparent rounded bg-background-2 text-black placeholder:text-gray focus:border-0 focus:outline-2 focus:outline-secondary invalid:border-0 invalid:outline-2 invalid:outline-alert disabled:bg-background-3 disabled:text-gray-2;
+      @apply inline-block px-4 py-2 border border-gray outline outline-1 outline-transparent rounded bg-background-2 text-black font-normal placeholder:text-gray focus:outline-2 focus:outline-secondary invalid:border-0 invalid:outline-2 invalid:outline-alert disabled:bg-background-3 disabled:text-gray-2;
 
       &.sm{
         /* stylelint-disable-next-line number-leading-zero */
@@ -36,3 +36,7 @@
     }
   }
 }
+
+.help-text{
+  @apply block text-md text-gray-2 font-normal prose-a:text-secondary prose-a:underline;
+}

decidim-core/app/packs/stylesheets/decidim/_redesigned_login.scss

@@ -0,0 +1,60 @@
+.login{
+  &__info{
+    @apply text-gray-2 text-lg space-y-4 mb-10 prose-a:text-secondary prose-a:underline last:[&>*]:font-semibold;
+  }
+
+  &__info-required{
+    @apply mb-10 text-gray-2 text-sm;
+  }
+
+  &__omniauth{
+    @apply flex flex-col items-center gap-8 py-10 text-gray-2 font-semibold;
+
+    &-button{
+      @apply border border-gray shadow-[0_4px_6px_rgba(211,211,211,0.25)] justify-start gap-8 text-lg min-w-[50%];
+
+      svg{
+        @apply w-6 h-6 fill-current;
+      }
+    }
+
+    &-separator{
+      @apply flex items-center justify-center gap-12 after:content-[''] before:content-[''] after:h-px before:h-px after:bg-background before:bg-background after:grow before:grow;
+    }
+  }
+
+  &__form{
+    @apply flex flex-col py-10 gap-10;
+
+    &-block{
+      @apply py-10 border-t-2 border-background flex flex-col py-10 gap-4 only:[&_button]:ml-auto [&_p]:text-gray-2;
+    }
+
+    &-checkbox-label{
+      @apply text-md text-gray-2 font-normal prose-a:text-secondary prose-a:underline cursor-pointer;
+    }
+
+    & label:not(&-checkbox-label),
+    &-block label:not(&-checkbox-label){
+      @apply font-semibold text-lg;
+    }
+
+    .help-text{
+      @apply mt-4;
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="password"]{
+      @apply w-full block mt-4;
+    }
+  }
+
+  &__links{
+    @apply flex flex-col gap-4 py-10 border-t-2 border-background;
+
+    a{
+      @apply w-fit text-secondary hover:underline;
+    }
+  }
+}

decidim-core/app/packs/stylesheets/decidim/redesigned_application.scss

@@ -31,6 +31,8 @@
   @import "stylesheets/decidim/redesigned_dropdown.scss";
 }
 
+@import "stylesheets/decidim/redesigned_login.scss";
+
 // This imports all the Decidim module stylesheet imports registered at
 // `config/assets.rb` of the module for the "app" group.
 // @import "!decidim-style-imports[app]";

decidim-core/app/views/decidim/devise/confirmations/new.html.erb

@@ -1,33 +1,27 @@
 <% add_decidim_page_title(t("devise.confirmations.new.resend_confirmation_instructions")) %>
 
-<div class="wrapper">
-<div class="row collapse">
-  <div class="row collapse">
-    <div class="columns large-8 large-centered text-center page-title">
-      <h1><%= t("devise.confirmations.new.resend_confirmation_instructions") %></h1>
-    </div>
-  </div>
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
 
-  <div class="row">
-    <div class="columns medium-7 large-5 medium-centered">
-      <div class="card">
-        <div class="card__content">
-          <%= decidim_form_for(resource, namespace: "confirmation", as: resource_name, url: confirmation_path(resource_name), html: { method: :post, class: "register-form new_user" }) do |f| %>
-            <%= render "devise/shared/error_messages", resource: resource %>
+  <div class="flex justify-center">
+    <h1 class="h1 decorator my-12"><%= t("devise.confirmations.new.resend_confirmation_instructions") %></h1>
+  </div>
 
-            <div class="field">
-              <%= f.email_field :email, autofocus: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), autocomplete: "email" %>
-            </div>
+  <%= decidim_form_for(resource, namespace: "confirmation", as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
 
-            <div class="actions">
-              <%= f.submit t("devise.confirmations.new.resend_confirmation_instructions"), class: "button expanded" %>
-            </div>
-          <% end %>
+    <div class="login__form">
+      <%= f.email_field :email, autofocus: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), autocomplete: "email", placeholder: "hi@email.com" %>
+    </div>
 
-          <%= render "decidim/devise/shared/links" %>
-        </div>
-      </div>
+    <div class="login__form-block">
+      <button type="submit" class="button button__lg button__secondary">
+        <%= t("devise.confirmations.new.resend_confirmation_instructions") %>
+        <%= icon "arrow-right-line", class: "fill-current" %>
+      </button>
     </div>
+  <% end %>
+
+  <div class="login__links">
+    <%= render "decidim/devise/shared/redesigned_links" %>
   </div>
-</div>
-</div>
+
+<% end %>

decidim-core/app/views/decidim/devise/passwords/edit.html.erb

@@ -1,39 +1,32 @@
-<div class="wrapper">
-<div class="row collapse">
-  <div class="row collapse">
-    <div class="columns large-8 large-centered text-center page-title">
-      <h1><%= t("devise.passwords.edit.title") %></h1>
-    </div>
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+
+  <div class="flex justify-center">
+    <h1 class="h1 decorator my-12"><%= t("devise.passwords.edit.title") %></h1>
   </div>
 
-  <div class="row">
-    <div class="columns medium-7 large-5 medium-centered">
-      <div class="card">
-        <div class="card__content">
-          <%= decidim_form_for(resource, namespace: "password", as: resource_name, url: @send_path || password_path(resource_name), html: { method: :put, class: "register-form new_user" }) do |f| %>
-            <%= form_required_explanation %>
-
-            <%= f.hidden_field :reset_password_token %>
-
-            <div class="field">
-              <%= f.password_field :password, password_field_options_for(current_user || params["reset_password_token"]) %>
-            </div>
-
-            <div class="field">
-              <%= f.password_field :password_confirmation, password_field_options_for(current_user || params["reset_password_token"]).except(:help_text) %>
-            </div>
-
-            <div class="actions">
-              <%= f.submit t("devise.passwords.edit.change_my_password"), class: "button expanded" %>
-            </div>
-          <% end %>
-
-          <% unless current_user %>
-            <%= render "decidim/devise/shared/links" %>
-          <% end %>
-        </div>
-      </div>
+  <%= decidim_form_for(resource, namespace: "password", as: resource_name, url: @send_path || password_path(resource_name), html: { method: :put, class: "register-form new_user" }) do |f| %>
+    <%= form_required_explanation %>
+
+    <div class="login__form">
+      <%= f.hidden_field :reset_password_token %>
+
+      <%= f.password_field :password, password_field_options_for(current_user || params["reset_password_token"]) %>
+
+      <%= f.password_field :password_confirmation, password_field_options_for(current_user || params["reset_password_token"]).except(:help_text) %>
     </div>
-  </div>
-</div>
-</div>
+
+    <div class="login__form-block">
+      <button type="submit" class="button button__lg button__secondary">
+        <%= t("devise.passwords.edit.change_my_password") %>
+        <%= icon "arrow-right-line", class: "fill-current" %>
+      </button>
+    </div>
+  <% end %>
+
+  <% unless current_user %>
+    <div class="login__links">
+      <%= render "decidim/devise/shared/redesigned_links" %>
+    </div>
+  <% end %>
+
+<% end %>

decidim-core/app/views/decidim/devise/passwords/new.html.erb

@@ -1,31 +1,27 @@
 <% add_decidim_page_title(t("devise.passwords.new.forgot_your_password")) %>
 
-<div class="wrapper">
-<div class="row collapse">
-  <div class="row collapse">
-    <div class="columns large-8 large-centered text-center page-title">
-      <h1><%= t("devise.passwords.new.forgot_your_password") %></h1>
-    </div>
+<%= render layout: "layouts/decidim/shared/layout_center" do %>
+
+  <div class="flex justify-center">
+    <h1 class="h1 decorator my-12"><%= t("devise.passwords.new.forgot_your_password") %></h1>
   </div>
 
-  <div class="row">
-    <div class="columns medium-7 large-5 medium-centered">
-      <div class="card">
-        <div class="card__content">
-          <%= decidim_form_for(resource, namespace: "password", as: resource_name, url: password_path(resource_name), html: { method: :post, class: "register-form new_user" }) do |f| %>
-            <div class="field">
-              <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-            </div>
+  <%= decidim_form_for(resource, namespace: "password", as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
 
-            <div class="actions">
-              <%= f.submit t("devise.passwords.new.send_me_reset_password_instructions"), class: "button expanded" %>
-            </div>
-          <% end %>
+    <div class="login__form">
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "hi@email.com" %>
+    </div>
 
-          <%= render "decidim/devise/shared/links" %>
-        </div>
-      </div>
+    <div class="login__form-block">
+      <button type="submit" class="button button__lg button__secondary">
+        <%= t("devise.passwords.new.send_me_reset_password_instructions") %>
+        <%= icon "arrow-right-line", class: "fill-current" %>
+      </button>
     </div>
+  <% end %>
+
+  <div class="login__links">
+    <%= render "decidim/devise/shared/redesigned_links" %>
   </div>
-</div>
-</div>
+
+<% end %>