scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-30 20:23:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add i18n and constants

Browse source
This commit is contained in:
aignatov-bio 2020-07-07 15:59:02 +02:00
parent 7a9a25e6a9
commit 88c092dc98
13 changed files with 241 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/users/registrations/edit.js
View file

@ -102,5 +102,5 @@
$('#twoFactorAuthenticationModal').on('click', '.btn-next-step', function() {
$('#twoFactorAuthenticationModal').find(`[href="${$(this).data('step')}"]`).tab('show');
})
});
}());

67
app/assets/stylesheets/settings/users.scss
View file

@ -1,11 +1,54 @@
@import "constants";
@import "mixins";
.user-settings-block {
display: block;
margin-bottom: 20px;
.user-settings {
.settings-row {
margin-top: 2em;
.user-attribute {
align-items: center;
display: flex;
.btn {
margin-left: auto;
}
}
}
.user-settings-block {
display: block;
margin-bottom: 20px;
}
.two-factor-container {
border: $border-default;
column-gap: 1em;
display: grid;
grid-template-columns: auto fit-content;
margin: 1em 0;
padding: 1em;
row-gap: .5em;
.title {
@include font-main;
flex-basis: 100%;
grid-column: 1 / span 2;
.enabled {
@include font-button;
color: $brand-success;
}
}
.btn {
align-self: end;
}
}
}
.two-factor-modal {
.two-factor-apps {
align-items: center;
@ -54,3 +97,21 @@
padding: 4em;
}
}
@media (max-width: 700px) {
.user-settings {
.two-factor-container {
grid-template-columns: auto;
.title {
grid-column: 1;
}
}
}
.two-factor-modal {
.install-mobile {
display: none;
}
}
}

17
app/assets/stylesheets/themes/scinote.scss
View file

@ -469,8 +469,10 @@ a[data-toggle="tooltip"] {
}
.user-statistics {
margin-top: 1em;
.list-inline {
margin-left: 15px;
margin-left: 0;
}
.label {
@ -479,10 +481,8 @@ a[data-toggle="tooltip"] {
li {
height: 100px;
margin: 15px;
padding-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 1em;
margin-right: 2em;
width: 100px;
}
}
@ -1318,10 +1318,9 @@ ul.content-activities {
.avatar-container {
background-color: lighten($color-concrete, 2%);
border-radius: 50%;
height: 100px;
margin-top: 5px;
height: 5em;
position: relative;
width: 100px;
width: 5em;
.avatar-edit {
background-color: $color-silver-chalice;
@ -1356,6 +1355,8 @@ ul.content-activities {
img {
border-radius: 50%;
height: 100%;
width: 100%;
}
}
}

8
app/views/users/registrations/_2fa_modal.html.erb
View file

@ -4,18 +4,18 @@
<% if current_user.two_factor_auth_enabled? %>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h2 class="modal-title">Disable two-factor authentication</h2>
<h2 class="modal-title"><%= t("users.registrations.edit.2fa_modal.disable.title") %></h2>
</div>
<%= form_with(url: users_2fa_disable_path, method: "post", class: "2fa-disable-form") do %>
<div class="modal-body">
<p>Enter your password bellow to confirm disableing 2FA. This will remove authentication, from your account and make you more vulnerable to potential attacks.</p>
<p><%= t("users.registrations.edit.2fa_modal.disable.description") %></p>
<div class="sci-input-container password-field">
<%= label_tag :password, t("users.registrations.edit.2fa_modal.password_label") %>
<%= label_tag :password, t("users.registrations.edit.2fa_modal.disable.password_label") %>
<%= password_field_tag :password, '', class: "sci-input-field" %>
</div>
</div>
<div class="modal-footer">
<%= button_tag 'Disable 2FA', type: 'submit', class: "btn btn-danger" %>
<%= button_tag t("users.registrations.edit.2fa_modal.disable.disable_2fa"), type: 'submit', class: "btn btn-danger" %>
</div>
<% end %>
<% else %>

36
app/views/users/registrations/_2fa_modal_apps_tab.html.erb
View file

@ -1,10 +1,10 @@
<div role="tabpanel" class="tab-pane active" id="2fa-step-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h2 class="modal-title">1. Install an Authenticator App on your mobile device</h2>
<h2 class="modal-title"><%= t("users.registrations.edit.2fa_modal.step_1.title") %></h2>
</div>
<div class="modal-body">
<p>Use your phone to download an authenticator app. It is needed to enable the 2FA in SciNote. Bellow you can see the most commonly used ones.</p>
<p><%= t("users.registrations.edit.2fa_modal.step_1.description") %></p>
<div class="two-factor-apps">
<div class="apps-list">
<div class="app">
@ -12,15 +12,15 @@
<%= image_tag('2fa/google_authenticator.png', class: 'logo-image') %>
</div>
<div class="app-information">
<p class="app-name">Google authenticator</p>
<p class="app-name"><%= t("users.registrations.edit.2fa_modal.step_1.google_auth") %></p>
<div class="app-store">
<a href="" class="store">
<a href="<%= Constants::TWO_FACTOR_URL[:google][:android] %>" class="store" target="_blank">
<i class="fab fa-android"></i>
Android
<%= t("users.registrations.edit.2fa_modal.step_1.android") %>
</a>
<a href="" class="store">
<a href="<%= Constants::TWO_FACTOR_URL[:google][:ios] %>" class="store" target="_blank">
<i class="fab fa-apple"></i>
iOS
<%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
</a>
</div>
</div>
@ -30,15 +30,15 @@
<%= image_tag('2fa/ms_authenticator.png', class: 'logo-image') %>
</div>
<div class="app-information">
<p class="app-name">Microsoft authenticator</p>
<p class="app-name"><%= t("users.registrations.edit.2fa_modal.step_1.microsoft_auth") %></p>
<div class="app-store">
<a href="" class="store">
<a href="<%= Constants::TWO_FACTOR_URL[:microsoft][:android] %>" class="store" target="_blank">
<i class="fab fa-android"></i>
Android
<%= t("users.registrations.edit.2fa_modal.step_1.android") %>
</a>
<a href="" class="store">
<a href="<%= Constants::TWO_FACTOR_URL[:microsoft][:ios] %>" class="store" target="_blank">
<i class="fab fa-apple"></i>
iOS
<%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
</a>
</div>
</div>
@ -48,15 +48,15 @@
<%= image_tag('2fa/2fa_authenticator.png', class: 'logo-image') %>
</div>
<div class="app-information">
<p class="app-name">2FA authenticator</p>
<p class="app-name"><%= t("users.registrations.edit.2fa_modal.step_1.2fa_auth") %></p>
<div class="app-store">
<a href="" class="store">
<a href="<%= Constants::TWO_FACTOR_URL[:two_fa][:android] %>" class="store" target="_blank">
<i class="fab fa-android"></i>
Android
<%= t("users.registrations.edit.2fa_modal.step_1.android") %>
</a>
<a href="" class="store">
<a href="<%= Constants::TWO_FACTOR_URL[:two_fa][:ios] %>" class="store" target="_blank">
<i class="fab fa-apple"></i>
iOS
<%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
</a>
</div>
</div>
@ -66,6 +66,6 @@
</div>
</div>
<div class="modal-footer">
<div class="btn btn-primary btn-next-step" data-step="#2fa-step-2">Start</div>
<div class="btn btn-primary btn-next-step" data-step="#2fa-step-2"><%= t("users.registrations.edit.2fa_modal.step_1.start") %></div>
</div>
</div>

6
app/views/users/registrations/_2fa_modal_qr_code_tab.html.erb
View file

@ -1,13 +1,13 @@
<div role="tabpanel" class="tab-pane" id="2fa-step-2">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h2 class="modal-title">2. Scan the QR code with your app</h2>
<h2 class="modal-title"><%= t("users.registrations.edit.2fa_modal.step_2.title") %></h2>
</div>
<div class="modal-body">
<p>Open your authenticator app and use it to scan this code to add 2FA.</p>
<p><%= t("users.registrations.edit.2fa_modal.step_2.description") %></p>
<div class="qr-code"></div>
</div>
<div class="modal-footer">
<div class="btn btn-primary btn-next-step" data-step="#2fa-step-3">Next</div>
<div class="btn btn-primary btn-next-step" data-step="#2fa-step-3"><%= t("users.registrations.edit.2fa_modal.step_2.next") %></div>
</div>
</div>

8
app/views/users/registrations/_2fa_modal_verify_code_tab.html.erb
View file

@ -1,18 +1,18 @@
<div role="tabpanel" class="tab-pane" id="2fa-step-3">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h2 class="modal-title">3. Enter the code given by your authenticator app</h2>
<h2 class="modal-title"><%= t("users.registrations.edit.2fa_modal.step_3.title") %></h2>
</div>
<%= form_with(url: users_2fa_enable_path, method: "post", class: "2fa-enable-form") do %>
<div class="modal-body">
<p>Enter the generated code into the fields bellow to finalize the setup of the two-factor authorisation.</p>
<p><%= t("users.registrations.edit.2fa_modal.step_3.description") %></p>
<p class="sci-input-container submit-code-field">
<%= label_tag :submit_code, t("users.registrations.edit.2fa_modal.submit_code_label") %>
<%= label_tag :submit_code, t("users.registrations.edit.2fa_modal.step_3.enter_code") %>
<%= text_field_tag :submit_code, '', class: "sci-input-field" %>
</p>
</div>
<div class="modal-footer">
<%= button_tag 'Verify', class: 'btn btn-primary', type: :submit %>
<%= button_tag t("users.registrations.edit.2fa_modal.step_3.verify"), class: 'btn btn-primary', type: :submit %>
</div>
<% end %>
</div>

115
app/views/users/registrations/edit.html.erb
View file

@ -2,70 +2,65 @@
<% provide(:container_class, "no-second-nav-container") %>
<%= render partial: "users/settings/sidebar" %>
<div class="tab-content">
<div class="tab-pane content-pane active" role="tabpanel">
<div class="row">
<div class="col-md-12">
<h1><%=t "users.registrations.edit.title" %></h1>
<% if not resource.errors.empty? %>
<div class="alert alert-danger">
<%= devise_error_messages! %>
</div>
<% end %>
<div class="row">
<div class="col-md-4 col-lg-2">
<%= render partial: 'users/registrations/edit_partials/avatar' %>
</div>
<div class="col-md-8 col-lg-10">
<div class="row">
<div class="col-md-6">
<%= render partial: 'users/registrations/edit_partials/full_name' %>
<%= render partial: 'users/registrations/edit_partials/initials' %>
</div>
<div class="col-md-6">
<%= render partial: 'users/registrations/edit_partials/email' %>
<%= render partial: 'users/registrations/edit_partials/password' %>
</div>
<div class="content-pane active flexible user-settings">
<div class="content-header">
<h1><%=t "users.registrations.edit.title" %></h1>
</div>
<div class="row settings-row">
<div class="col-md-12">
<% if not resource.errors.empty? %>
<div class="alert alert-danger">
<%= devise_error_messages! %>
</div>
<% end %>
<div class="row">
<div class="col-md-2 col-lg-1">
<%= render partial: 'users/registrations/edit_partials/avatar' %>
</div>
<div class="col-md-10 col-lg-11">
<div class="row">
<div class="col-md-6">
<%= render partial: 'users/registrations/edit_partials/full_name' %>
<%= render partial: 'users/registrations/edit_partials/initials' %>
</div>
<div class="col-md-6">
<%= render partial: 'users/registrations/edit_partials/email' %>
<%= render partial: 'users/registrations/edit_partials/password' %>
</div>
</div>
</div>
<% if current_user.two_factor_auth_enabled? %>
<button class="btn btn-danger" id="twoFactorAuthenticationDisable"><%= t("users.registrations.edit.2fa_button_disable") %></button>
<% else %>
<button class="btn btn-primary" id="twoFactorAuthenticationEnable" data-qr-code-url="<%= users_2fa_qr_code_path %>"><%= t("users.registrations.edit.2fa_button") %></button>
<% end %>
</div>
</div>
<!-- User statistics -->
<div class="row">
<div class="col-md-12">
<div class="row user-statistics">
<div class="col-md-12">
<h2 style="margin-top: 10px;"><%=t "users.statistics.title" %></h2>
<ul class="list-inline">
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_teams]%></h2>
<%= t("users.statistics.team").pluralize(@user.statistics[:number_of_teams]) %>
</li>
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_projects] %></h2>
<%= t("users.statistics.project").pluralize(@user.statistics[:number_of_projects]) %>
</li>
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_experiments] %></h2>
<%= t("users.statistics.experiment").pluralize(@user.statistics[:number_of_experiments]) %>
</li>
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_protocols] %></h2>
<%= t("users.statistics.protocol").pluralize(@user.statistics[:number_of_protocols]) %>
</li>
</ul>
</div>
</div>
<span style="display: none;" data-hook="profile-statistics"></span>
</div>
<%= render partial: 'users/registrations/edit_partials/2fa' %>
</div>
</div>
<!-- User statistics -->
<div class="row">
<div class="col-md-12">
<div class="row user-statistics">
<div class="col-md-12">
<h2><%=t "users.statistics.title" %></h2>
<ul class="list-inline">
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_teams]%></h2>
<%= t("users.statistics.team").pluralize(@user.statistics[:number_of_teams]) %>
</li>
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_projects] %></h2>
<%= t("users.statistics.project").pluralize(@user.statistics[:number_of_projects]) %>
</li>
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_experiments] %></h2>
<%= t("users.statistics.experiment").pluralize(@user.statistics[:number_of_experiments]) %>
</li>
<li class="label label-primary">
<h2><%= @user.statistics[:number_of_protocols] %></h2>
<%= t("users.statistics.protocol").pluralize(@user.statistics[:number_of_protocols]) %>
</li>
</ul>
</div>
</div>
<span style="display: none;" data-hook="profile-statistics"></span>
</div>
</div>
</div>

