[#16] [Frontend] As a User, I can sign up and sign in/out with a username and password

Dangerfile

@@ -19,7 +19,8 @@ suggester.suggest
 eslint.lint
 
 # Report your Ruby app test suite code coverage in Danger.
-simplecov.report 'coverage/coverage.json'
+# simplecov.report 'coverage/coverage.json'
 
 # Report missing test coverage of new changes in Danger
-undercover.report
+# Commented as undercover reports needs tests to run, which needs a different env
+# undercover.report

app/assets/stylesheets/application.scss

@@ -12,6 +12,7 @@
 // Base
 
 // Layouts
+@import 'layouts/default';
 
 // Components
 

app/assets/stylesheets/layouts/default.scss

@@ -0,0 +1,9 @@
+.layout-default {
+  .app-footer {
+    width: 100%;
+    height: 60px;
+    margin-top: 2rem;
+    line-height: 60px;
+    background-color: $gray-100;
+  }
+}

app/assets/stylesheets/vendor/bootstrap/bootstrap.scss

@@ -10,33 +10,33 @@
 @import 'bootstrap/scss/reboot';
 @import 'bootstrap/scss/type';
 @import 'bootstrap/scss/utilities';
-@import 'bootstrap/scss/images';
+//@import 'bootstrap/scss/images';
 @import 'bootstrap/scss/grid';
 @import 'bootstrap/scss/forms';
 @import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/code';
-@import 'bootstrap/scss/transitions';
+//@import 'bootstrap/scss/tables';
+//@import 'bootstrap/scss/code';
+//@import 'bootstrap/scss/transitions';
 @import 'bootstrap/scss/dropdown';
 @import 'bootstrap/scss/button-group';
 @import 'bootstrap/scss/input-group';
-@import 'bootstrap/scss/custom-forms';
+//@import 'bootstrap/scss/custom-forms';
 @import 'bootstrap/scss/nav';
 @import 'bootstrap/scss/navbar';
 @import 'bootstrap/scss/card';
-@import 'bootstrap/scss/breadcrumb';
+//@import 'bootstrap/scss/breadcrumb';
 @import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/jumbotron';
+//@import 'bootstrap/scss/badge';
+//@import 'bootstrap/scss/jumbotron';
 @import 'bootstrap/scss/alert';
 @import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/media';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/close';
-@import 'bootstrap/scss/toasts';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/carousel';
-@import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/print';
+//@import 'bootstrap/scss/media';
+//@import 'bootstrap/scss/list-group';
+//@import 'bootstrap/scss/close';
+//@import 'bootstrap/scss/toasts';
+//@import 'bootstrap/scss/modal';
+//@import 'bootstrap/scss/tooltip';
+//@import 'bootstrap/scss/popover';
+//@import 'bootstrap/scss/carousel';
+//@import 'bootstrap/scss/spinners';
+//@import 'bootstrap/scss/print';

app/views/devise/confirmations/new.html.erb

@@ -1,6 +1,7 @@
 <h2>Resend confirmation instructions</h2>
 
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
+
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="field">

app/views/devise/passwords/edit.html.erb

@@ -1,7 +1,9 @@
 <h2>Change your password</h2>
 
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
+
   <%= render "devise/shared/error_messages", resource: resource %>
+
   <%= f.hidden_field :reset_password_token %>
 
   <div class="field">

app/views/devise/passwords/new.html.erb

@@ -1,6 +1,7 @@
 <h2>Forgot your password?</h2>
 
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="field">

app/views/devise/registrations/_edit_form.html.erb

@@ -0,0 +1,70 @@
+<%= form_for(resource, as: resource_name,
+             url: registration_path(resource_name), html: { method: :put }) do |f| %>
+
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="row">
+    <div class="col-12 col-md-6">
+      <div class="form-group">
+        <%= f.label :first_name %><br/>
+        <%= f.text_field :first_name, autofocus: true, class: 'form-control' %>
+      </div>
+    </div>
+    <div class="col-12 col-md-6">
+      <div class="form-group">
+        <%= f.label :last_name %><br/>
+        <%= f.text_field :last_name, class: 'form-control' %>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12 col-md-6">
+      <%= f.label :email %>
+      <div class="form-group">
+        <%= f.email_field :email, autocomplete: 'email', class: 'form-control' %>
+      </div>
+
+      <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+        <div><%= t('waiting_confirmation_for') %>: <%= resource.unconfirmed_email %></div>
+      <% end %>
+    </div>
+    <div class="col-12 col-md-6">
+      <div class="form-group">
+        <%= f.label :current_password %>
+        <%= f.password_field :current_password, autocomplete: 'current-password', class: 'form-control' %>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <a class="btn btn-link"
+       data-toggle="collapse"
+       href="#newPassword"
+       role="button"
+       aria-expanded="false"
+       aria-controls="newPassword">
+      Set a new password
+    </a>
+  </div>
+  <div class="collapse" id="newPassword">
+    <% if @minimum_password_length %>
+      <em>(<%= "#{@minimum_password_length} #{t('min_char')}" %>)</em>
+    <% end %>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <div class="form-group">
+          <%= f.label :password %> <br/>
+          <%= f.password_field :password, autocomplete: "new-password", class: 'form-control' %>
+        </div>
+      </div>
+      <div class="col-12 col-md-6">
+        <div class="form-group">
+          <%= f.label :password_confirmation %><br/>
+          <%= f.password_field :password_confirmation, autocomplete: 'new-password', class: 'form-control' %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <%= f.submit t('update'), class: 'btn btn-primary btn-block' %>
+
+<% end %>

app/views/devise/registrations/_new_form.html.erb

@@ -0,0 +1,31 @@
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="form-group">
+    <%= f.label :first_name %><br/>
+    <%= f.text_field :first_name, autofocus: true, class: 'form-control' %>
+  </div>
+  <div class="form-group">
+    <%= f.label :last_name %><br/>
+    <%= f.text_field :last_name, class: 'form-control' %>
+  </div>
+  <div class="form-group">
+    <%= f.label :email %><br/>
+    <%= f.email_field :email, autocomplete: 'email', class: 'form-control' %>
+  </div>
+  <div class="form-group">
+    <%= f.label :password %><br/>
+    <% if @minimum_password_length %>
+      <em>(<%= "#{@minimum_password_length} #{t('min_char')}" %>)</em>
+    <% end %><br/>
+    <%= f.password_field :password, autocomplete: 'new-password', class: 'form-control' %>
+  </div>
+  <div class="form-group">
+    <%= f.label :password_confirmation %><br/>
+    <%= f.password_field :password_confirmation, autocomplete: 'new-password', class: 'form-control' %>
+  </div>
+  <div class="form-group">
+    <%= f.submit t('auth.sign_up'), class: 'btn btn-primary btn-block' %>
+  </div>
+<% end %>

app/views/devise/registrations/edit.html.erb

@@ -1,53 +1,29 @@
-<h2>Edit <%= resource_name.to_s.humanize %></h2>
-
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
-
-  <div class="field">
-    <%= f.label :first_name %><br />
-    <%= f.text_field :first_name, autofocus: true %>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col col-md-12 col-lg-8">
+      <div class="card">
+        <section class="card-body">
+          <h2>Edit <%= resource_name.to_s.humanize %></h2>
+
+          <%= render 'edit_form' %>
+        </section>
+      </div>
+    </div>
   </div>
-
-  <div class="field">
-    <%= f.label :last_name %><br />
-    <%= f.text_field :last_name %>
-  </div>
-
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autocomplete: "email" %>
+  <div class="row justify-content-center mt-2">
+    <div class="col col-md-6 col-lg-4">
+      <div class="card">
+        <section class="card-body">
+          <h3>Cancel my account</h3>
+
+          <p><%= t('unhappy') %>? 🥺</p>
+          <%= button_to t('auth.cancel_my_account'),
+                        registration_path(resource_name),
+                        data: { confirm: t('confirm') },
+                        method: :delete,
+                        class: 'btn btn-danger btn-block' %>
+        </section>
+      </div>
+    </div>
   </div>
-
-  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
-    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
-  <% end %>
-
-  <div class="field">
-    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-    <% if @minimum_password_length %>
-      <br />
-      <em><%= @minimum_password_length %> characters minimum</em>
-    <% end %>
-  </div>
-
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
-    <%= f.password_field :current_password, autocomplete: "current-password" %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Update" %>
-  </div>
-<% end %>
-
-<h3>Cancel my account</h3>
-
-<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
-
-<%= link_to "Back", :back %>
+</div>

app/views/devise/registrations/new.html.erb

@@ -1,39 +1,14 @@
-<h2>Sign up</h2>
-
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
-
-  <div class="field">
-    <%= f.label :first_name %><br />
-    <%= f.text_field :first_name, autofocus: true %>
-  </div>
-
-  <div class="field">
-    <%= f.label :last_name %><br />
-    <%= f.text_field :last_name %>
-  </div>
-
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autocomplete: "email" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :password %>
-    <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-  </div>
-
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Sign up" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col col-md-6 col-lg-4">
+      <div class="card">
+        <section class="card-body">
+          <%= link_to t('auth.sign_in'), new_session_path(resource_name), class: 'float-right btn btn-outline-primary' %>
+          <h4 class="card-title mb-4 mt-1">Sign up</h4>
+
+          <%= render 'devise/registrations/new_form' %>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>