diff --git a/app/assets/javascripts/users/registrations/edit.js b/app/assets/javascripts/users/registrations/edit.js index 38969d9a3..c3216489c 100644 --- a/app/assets/javascripts/users/registrations/edit.js +++ b/app/assets/javascripts/users/registrations/edit.js @@ -102,5 +102,5 @@ $('#twoFactorAuthenticationModal').on('click', '.btn-next-step', function() { $('#twoFactorAuthenticationModal').find(`[href="${$(this).data('step')}"]`).tab('show'); - }) + }); }()); diff --git a/app/assets/stylesheets/settings/users.scss b/app/assets/stylesheets/settings/users.scss index 204355d72..010350d75 100644 --- a/app/assets/stylesheets/settings/users.scss +++ b/app/assets/stylesheets/settings/users.scss @@ -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; + } + } +} diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 56f9abf8e..e504f8d67 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -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%; } } } diff --git a/app/views/users/registrations/_2fa_modal.html.erb b/app/views/users/registrations/_2fa_modal.html.erb index ecbf62bba..16a161c56 100644 --- a/app/views/users/registrations/_2fa_modal.html.erb +++ b/app/views/users/registrations/_2fa_modal.html.erb @@ -4,18 +4,18 @@ <% if current_user.two_factor_auth_enabled? %>
-

Disable two-factor authentication

+

<%= t("users.registrations.edit.2fa_modal.disable.title") %>

<%= form_with(url: users_2fa_disable_path, method: "post", class: "2fa-disable-form") do %>
-

Enter your password bellow to confirm disableing 2FA. This will remove authentication, from your account and make you more vulnerable to potential attacks.

+

<%= t("users.registrations.edit.2fa_modal.disable.description") %>

- <%= 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" %>
- <%= 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" %>
<% end %> <% else %> diff --git a/app/views/users/registrations/_2fa_modal_apps_tab.html.erb b/app/views/users/registrations/_2fa_modal_apps_tab.html.erb index d9806b291..51abf2198 100644 --- a/app/views/users/registrations/_2fa_modal_apps_tab.html.erb +++ b/app/views/users/registrations/_2fa_modal_apps_tab.html.erb @@ -1,10 +1,10 @@
-

1. Install an Authenticator App on your mobile device

+

<%= t("users.registrations.edit.2fa_modal.step_1.title") %>

-

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.

+

<%= t("users.registrations.edit.2fa_modal.step_1.description") %>

@@ -12,15 +12,15 @@ <%= image_tag('2fa/google_authenticator.png', class: 'logo-image') %>
-

Google authenticator

+

<%= t("users.registrations.edit.2fa_modal.step_1.google_auth") %>

- + - Android + <%= t("users.registrations.edit.2fa_modal.step_1.android") %> - + - iOS + <%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
@@ -30,15 +30,15 @@ <%= image_tag('2fa/ms_authenticator.png', class: 'logo-image') %>
-

Microsoft authenticator

+

<%= t("users.registrations.edit.2fa_modal.step_1.microsoft_auth") %>

- + - Android + <%= t("users.registrations.edit.2fa_modal.step_1.android") %> - + - iOS + <%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
@@ -48,15 +48,15 @@ <%= image_tag('2fa/2fa_authenticator.png', class: 'logo-image') %>
-

2FA authenticator

+

<%= t("users.registrations.edit.2fa_modal.step_1.2fa_auth") %>

- + - Android + <%= t("users.registrations.edit.2fa_modal.step_1.android") %> - + - iOS + <%= t("users.registrations.edit.2fa_modal.step_1.ios") %>
@@ -66,6 +66,6 @@
-
Start
+
<%= t("users.registrations.edit.2fa_modal.step_1.start") %>
diff --git a/app/views/users/registrations/_2fa_modal_qr_code_tab.html.erb b/app/views/users/registrations/_2fa_modal_qr_code_tab.html.erb index 056e82108..d4f421c78 100644 --- a/app/views/users/registrations/_2fa_modal_qr_code_tab.html.erb +++ b/app/views/users/registrations/_2fa_modal_qr_code_tab.html.erb @@ -1,13 +1,13 @@
-

2. Scan the QR code with your app

+

<%= t("users.registrations.edit.2fa_modal.step_2.title") %>

-

Open your authenticator app and use it to scan this code to add 2FA.

+

<%= t("users.registrations.edit.2fa_modal.step_2.description") %>

-
Next
+
<%= t("users.registrations.edit.2fa_modal.step_2.next") %>
diff --git a/app/views/users/registrations/_2fa_modal_verify_code_tab.html.erb b/app/views/users/registrations/_2fa_modal_verify_code_tab.html.erb index 51799c6c2..75fea64b8 100644 --- a/app/views/users/registrations/_2fa_modal_verify_code_tab.html.erb +++ b/app/views/users/registrations/_2fa_modal_verify_code_tab.html.erb @@ -1,18 +1,18 @@
-

3. Enter the code given by your authenticator app

+

<%= t("users.registrations.edit.2fa_modal.step_3.title") %>

<%= form_with(url: users_2fa_enable_path, method: "post", class: "2fa-enable-form") do %>
-

Enter the generated code into the fields bellow to finalize the setup of the two-factor authorisation.

+

<%= t("users.registrations.edit.2fa_modal.step_3.description") %>

- <%= 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" %>

- <%= 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 %>
<% end %>
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb index 1357e68cc..e146d4fc1 100644 --- a/app/views/users/registrations/edit.html.erb +++ b/app/views/users/registrations/edit.html.erb @@ -2,70 +2,65 @@ <% provide(:container_class, "no-second-nav-container") %> <%= render partial: "users/settings/sidebar" %> -
-
-
-
-

<%=t "users.registrations.edit.title" %>

- - <% if not resource.errors.empty? %> -
- <%= devise_error_messages! %> -
- <% end %> -
-
- <%= render partial: 'users/registrations/edit_partials/avatar' %> -
-
-
-
- <%= render partial: 'users/registrations/edit_partials/full_name' %> - <%= render partial: 'users/registrations/edit_partials/initials' %> -
-
- <%= render partial: 'users/registrations/edit_partials/email' %> - <%= render partial: 'users/registrations/edit_partials/password' %> -
+ diff --git a/app/views/users/registrations/edit_partials/_2fa.html.erb b/app/views/users/registrations/edit_partials/_2fa.html.erb new file mode 100644 index 000000000..b9d9480e5 --- /dev/null +++ b/app/views/users/registrations/edit_partials/_2fa.html.erb @@ -0,0 +1,19 @@ +
+
+ <%= t("users.registrations.edit.2fa_title") %> + <% if current_user.two_factor_auth_enabled? %> + + + <%= t("users.registrations.edit.2fa_enabled") %> + + <% end %> +
+
+ <%= t("users.registrations.edit.2fa_description") %> +
+ <% if current_user.two_factor_auth_enabled? %> + + <% else %> + + <% end %> +
diff --git a/app/views/users/registrations/edit_partials/_email.html.erb b/app/views/users/registrations/edit_partials/_email.html.erb index 1267b30ff..50be8c942 100644 --- a/app/views/users/registrations/edit_partials/_email.html.erb +++ b/app/views/users/registrations/edit_partials/_email.html.erb @@ -6,11 +6,9 @@
<%= f.label t("users.registrations.edit.email_label") %> -
- - - <%=t "general.edit" %> - +
+ <%= @user.email %> + <%=t "general.edit" %>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>