19
app/views/users/registrations/edit_partials/_2fa.html.erb Normal file
View file

@ -0,0 +1,19 @@
<div class="two-factor-container">
<div class="title">
<b><%= t("users.registrations.edit.2fa_title") %></b>
<% if current_user.two_factor_auth_enabled? %>
<span class="enabled">
<i class="fas fa-shield-alt"></i>
<%= t("users.registrations.edit.2fa_enabled") %>
</span>
<% end %>
</div>
<div class="description">
<%= t("users.registrations.edit.2fa_description") %>
</div>
<% if current_user.two_factor_auth_enabled? %>
<button class="btn btn-secondary" id="twoFactorAuthenticationDisable"><%= t("users.registrations.edit.2fa_button_disable") %></button>
<% else %>
<button class="btn btn-primary" id="twoFactorAuthenticationEnable" data-qr-code-url="<%= users_2fa_qr_code_path %>"><%= t("users.registrations.edit.2fa_button") %></button>
<% end %>
</div>

18
app/views/users/registrations/edit_partials/_email.html.erb
View file

@ -6,11 +6,9 @@
<div data-part="view">
<div class="form-group">
<%= f.label t("users.registrations.edit.email_label") %>
<div class="input-group">
<input data-role="src" class="form-control" disabled="disabled" type="text" value="<%= @user.email %>" name="fake_user[email]" id="fake_user_email">
<span class="input-group-btn">
<a href="#" class="btn btn-default" data-action="edit"><%=t "general.edit" %></a>
</span>
<div class="user-attribute">
<%= @user.email %>
<a href="#" class="btn btn-default" data-action="edit"><%=t "general.edit" %></a>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div class="alert alert-info" style="margin-top: 15px;" role="alert">
@ -23,16 +21,16 @@
<div data-part="edit" style="display: none;">
<div class="well">
<h4><%=t "users.registrations.edit.email_title" %></h4>
<div class="form-group">
<div class="form-group sci-input-container">
<%= f.label :email, t("users.registrations.edit.new_email_label") %>
<%= f.email_field :email, class: "form-control", "data-role" => "edit" %>
<%= f.email_field :email, class: "form-control sci-input-field", "data-role" => "edit" %>
</div>
<div class="form-group">
<div class="form-group sci-input-container">
<%= f.label :current_password, t("users.registrations.edit.current_password_label") %> <i><%=t "users.registrations.edit.password_explanation" %></i>
<%= f.password_field :current_password, autocomplete: "off", class: "form-control", "data-role" => "clear", id: 'edit-email-current-password' %>
<%= f.password_field :current_password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear", id: 'edit-email-current-password' %>
</div>
<div class="align-right">
<a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
<a href="#" class="btn btn-light" data-action="cancel"><%=t "general.cancel" %></a>
<%= f.submit t("general.save"), class: "btn btn-success" %>
</div>
</div>

