Feature: Update register template

app/assets/stylesheets/application.css.scss.erb

@@ -43,8 +43,10 @@
 @import "instances_table";
 @import "file_uploader";
 @import "browse";
+@import "register";
 @import "flatpickr/dist/themes/light";
 
+
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";

app/assets/stylesheets/bioportal.scss

@@ -49,7 +49,7 @@
 #bd {
   background: #fff;
 }
-#bd hr {
+#bd > hr {
   border:0;
   height:1px;
   color:#e9eaeb;

app/assets/stylesheets/register.scss

@@ -0,0 +1,112 @@
+.register-form{
+    margin-top: 30px;
+    padding: 37px 41px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 50px;
+    border-radius: 14px;
+}
+.register-arrowback{
+    all: none;
+}
+.register-title{
+    font-size: 18px;
+    text-align: center;
+    font-weight: 700;
+}
+#register-title-line{
+    width: 128px;
+    margin: auto;
+    margin-bottom: 20px;
+    margin-top: 3px;
+    border: 0.5px solid #76A7CC;
+    border-radius: 5px;
+}
+
+.register-double-input{
+    display: flex;
+    margin-bottom: 14px;
+}
+.register-first-input{
+    margin-right: 19px;
+}
+
+.register-input-title{
+    font-size: 12px;
+    color: #666666;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+.register-optional{
+    font-weight: 300;
+}
+.register-input-long{
+    width: 363px;
+    outline: none;
+    padding: 14px;
+    font-size: 15px;
+    font-weight: 500;
+    border: 1px solid #BDBDBD;
+    border-radius: 9px;
+    margin-bottom: 14px;
+}
+.register-input-long:focus{
+    border: 1px solid #76A7CC;
+}
+
+.register-input-short{
+    width: 172px;
+    outline: none;
+    padding: 14px;
+    font-size: 15px;
+    font-weight: 500;
+    border: 1px solid #BDBDBD;
+    border-radius: 9px;
+}
+.register-input-short:focus{
+    border: 1px solid #76A7CC;
+}
+
+
+.register-input-icon{
+    position: absolute;
+    padding: 18px;
+    box-sizing: unset;
+}
+.register-input-with-icon{
+    padding-left: 45px;
+}
+#register-check-text{
+    margin-left: 10px;
+    color: #666666;
+    font-size: 12px;
+    font-weight: 400;
+    margin-bottom: 0;
+}
+
+.register-button{
+    margin-top: 20px;
+   width: 363px;
+   font-size: 16px;
+   color: white;
+   padding: 17px;
+   background-color: #76A7CC;
+   border: none;
+   border-radius: 9px;
+
+}
+
+.register-button:hover{
+    background-color: #6B96B7;
+    cursor: pointer;
+}
+/* This is used to remove the auto added arrows in the number_text_field*/
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}

app/controllers/users_controller.rb

@@ -1,9 +1,8 @@
 class UsersController < ApplicationController
 
   before_action :unescape_id, only: [:edit, :show, :update]
-  before_action :verify_owner, only: [:edit, :show]
-  before_action :authorize_admin, only: [:index]
-
+  before_action :verify_owner, only: [:edit, :show, :subscribe, :un_subscribe]
+  before_action :authorize_admin, only: [:index,:subscribe, :un_subscribe]
   layout :determine_layout
 
   # GET /users
@@ -167,7 +166,7 @@ def subscribe
 
   def un_subscribe
     @email = params[:email] 
-    deliver "un_subscribe", SubscribeMailer.unregister_for_announce_list(@email)
+    deliver "unsubscribe", SubscribeMailer.unregister_for_announce_list(@email)
   end
 
 
@@ -176,15 +175,16 @@ def un_subscribe
   def deliver(action,job)
     begin
       job.deliver
-      flash[:success] = "You have #{action} successfully"
+      to_or_from = action.eql?("subscribe") ? "to" : "from"
+      flash[:success] = "You have successfully  #{action} #{to_or_from} our user mailing list: #{$ANNOUNCE_LIST}"
     rescue => exception
       flash[:error] = "Something went wrong ..."
     end
     redirect_to '/account'
   end
 
   def user_params
-    p = params.require(:user).permit(:firstName, :lastName, :username, :email, :email_confirmation, :password,
+    p = params.require(:user).permit(:firstName, :lastName, :username, :orcidId, :githubId, :email, :email_confirmation, :password,
                                      :password_confirmation, :register_mail_list, :admin)
     p.to_h
   end
@@ -214,9 +214,6 @@ def validate(params)
     if params[:email].nil? || params[:email].length < 1 || !params[:email].match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i)
       errors << "Please enter an email address"
     end
-    if !params[:email].eql?(params[:email_confirmation])
-      errors << "Your Email and Email Confirmation do not match"
-    end
     if params[:password].nil? || params[:password].length < 1
       errors << "Please enter a password"
     end

app/views/login/index.html.erb

@@ -31,4 +31,4 @@ Errors On Form
   <span style="font-size:1.2em;"><%=link_to "Lost Password", '/lost_pass'%></span><br><br>
 </center>
 
-<% end %>
+<% end %>

