UI (#2)

* Better login page * Reset Password * Sign up * Adding some text * Google, Apple sign in/up placeholders * Flash messages Co-authored-by: Stephane Paquet <spaquet@up4b.com>
the-pew-inc · Jun 6, 2022 · a20dc85 · a20dc85
1 parent b4065f7
commit a20dc85
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,10 @@
 [![Maintainability](https://api.codeclimate.com/v1/badges/610524b9bc52d96580e1/maintainability)](https://codeclimate.com/github/spaquet/the-pew/maintainability)
 
 ## CREDITS
-Logo [https://www.svgrepo.com/svg/419369/data-information-open-data]
+Logos [https://www.svgrepo.com/vectors/google/]
 
 
+Icons [https://heroicons.com/]
+
 ## LICENSE
 To Read: [https://www.linkedin.com/pulse/how-we-picked-our-open-source-license-cloudkeeper-framework-kamp/]
diff --git a/app/controllers/passwords_controller.rb b/app/controllers/passwords_controller.rb
@@ -10,12 +10,12 @@ def create
     if @user.present?
       if @user.confirmed?
         @user.send_password_reset_email!
-        redirect_to root_path, notice: "If that user exists we've sent instructions to their email."
+        redirect_to login_path, notice: "If that user exists we've sent instructions to their email."
       else
         redirect_to new_confirmation_path, alert: "Please confirm your email first."
       end
     else
-      redirect_to root_path, notice: "If that user exists we've sent instructions to their email."
+      redirect_to login_path, notice: "If that user exists we've sent instructions to their email."
     end
   end
 

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -1,2 +1,24 @@
 module ApplicationHelper
+  def flash_bg_color(type)
+    case type
+    when "alert"
+      "bg-red-100"
+    when "notice"
+      "bg-blue-100"
+    else
+      # TODO: report in system log
+      "bg-green-100"
+    end
+  end
+  def flash_text_color(type)
+    case type
+    when "alert"
+      "text-red-700"
+    when "notice"
+      "text-blue-700"
+    else
+      # TODO: report in system log
+      "text-green-700"
+    end
+  end
 end
diff --git a/app/javascript/controllers/close_flash_controller.js b/app/javascript/controllers/close_flash_controller.js
@@ -4,7 +4,7 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = ["flash"];
   static values = {
-    delay: { type: Number, default: 1000 },
+    delay: { type: Number, default: 2500 },
   };
 
   connect() {

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -17,7 +17,7 @@
         <%= render "shared/flash" %>
       </div>
       <main class="flex-grow">
-        <div class="pt-4 lg:max-w-7xl max-w-6xl px-4 mx-auto">
+        <div class="pt-4 m-auto lg:max-w-7xl max-w-6xl px-4">
           <%= yield %>
         </div>
       </main>

diff --git a/app/views/passwords/new.html.erb b/app/views/passwords/new.html.erb
@@ -1,20 +1,23 @@
 <!-- app/views/passwords/new.html.erb -->
-<div class="sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
-  <div class="flex flex-col items-center pt-28">
-    <h1>
-      Password Reset
-    </h1>
-    <span class="text-sm">Enter your email address, click "Reset Password" and check your email for further instructions.</span>
+<div class="container pt-9">
+  <div class="m-auto md:w-8/12 lg:w-5/12">
+    <div class="text-center pb-4">
+      <!-- TODO: ADD LOGO HERE -->
+      <h1 class="font-bold text-4xl text-slate-800">Reset your password</h1>
+      <div class="text-sm text-slate-500 mt-9">Enter your email address below and follow the instructions you will receive on this email to reset your password.</div>
+    </div>
+    <div class="mx-auto">
+      <%= form_with url: passwords_path, scope: :user do |form| %>
+        <%= form.email_field :email, required: true, autocomplete: "email", autofocus: :on, placeholder: "Your email address", class: "form-input w-full block rounded-xl border-green-500 border-2 mb-6" %>
+        <%= form.submit "Reset Password", class: "w-full block py-3 font-medium text-white uppercase bg-green-500 rounded hover:bg-green-400 transition duration-300 ease-in-out" %>
+      <% end %>
+    </div>
+    <div class="pt-3">
+      <%= link_to login_path, class: "link link-accent flex flex-1 items-center text-green-500 hover:text-green-700" do %>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 pr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+        </svg>
+        <span>Return to the Login screen</span>
+      <% end %>
+    </div>
   </div>
-  <div class="p-4 border border-neutral-content rounded-lg">
-    <%= form_with url: passwords_path, scope: :user do |form| %>
-      <div class="flex flex-col space-y-4 w-full max-w-xs">
-        <%= form.email_field :email, required: true, autocomplete: "email", autofocus: :on, placeholder: "your_email@address.com", class: "input input-bordered w-full max-w-xs" %>
-        <%= form.submit "Reset Password", class: "btn btn-primary ml-4" %>
-      </div>
-    <% end %>
-  </div>
-  <div class="pt-3">
-    <%= link_to "Return to the Login screen", login_path, class: "link link-accent" %>
-  </div>
-</div>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
@@ -1,16 +1,55 @@
 <!-- app/views/sessions/new.html.erb -->
-<%= form_with url: login_path, scope: :user do |form| %>
-  <div>
-    <%= form.label :email %>
-    <%= form.email_field :email, required: true, autocomplete: "email" %>
+<div class="container pt-9">
+  <div class="m-auto md:w-8/12 lg:w-5/12">
+    <div class="text-center pb-9">
+      <!-- TODO: ADD LOGO HERE -->
+      <h1 class="font-bold text-4xl text-slate-800">Sign in to your account</h1>
+      <div class="text-sm text-slate-500 pt-2">Or <%= link_to 'create your account for free', sign_up_path, class: "text-green-500 hover:text-green-700" %></div>
+    </div>
+    <div class="mx-auto">
+      <%= form_with url: login_path, scope: :user do |form| %>
+        <div class="mb-4">
+          <%= form.email_field :email, required: true, autocomplete: "email", class: "form-input w-full block rounded-xl border-green-500 border-2", placeholder: "Your email address" %>
+        </div>
+        <div class="mb-6">
+          <%= form.password_field :password, required: true, autocomplete: "current-password", class: "form-input w-full block rounded-xl border-green-500 border-2", placeholder: "Password" %>
+        </div>
+        <div class="flex flex-row items-center justify-between mb-6">
+          <div class="flex flex-1 items-center space-x-2">
+            <%= form.check_box :remember_me, class: "form-checkbox rounded border-green-500" %>
+            <%= form.label :remember_me %>
+          </div>
+          <div>
+            <%= link_to 'Forgot your password?', new_password_path, class: "text-green-500 hover:text-green-700" %>
+          </div>
+        </div>
+        <%= form.submit "Sign In", class: "w-full block py-3 font-medium text-white uppercase bg-green-500 rounded hover:bg-green-400 transition duration-300 ease-in-out" %>
+      <% end %>
+      <h4 class="text-center text-sm font-light text-slate-500 py-3">-- Or continue with --</h4>
+      <div class="mb-4">
+        <%= link_to new_password_path, class: "w-full block py-3 font-medium text-white bg-green-400 rounded" do %>
+          <div class="flex flex-1 justify-center items-center">
+            <svg class="h-7 w-7 pr-2" fill="currentColor" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <path d="M11.99,13.9 L11.99,10.18 L21.35,10.18 C21.49,10.81 21.6,11.4 21.6,12.23 C21.6,17.94 17.77,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 C14.7,2 16.96,2.99 18.69,4.61 L15.85,7.37 C15.13,6.69 13.87,5.89 12,5.89 C8.69,5.89 5.99,8.64 5.99,12.01 C5.99,15.38 8.69,18.13 12,18.13 C15.83,18.13 17.24,15.48 17.5,13.91 L11.99,13.91 L11.99,13.9 Z" id="Shape"></path>
+            </svg>
+            <div>
+              Google
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <div>
+        <%= link_to new_password_path, class: "w-full block py-3 font-medium text-white bg-green-700 rounded" do %>
+          <div class="flex flex-1 justify-center items-center">
+            <svg class="h-7 w-7 pr-2" fill="currentColor" viewBox="-52.01 0 560.035 560.035" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <path d="M380.844 297.529c.787 84.752 74.349 112.955 75.164 113.314-.622 1.988-11.754 40.191-38.756 79.652-23.343 34.117-47.568 68.107-85.731 68.811-37.499.691-49.557-22.236-92.429-22.236-42.859 0-56.256 21.533-91.753 22.928-36.837 1.395-64.889-36.891-88.424-70.883-48.093-69.53-84.846-196.475-35.496-282.165 24.516-42.554 68.328-69.501 115.882-70.192 36.173-.69 70.315 24.336 92.429 24.336 22.1 0 63.59-30.096 107.208-25.676 18.26.76 69.517 7.376 102.429 55.552-2.652 1.644-61.159 35.704-60.523 106.559M310.369 89.418C329.926 65.745 343.089 32.79 339.498 0 311.308 1.133 277.22 18.785 257 42.445c-18.121 20.952-33.991 54.487-29.709 86.628 31.421 2.431 63.52-15.967 83.078-39.655"></path>
+            </svg>
+            <div>
+              Apple
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
   </div>
-  <div>
-    <%= form.label :password %>
-    <%= form.password_field :password, required: true, autocomplete: "current-password" %>
-  </div>
-  <div>
-    <%= form.label :remember_me %>
-    <%= form.check_box :remember_me %>
-  </div>
-  <%= form.submit "Sign In" %>
-<% end %>
+</div>
diff --git a/app/views/shared/_flash.html.erb b/app/views/shared/_flash.html.erb
@@ -1,11 +1,11 @@
 <!-- app/views/shared/_flash.html.erb -->
 <% flash.each do |flash_type, message| %>
-  <div class="flex flex-row items-center justify-between bg-red-100 max-w-6xl lg:max-w-7xl lg:rounded-xl md:rounded mx-auto px-4 py-3 mt-1" data-controller="close-flash" data-close-flash-target="flash">
-    <div class="text-red-700 font-bold">
+  <div class="flex flex-row items-center justify-between <%= flash_bg_color(flash_type) %> max-w-6xl lg:max-w-7xl lg:rounded-xl md:rounded mx-auto px-4 py-3 mt-1" data-controller="close-flash" data-close-flash-target="flash">
+    <div class="<%= flash_text_color(flash_type) %> font-bold">
       <%= message %>
     </div>
     <div>
-      <button class="text-red-700" data-action="close-flash#close">
+      <button class="<%= flash_text_color(flash_type) %>" data-action="close-flash#close">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>

diff --git a/app/views/shared/_top_navigation.html.erb b/app/views/shared/_top_navigation.html.erb
@@ -55,7 +55,7 @@
           </div>
         <% else %>
           <%= link_to "Login", login_path, class: "py-2 px-2 font-medium text-gray-500 rounded hover:bg-green-500 hover:text-white transition duration-300" %>
-          <%= link_to "Sign up", sign_up_path, class: "py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300" %>
+          <%= link_to "Sign up", sign_up_path, class: "py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300 ease-in-out" %>
         <% end %>
       </div>
       <!-- Mobile menu button -->
@@ -83,7 +83,7 @@
               <%= link_to "Sign out", logout_path, data: { turbo_method: :delete }, class: "block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" %>
             <% else %>
               <li><%= link_to "Login", login_path, class: "block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" %></li>
-              <li><%= link_to "Sign Up", login_path, class: "block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" %></li>
+              <li><%= link_to "Sign Up", sign_up_path, class: "block text-sm px-2 py-4 hover:bg-green-500 transition duration-300" %></li>
             <% end %>
           </ul>
         </div>

diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
@@ -1,19 +1,50 @@
 <!-- app/views/users/new.html.erb -->
-<%= form_with model: @user, url: sign_up_path do |form| %>
-  <%= render partial: "shared/form_errors", locals: { object: form.object } %>
-  <div>
-    <%= form.label :email %>
-    <%= form.email_field :email, required: true, autofocus: true, autocomplete: "email" %>
-  </div>
-  <%= form.fields_for :profile do |f| %>
-    <div>
-      <%= f.label :nickname %>
-      <%= f.text_field :nickname, required: true, autocomplete: "nickname" %>
+<div class="container pt-9">
+  <div class="m-auto md:w-8/12 lg:w-5/12">
+    <div class="text-center pb-4">
+      <!-- TODO: ADD LOGO HERE -->
+      <h1 class="font-bold text-4xl text-slate-800">Create your account</h1>
+      <div class="text-slate-500 mt-9">Creating your account is free and let you ask questions on the platform.</div>
+    </div>
+    <div class="mx-auto">
+      <%= form_with model: @user, url: sign_up_path do |form| %>
+        <%= render partial: "shared/form_errors", locals: { object: form.object } %>
+        <div class="mb-4">
+          <div class="relative flex w-full flex-wrap items-stretch mb-3">
+            <span class="z-10 h-full leading-snug font-normal absolute text-center text-slate-500 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+      stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round"
+        d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
+              </svg>
+            </span>
+            <%= form.email_field :email, required: true, autofocus: true, autocomplete: "email", placeholder: "Your email address", class: "form-input w-full block rounded-xl border-green-500 border-2 pl-10" %>
+          </div>
+        </div>
+        <%= form.fields_for :profile do |f| %>
+          <div class="mb-4">
+            <div class="relative flex w-full flex-wrap items-stretch mb-3">
+              <span class="z-10 h-full leading-snug font-normal absolute text-center text-slate-500 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                </svg>
+              </span>
+              <%= f.text_field :nickname, required: true, autocomplete: "nickname", placeholder: "Your username or full name", class: "form-input w-full block rounded-xl border-green-500 border-2 pl-10" %>
+            </div>
+          </div>
+        <% end %>
+        <div class="mb-6">
+          <div class="relative flex w-full flex-wrap items-stretch mb-3">
+            <span class="z-10 h-full leading-snug font-normal absolute text-center text-slate-500 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+            </span>
+            <%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "You secret password", class: "form-input w-full block rounded-xl border-green-500 border-2 pl-10" %>
+          </div>
+        </div>
+        <%= form.submit "Create my account", class: "w-full block py-3 font-medium text-white uppercase bg-green-500 rounded hover:bg-green-400 transition duration-300 ease-in-out" %>
+        <div class="text-sm text-slate-500 mt-2">By clicking on CREATE MY ACCOUNT, you agree to the Terms of Service and Privacy of ThePew and our code of conduct</div>
+        <div class="text-sm text-slate-500 mt-3">After clicking on CREATE MY ACCOUNT, you will receive an email to verify your email address. Unverified accounts cannot be used to ask questions.</div>
+      <% end %>
     </div>
-  <% end %>
-  <div>
-    <%= form.label :password %>
-    <%= form.password_field :password, required: true, autocomplete: "new-password" %>
-  </div>
-  <%= form.submit "Sign Up" %>
-<% end %>
diff --git a/package.json b/package.json
@@ -13,5 +13,8 @@
   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
     "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "0.5.2"
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,8 +1,9 @@
 module.exports = {
   content: [
-    './app/views/**/*.html.erb',
-    './app/helpers/**/*.rb',
-    './app/assets/stylesheets/**/*.css',
-    './app/javascript/**/*.js'
-  ]
-}
+    "./app/views/**/*.html.erb",
+    "./app/helpers/**/*.rb",
+    "./app/assets/stylesheets/**/*.css",
+    "./app/javascript/**/*.js",
+  ],
+  plugins: [require("@tailwindcss/forms")],
+};
diff --git a/yarn.lock b/yarn.lock
@@ -51,6 +51,13 @@
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.3.tgz#71f08e958883af64f6a20489318b5e95d2c6dc5b"
   integrity sha512-Iefl21FZD+ck1di6xSHMYzSzRiNJTHV4NrAzCfDfqc/wPz4xncrP8f2/fJ+2jzwKIaDn76UVMsALh7R5OzsF8Q==
 
+"@tailwindcss/forms@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.2.tgz#4ef45f9916dcb37838cbe7fecdcc4ba7a7c2ab59"
+  integrity sha512-pSrFeJB6Bg1Mrg9CdQW3+hqZXAKsBrSG9MAfFLKy1pVA4Mb4W7C0k7mEhlmS2Dfo/otxrQOET7NJiJ9RrS563w==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 acorn-node@^1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
@@ -423,6 +430,11 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"