22
app/views/users/registrations/edit_partials/_password.html.erb
View file

@ -7,34 +7,32 @@
<div data-part="view">
<div class="form-group">
<%= f.label t("users.registrations.edit.password_label") %>
<div class="input-group">
<input class="form-control" disabled="disabled" autocomplete="off" type="password" value="aaaaaaaaaa" name="fake_user[current_password]" id="fake_user_current_password">
<span class="input-group-btn">
<a href="#" class="btn btn-default" data-action="edit"><%=t "general.edit" %></a>
</span>
<div class="user-attribute">
••••••••••••
<a href="#" class="btn btn-default" data-action="edit"><%=t "general.edit" %></a>
</div>
</div>
</div>
<div data-part="edit" style="display: none;">
<div class="well">
<h4><%=t "users.registrations.edit.password_title" %></h4>
<div class="form-group">
<div class="form-group sci-input-container">
<%= f.label :current_password, t("users.registrations.edit.current_password_label") %> <i><%=t "users.registrations.edit.password_explanation" %></i>
<%= f.password_field :current_password, autocomplete: "off", class: "form-control", "data-role" => "clear", id: 'edit-password-current-password' %>
<%= f.password_field :current_password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear", id: 'edit-password-current-password' %>
</div>
<div class="form-group">
<div class="form-group sci-input-container">
<%= f.label :password, t("users.registrations.edit.new_password_label") %>
<%= f.password_field :password, autocomplete: "off", class: "form-control", "data-role" => "clear" %>
<%= f.password_field :password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %>
</div>
<div class="form-group">
<div class="form-group sci-input-container">
<%= f.label :password_confirmation, t("users.registrations.edit.new_password_2_label") %>
<%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control", "data-role" => "clear" %>
<%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %>
</div>
<div class="align-right">
<a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
<a href="#" class="btn btn-light" data-action="cancel"><%=t "general.cancel" %></a>
<%= f.submit t("general.save"), class: "btn btn-success" %>
</div>
</div>

