Feature: Update login page design (#142)

* add new login style

* import the new login style

* update login template

* put colors variables in one globale file

* convert login file from .erb to .haml

* Remove the replaceable classes by bootstrap classes & use css variables instead of fixed values

* import variables file

* Update application.css.scss.erb

* Update application.css.scss.erb

* Update application.css.scss.erb

* Update and rename variables_stage.scss to variables.scss.erb

* Update bioportal.scss

* Update login.scss

* Rename variables.scss.erb to theme-variables.scss.erb

* Update application.css.scss.erb

---------

Co-authored-by: Syphax Bouazzouni <[email protected]>

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

@@ -20,7 +20,7 @@
  *= require thickbox
  *= require select2
  *= require trumbowyg
- *
+ *= require theme-variables
  */
 
 /* BioPortal */
@@ -44,6 +44,7 @@
 @import "file_uploader";
 @import "browse";
 @import "flatpickr/dist/themes/light";
+@import "login";
 
 /* Bootstrap and Font Awesome */
 @import "bootstrap";

app/assets/stylesheets/bioportal.scss

@@ -1,3 +1,8 @@
+*{
+  font-family: poppins;
+  margin: 0;
+  padding: 0;
+}
 .alignright {
   float:right;
 }
@@ -49,7 +54,7 @@
 #bd {
   background: #fff;
 }
-#bd hr {
+#bd > hr {
   border:0;
   height:1px;
   color:#e9eaeb;
@@ -511,6 +516,27 @@ li.ac_over > .obsolete_class {
   cursor: inherit;  /*override the help cursor for selection menus*/
 }
 
+.concept_details p {
+  margin-bottom: .5em;
+}
+
+.concept_details .label {
+  vertical-align: top;
+  width: 180px;
+  max-width: 200px;
+}
+
+.concept_details tbody td {
+  padding: 0.6em 0.8em 0 !important;
+  white-space: normal; /* css-3 */
+  white-space: -moz-normal; /* Mozilla, since 1999 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
+.concept_details td:nth-child(1) {
+  white-space: nowrap;
+}
+
 #format_specific_options td {
   border-top: 1px solid #C1DAD7;
 }

app/assets/stylesheets/login.scss

@@ -0,0 +1,64 @@
+.login-form{
+    margin-top: 30px;
+    padding: 37px 41px;
+    box-shadow: rgba(0, 0, 0, 0.08) 0px 20px 50px;
+    border-radius: 14px;
+}
+
+.login-input{
+    box-sizing: border-box;
+    outline: none;
+    padding: 19px;
+    font-size: 16px;
+    border: 1px solid #BDBDBD;
+    border-radius: 9px;
+    width: 357px;
+}
+
+.login-input:focus{
+    border: 1px solid var(--primary-color);
+}
+.login-input::placeholder{
+    font-weight: 300;
+    color: #C1C1C1;
+}
+
+.login-input-title{
+    font-size: 13px;
+    margin-bottom: 5px;
+    font-weight: 600;
+    color: #666666;
+}
+.email-input{
+    margin-bottom: 20px;
+}
+.password-input{
+    margin-bottom: 8px;
+}
+.login-forgot-password{
+    font-weight: 500 ;
+    text-align: end;
+    text-decoration:none;
+    font-size: 13px;
+}
+.login-button{
+    margin-top: 10px;
+   width: 357px;
+   font-size: 16px;
+   color: white;
+   padding: 17px;
+   background-color: var(--primary-color);
+   border: none;
+   border-radius: 9px;
+   margin-bottom: 20px;
+}
+.login-button:hover{
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+
+.dont-have-account{
+    font-size: 15px;
+    font-weight: 600;
+    text-align: center;
+}

app/assets/stylesheets/theme-variables.scss.erb

@@ -0,0 +1,30 @@
+<%# This file contains all the color themes of ontoportal alliance%>
+<% if (ui_theme = $UI_THEME.to_s.parameterize).present? && File.exists?(Rails.root.join('app', 'assets', 'stylesheets', 'themes', ui_theme)) 
+    case ui_theme
+    when "agroportal" %>
+        :root{
+            --primary-color: #31B404;
+            --hover-color: #40C811;
+            --secondary-color: #ffc107;
+        }
+    <% when "stageportal" %>
+        :root{
+            --primary-color: #76A7CC;
+            --hover-color: #6B96B7;
+            --secondary-color: #ffc107;
+        }
+    <% when "bioportal" %>
+        :root{
+            --primary-color: #76A7CC;
+            --hover-color: #31B404;
+            --secondary-color: #ffc107;
+        }
+    <% when "ontoportal" %>
+        :root{
+            --primary-color: #6E98A2;
+            --hover-color: #7BABB6;
+            --secondary-color: #ffc107;
+        }
+    <%# Here to add a new theme ... %>
+    <% end %>
+<% end %>

app/views/login/index.html.haml

@@ -0,0 +1,20 @@
+- @title = "Login"
+= form_for(:user, :url => {:controller => 'login',:action=>'create'}) do |f|
+  - unless @errors.nil?
+    %div{:style => "color:red;"}
+      Errors On Form
+      %ul
+        - for error in @errors
+          %li= error
+  .d-flex.justify-content-center
+    .login-form
+      %p.login-input-title Username or Email
+      = text_field 'user', 'username', class: "login-input email-input", placeholder: "Enter your password"
+      %p.login-input-title Password
+      = password_field 'user','password', :autocomplete => "off", class: "login-input password-input", placeholder: "Enter your password"
+      %a.login-forgot-password{:href => "/lost_pass"}
+        %p Forgot password?
+      %input.login-button{"data-disable-with" => "Login", :name => "commit", :type => "submit", :value => "Login"}/
+      %p.dont-have-account
+        Don't have an account?
+        %a.text-decoration-none{:href => new_user_path} Register