From 03153655dc68da68faf69b8f8ed2aeb19ac67fb2 Mon Sep 17 00:00:00 2001 From: Bilelkihal <61744974+Bilelkihal@users.noreply.github.com> Date: Wed, 4 Jan 2023 15:36:28 +0100 Subject: [PATCH 01/15] update login page design --- .../stylesheets/application.css.scss.erb | 2 + app/assets/stylesheets/bioportal.scss | 2 +- app/assets/stylesheets/login.scss | 83 +++++++++++++++++++ app/views/login/index.html.erb | 32 ++++--- 4 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 app/assets/stylesheets/login.scss diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb index b07f9c9173..5727552d17 100644 --- a/app/assets/stylesheets/application.css.scss.erb +++ b/app/assets/stylesheets/application.css.scss.erb @@ -42,6 +42,8 @@ @import "instances_table"; @import "file_uploader"; @import "browse"; +@import "login"; +@import "lostpassword"; /* Bootstrap and Font Awesome */ @import "bootstrap"; diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss index c9075406a0..3ccb941b11 100644 --- a/app/assets/stylesheets/bioportal.scss +++ b/app/assets/stylesheets/bioportal.scss @@ -49,7 +49,7 @@ #bd { background: #fff; } -#bd hr { +#bd > hr { border:0; height:1px; color:#e9eaeb; diff --git a/app/assets/stylesheets/login.scss b/app/assets/stylesheets/login.scss new file mode 100644 index 0000000000..7769617b1e --- /dev/null +++ b/app/assets/stylesheets/login.scss @@ -0,0 +1,83 @@ +*{ + font-family: poppins; + margin: 0; + padding: 0; +} +.login-page-container{ + display: flex; + justify-content: center; +} + +.login-form{ + margin-top: 30px; + padding-top: 37px; + padding-bottom: 37px; + padding-left: 41px; + padding-right: 41px; + box-shadow: rgba(0, 0, 0, 0.08) 0px 20px 50px; + border-radius: 14px; +} + +.login-input{ + box-sizing: border-box; + outline: none; + padding: 21px; + font-size: 16px; + border: 1px solid #BDBDBD; + border-radius: 9px; + width: 357px; + +} + +.login-input:focus{ + border: 1px solid #76A7CC; +} +.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: #76A7CC; + border: none; + border-radius: 9px; + margin-bottom: 20px; +} +.login-button:hover{ + background-color: #6B96B7; + cursor: pointer; +} + +.dont-have-account{ + font-size: 15px; + font-weight: 600; + text-align: center; +} +.login-register-button{ + text-decoration: none; + +} \ No newline at end of file diff --git a/app/views/login/index.html.erb b/app/views/login/index.html.erb index 08110c66a8..c435bab795 100644 --- a/app/views/login/index.html.erb +++ b/app/views/login/index.html.erb @@ -13,22 +13,18 @@ Errors On Form <%end%> -
Account Name: | -<%= text_field 'user', 'username', :size => 25 %> | -
---|---|
Password: | -<%= password_field 'user','password', :size => 25, :autocomplete => "off" %> | -
<%= submit_tag "Login"%> | -
Username or Email
+ <%= text_field 'user', 'username', class: "login-input email-input", placeholder: "Enter your password" %> +Password
+ <%= password_field 'user','password', :autocomplete => "off", class: "login-input password-input", placeholder: "Enter your password" %> +Forgot password?
+ +Don't have an account? Register
+Enter the email associated with your account and we will send an email with instructions to reset your password
+Email: * | <%=text_field 'user', :email%> | -
---|---|
Account Name: * | <%=text_field 'user', :account_name%> | -
- <%=submit_tag "Email Password Reset Instructions"%> - | -
+ A password reset email has been sent to your email, please follow the instructions in the email to reset your password. +
+ + back home + + +Username or Email
- <%= text_field 'user', 'username', class: "login-input email-input", placeholder: "Enter your password" %> -Password
- <%= password_field 'user','password', :autocomplete => "off", class: "login-input password-input", placeholder: "Enter your password" %> -Forgot password?
- -Don't have an account? Register
-Account Name: | +<%= text_field 'user', 'username', :size => 25 %> | +
---|---|
Password: | +<%= password_field 'user','password', :size => 25, :autocomplete => "off" %> | +
<%= submit_tag "Login"%> | +
Enter the email associated with your account and we will send an email with instructions to reset your password
-- A password reset email has been sent to your email, please follow the instructions in the email to reset your password. -
- - back home - - -