Feature: Update lost password page design (#143)

* update login page design

* update the design of lost password page

* update sucess message for password reset

* Update index.html.erb

* Delete login.scss

* Update index.html.erb

* upload arrow-back.svg

* Update lostpassword.scss

* Extract the svg to a file, and convert the file from .erb to .haml

* Use the message card component

* replace fixed colors by variables

* Update lostpassword.scss

* Update lost_password_success.html.haml

* Update lost_password_success.html.haml

* Update lost_password_success.html.haml

---------

Co-authored-by: Syphax Bouazzouni <gs_bouazzouni@esi.dz>

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

@@ -43,6 +43,7 @@
 @import "instances_table";
 @import "file_uploader";
 @import "browse";
+@import "lostpassword";
 @import "flatpickr/dist/themes/light";
 @import "login";
 

app/assets/stylesheets/lostpassword.scss

@@ -0,0 +1,69 @@
+.lost-password-form{
+    margin-top: 30px;
+    padding: 37px 41px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 50px;
+    border-radius: 14px;
+}
+.lost-password-arrowback{
+    all: none;
+}
+.lost-password-title{
+    font-size: 18px;
+    text-align: center;
+    font-weight: 700;
+}
+#lost-password-title-line{
+    width: 128px ;
+    margin: auto !important ;
+    margin-bottom: 14px !important ;
+    margin-top: 3px !important ;
+    border: 1px solid var(--primary-color) !important ;
+    border-radius: 5px ;
+}
+.lost-password-description{
+    color: #666666;
+    font-size: 12.5px;
+    margin-bottom: 14px;
+    width: 357px;
+}
+.lost-password-input{
+    box-sizing: border-box;
+    outline: none;
+    padding: 21px;
+    font-size: 16px;
+    border: 1px solid #BDBDBD;
+    border-radius: 9px;
+    width: 357px;
+
+}
+.lost-password-input:focus{
+    border: 1px solid var(--primary-color);
+}
+.lost-password-input::placeholder{
+    font-weight: 300;
+    color: #C1C1C1;
+}
+
+.lost-password-input-title{
+    font-size: 13px;
+    margin-bottom: 5px;
+    font-weight: 600;
+    color: #666666;
+}
+.lost-password-button{
+    margin-top: 20px;
+   width: 357px;
+   font-size: 16px;
+   color: white;
+   padding: 21px;
+   background-color: var(--primary-color);
+   border: none;
+   border-radius: 9px;
+   margin-bottom: 20px;
+   display: block;
+}
+.lost-password-button:hover{
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+

app/controllers/login_controller.rb

@@ -75,14 +75,18 @@ def destroy
   def lost_password
   end
 
+  def lost_password_success
+  end
+
+
   # Sends a new password to the user
   def send_pass
     username = params[:user][:account_name]
     email = params[:user][:email]
     resp = LinkedData::Client::HTTP.post("/users/create_reset_password_token", {username: username, email: email})
 
     if resp.nil?
-      redirect_to login_index_path, notice: "Please check your email for a message with reset instructions"
+      redirect_to "/lost_pass_success"
     else
       flash[:notice] = resp.errors.first + ". Please try again."
       redirect_to "/lost_pass"

app/views/login/lost_password.html.haml

@@ -0,0 +1,15 @@
+= form_for(:user , :url=>{:controller=>'login',:action=>'send_pass'}) do
+  .d-flex.justify-content-center.m-4
+    .lost-password-form
+      .d-flex.justify-content-between
+        %a{:href => "javascript:javascript:history.go(-1)"}
+          %img.lost-password-arrowback{:src => "#{asset_path("arrow-back.svg")}"}/
+        .lost-password-title-container
+          %h2.lost-password-title
+            Recover password
+          %hr#lost-password-title-line/
+        %div
+      %p.lost-password-description Enter the email associated with your account and we will send an email with instructions to reset your password
+      %p.lost-password-input-title Email
+      = text_field 'user', :email,class: "lost-password-input", placeholder: "Enter the email"
+      %input.lost-password-button{:type => "submit", :value => "Send instructions"}/

app/views/login/lost_password_success.html.haml

@@ -0,0 +1 @@
+= render(CardMessageComponent.new(title:"no-title" ,message: "A password reset email has been sent to your email, please follow the instructions in the email to reset your password.", button_text: "Back home", type:"success"))

config/routes.rb

@@ -145,6 +145,7 @@
   # User
   get '/logout' => 'login#destroy', :as => :logout
   get '/lost_pass' => 'login#lost_password'
+  get '/lost_pass_success' => 'login#lost_password_success'
   get '/reset_password' => 'login#reset_password'
   post '/accounts/:id/custom_ontologies' => 'users#custom_ontologies', :as => :custom_ontologies
   get '/login_as/:login_as' => 'login#login_as' , constraints: { login_as:  /[\d\w\.\-\%\+ ]+/ }