15
config/initializers/constants.rb
View file

@ -205,6 +205,21 @@ class Constants
ACADEMY_BL_LINK = 'https://scinote.net/academy/?utm_source=SciNote%20software%20BL&utm_medium=SciNote%20software%20BL'.freeze
TWO_FACTOR_URL = {
google: {
android: 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2',
ios: 'https://apps.apple.com/us/app/google-authenticator/id388497605'
},
microsoft: {
android: 'https://play.google.com/store/apps/details?id=com.azure.authenticator',
ios: 'https://apps.apple.com/us/app/microsoft-authenticator/id983156458'
},
two_fa: {
android: 'https://play.google.com/store/apps/details?id=com.twofasapp',
ios: 'https://apps.apple.com/us/app/2fa-authenticator-2fas/id1217793794'
},
}
#=============================================================================
# Protocol importers
#=============================================================================

40
config/locales/en.yml
View file

@ -1629,7 +1629,7 @@ en:
head_title: "My profile"
title: "My profile"
avatar_label: "Profile photo"
avatar_btn: "Edit photo"
avatar_btn: "Edit"
avatar_modal:
title: 'Change your profile photo'
upload_button: 'Upload a photo'
@ -1648,16 +1648,38 @@ en:
password_title: "Change password"
new_password_label: "New password"
new_password_2_label: "New password confirmation"
2fa_button: "Enable two-factor authentication"
2fa_button_disable: "Disable two-factor authentication"
2fa_title: "Two-factor authentication"
2fa_description: "Two-factor authentication (2FA) is a way of verifying a user’s identity by using a combination of two different verification methods. It adds an extra layer of security to your account and protects from potential remote attacs or other threats."
2fa_enabled: "Enabled"
2fa_button: "Enable authentication"
2fa_button_disable: "Disable authentication"
2fa_modal:
title: 'Two-factor authentication'
password_label: 'Password'
submit_code_label: 'Submit code'
submit_button: 'Submit'
step_1:
title: "1. Install an Authenticator App on your mobile device"
description: "Use your phone to download an authenticator app. It is needed to enable the 2FA in SciNote. Bellow you can see the most commonly used ones."
google_auth: "Google authenticator"
microsoft_auth: "Microsoft authenticator"
2fa_auth: "2FA authenticator"
android: "Android"
ios: "iOS"
start: "Start"
step_2:
title: "2. Scan the QR code with your app"
description: "Open your authenticator app and use it to scan this code to add 2FA."
next: "Next"
step_3:
title: "3. Enter the code given by your authenticator app"
description: "Enter the generated code into the fields bellow to finalize the setup of the two-factor authorisation."
enter_code: "Enter authenticator code"
verify: "Verify"
disable:
title: "Disable two-factor authentication"
description: "Enter your password bellow to confirm disableing 2FA. This will remove authentication, from your account and make you more vulnerable to potential attacks."
password_label: "Enter password"
disable_2fa: "Disable 2FA"
2fa_errors:
wrong_submit_code: 'Not correct code'
wrong_password: 'Not correct password'
wrong_submit_code: "Not correct code"
wrong_password: "Not correct password"
new:
head_title: "Sign up"
team_name_label: "Team name"