app/views/login/lost_password.html.erb

@@ -19,4 +19,4 @@
 </center>
 
 
-<%end%>
+<%end%>

app/views/users/_form.html.haml

@@ -1,38 +1,54 @@
-%table.form{:width => "70%"}
-  %tr
-    %th First Name:
-    %td.top= text_field :user, :firstName, value: @user.firstname
-  %tr
-    %th Last Name:
-    %td= text_field :user, :lastName, value: @user.lastname
-  %tr
-    %th Account Name:*
-    %td= text_field :user, :username, value: @user.username
-  %tr
-    %th Email Address:*
-    %td= text_field :user, :email, value: @user.email
-  %tr
-    %th Re-enter Email Address:*
-    %td= text_field :user, :email_confirmation, value: @user.email_confirmation
-  %tr
-    %th Password:*
-    %td= password_field :user, :password, :autocomplete => "off"
-  %tr
-    %th Re-enter Password:*
-    %td= password_field :user, :password_confirmation, :autocomplete => "off"
-  - if using_captcha?
-    %tr
-      %th
-      %td= recaptcha_tags
-  - unless $ANNOUNCE_LIST.nil? || $ANNOUNCE_LIST.empty?
-    %tr
-      %td{:colspan => "2", :style => "text-align: right;"}
-        %div{:style => "float: right; margin-left: 10px; position: relative; top: 5px;"}
-          %input#user_register_mail_list{:checked => "checked", :name => "user[register_mail_list]", :type => "checkbox", :value => "1"}/
-        %div{:style => "overflow: hidden; line-height: 12px;"}
-          %label{:for => "user_register_mail_list"}
-            Register for the #{$SITE} announcements email list
-            %br/
-            %span{:style => "font-size: x-small;"} (approximately two emails per month -- confirmation via email required)
-  %tr
-    %td{:colspan => "2", :style => "text-align: right;"}= submit_tag "Create"
+.d-flex.justify-content-center
+  .register-form
+    .d-flex.justify-content-between
+      %a{:href => "javascript:javascript:history.go(-1)"}
+        %svg.register-arrowback{:fill => "none", :height => "12", :viewbox => "0 0 15 12", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
+          %path{:d => "M5.64176 1L1 6L5.64176 11M14 6H1.13", :stroke => "black", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-miterlimit" => "10", "stroke-width" => "1.5"}
+      .register-title-container
+        %h2.register-title
+          Create new account
+        %hr#register-title-line/
+      %div
+    .register-double-input
+      .register-first-input
+        %p.register-input-title
+          First name
+          %font{:color => "red"} *
+        = text_field :user, :firstName, value: @user.firstname, class: "register-input-short"
+      %div
+        %p.register-input-title
+          Last name
+          %font{:color => "red"} *
+        = text_field :user, :lastName, value: @user.lastname, class: "register-input-short"
+    %p.register-input-title
+      Username
+      %font{:color => "red"} *
+    = text_field :user, :username, value: @user.username, class: "register-input-long"
+    %p.register-input-title
+      ORCIDE ID
+      %font.register-optional (optional)
+    %img.register-input-icon{:src => "#{asset_path("orcide.svg")}"}/
+    = number_field :user, :orcidId, value: @user.orcidId, class: "register-input-long register-input-with-icon"
+    %p.register-input-title
+      Github ID
+      %font.register-optional (optional)
+    %img.register-input-icon{:src => "#{asset_path("github-icon.svg")}"}/
+    = text_field :user, :githubId, value: @user.githubId, class: "register-input-long register-input-with-icon"
+    %p.register-input-title
+      Email
+      %font{:color => "red"} *
+    = text_field :user, :email, value: @user.email, class: "register-input-long"
+    %p.register-input-title
+      Password
+      %font{:color => "red"} *
+    = password_field :user, :password, class: "register-input-long"
+    %p.register-input-title
+      Confirm password
+      %font{:color => "red"} *
+    = password_field :user, :password_confirmation, class: "register-input-long"
+    - if using_captcha?
+      recaptcha_tags
+    .d-flex
+      %input#user_register_mail_list{:checked => "checked", :name => "user[register_mail_list]", :type => "checkbox", :value => "1"}/
+      %p#register-check-text Register for the AgroPortal's mailing list
+    %input.register-button{:type => "submit", :value => "Register"}/

app/views/users/new.html.haml

@@ -1,12 +1,9 @@
 - @title = "Register"
-%div{:style => "padding: 1em;"}
-  %h1
-    New #{$SITE} Account
-  = form_for(:user, :url => users_path) do |f|
-    - unless @errors.nil?
-      .enable-lists{:style => "color: red; padding: 1em;"}
-        Errors creating your account:
-        %ul
-          - for error in @errors
-            %li= error
-    = render :partial => 'form', :locals => {:f => f}
+= form_for(:user, :url => users_path) do |f|
+  - unless @errors.nil?
+    .enable-lists{:style => "color: red; padding: 1em;"}
+      Errors creating your account:
+      %ul
+        - for error in @errors
+          %li= error
+  = render :partial => 'form', :locals => {:f => f}