mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-27 18:52:07 +08:00
Add 2fa wizzard tabs
This commit is contained in:
aignatov-bio
parent
be3a1994f8
commit
7a9a25e6a9
12 changed files with 223 additions and 0 deletions
BIN
app/assets/images/2fa/2fa_authenticator.png
Normal file
BIN
app/assets/images/2fa/2fa_authenticator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
app/assets/images/2fa/google_authenticator.png
Normal file
BIN
app/assets/images/2fa/google_authenticator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
app/assets/images/2fa/install_mobile.png
Normal file
BIN
app/assets/images/2fa/install_mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
app/assets/images/2fa/ms_authenticator.png
Normal file
BIN
app/assets/images/2fa/ms_authenticator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
71
app/views/users/registrations/_2fa_modal_apps_tab.html.erb
Normal file
71
app/views/users/registrations/_2fa_modal_apps_tab.html.erb
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<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">×</span></button>
|
||||||
|
<h2 class="modal-title">1. Install an Authenticator App on your mobile device</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>
|
||||||
|
<div class="two-factor-apps">
|
||||||
|
<div class="apps-list">
|
||||||
|
<div class="app">
|
||||||
|
<div class="app-logo">
|
||||||
|
<%= image_tag('2fa/google_authenticator.png', class: 'logo-image') %>
|
||||||
|
</div>
|
||||||
|
<div class="app-information">
|
||||||
|
<p class="app-name">Google authenticator</p>
|
||||||
|
<div class="app-store">
|
||||||
|
<a href="" class="store">
|
||||||
|
<i class="fab fa-android"></i>
|
||||||
|
Android
|
||||||
|
</a>
|
||||||
|
<a href="" class="store">
|
||||||
|
<i class="fab fa-apple"></i>
|
||||||
|
iOS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app">
|
||||||
|
<div class="app-logo">
|
||||||
|
<%= image_tag('2fa/ms_authenticator.png', class: 'logo-image') %>
|
||||||
|
</div>
|
||||||
|
<div class="app-information">
|
||||||
|
<p class="app-name">Microsoft authenticator</p>
|
||||||
|
<div class="app-store">
|
||||||
|
<a href="" class="store">
|
||||||
|
<i class="fab fa-android"></i>
|
||||||
|
Android
|
||||||
|
</a>
|
||||||
|
<a href="" class="store">
|
||||||
|
<i class="fab fa-apple"></i>
|
||||||
|
iOS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app">
|
||||||
|
<div class="app-logo">
|
||||||
|
<%= image_tag('2fa/2fa_authenticator.png', class: 'logo-image') %>
|
||||||
|
</div>
|
||||||
|
<div class="app-information">
|
||||||
|
<p class="app-name">2FA authenticator</p>
|
||||||
|
<div class="app-store">
|
||||||
|
<a href="" class="store">
|
||||||
|
<i class="fab fa-android"></i>
|
||||||
|
Android
|
||||||
|
</a>
|
||||||
|
<a href="" class="store">
|
||||||
|
<i class="fab fa-apple"></i>
|
||||||
|
iOS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<%= image_tag('2fa/install_mobile.png', class: 'install-mobile') %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<div class="btn btn-primary btn-next-step" data-step="#2fa-step-2">Start</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +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">×</span></button>
|
||||||
|
<h2 class="modal-title">2. Scan the QR code with your app</h2>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Open your authenticator app and use it to scan this code to add 2FA.</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>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +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">×</span></button>
|
||||||
|
<h2 class="modal-title">3. Enter the code given by your authenticator app</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 class="sci-input-container submit-code-field">
|
||||||
|
<%= label_tag :submit_code, t("users.registrations.edit.2fa_modal.submit_code_label") %>
|
||||||
|
<%= text_field_tag :submit_code, '', class: "sci-input-field" %>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<%= button_tag 'Verify', class: 'btn btn-primary', type: :submit %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
15
app/views/users/registrations/edit_partials/_avatar.html.erb
Normal file
15
app/views/users/registrations/edit_partials/_avatar.html.erb
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div data-part="view">
|
||||||
|
<div class="form-group user-settings-edit-avatar">
|
||||||
|
<% @user_avatar_url ||= avatar_path(current_user, :thumb) %>
|
||||||
|
<div class="avatar-container">
|
||||||
|
<div class="avatar-image">
|
||||||
|
<%= image_tag @user_avatar_url %>
|
||||||
|
</div>
|
||||||
|
<div class="avatar-edit"></div>
|
||||||
|
<div class="avatar-edit-text">
|
||||||
|
<span class="fas fa-pencil-alt"></span>
|
||||||
|
<span><%=t "users.registrations.edit.avatar_btn" %></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
40
app/views/users/registrations/edit_partials/_email.html.erb
Normal file
40
app/views/users/registrations/edit_partials/_email.html.erb
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<%= form_for(resource,
|
||||||
|
as: resource_name,
|
||||||
|
url: registration_path(resource_name, format: :json),
|
||||||
|
remote: true,
|
||||||
|
html: { method: :put, "data-for" => "email", class: 'settings-page-email', id: 'user-email-field' }) do |f| %>
|
||||||
|
<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>
|
||||||
|
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
||||||
|
<div class="alert alert-info" style="margin-top: 15px;" role="alert">
|
||||||
|
<span class="fas fa-info-circle" aria-hidden="true"></span>
|
||||||
|
<%=t "users.registrations.edit.waiting_for_confirm", email: resource.unconfirmed_email %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-part="edit" style="display: none;">
|
||||||
|
<div class="well">
|
||||||
|
<h4><%=t "users.registrations.edit.email_title" %></h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<%= f.label :email, t("users.registrations.edit.new_email_label") %>
|
||||||
|
<%= f.email_field :email, class: "form-control", "data-role" => "edit" %>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<%= 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' %>
|
||||||
|
</div>
|
||||||
|
<div class="align-right">
|
||||||
|
<a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
|
||||||
|
<%= f.submit t("general.save"), class: "btn btn-success" %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<span class="settings-page-full-name user-settings-block">
|
||||||
|
<label><%= t("users.registrations.edit.name_label") %></label>
|
||||||
|
<%= render partial: "shared/inline_editing",
|
||||||
|
locals: {
|
||||||
|
initial_value: @user.full_name,
|
||||||
|
config: {
|
||||||
|
params_group: 'user',
|
||||||
|
field_to_udpate: 'full_name',
|
||||||
|
path_to_update: registration_path(resource_name, format: :json)
|
||||||
|
}
|
||||||
|
} %>
|
||||||
|
</span>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<span class="settings-page-initials user-settings-block">
|
||||||
|
<label><%= t("users.registrations.edit.initials_label") %></label>
|
||||||
|
<%= render partial: "shared/inline_editing",
|
||||||
|
locals: {
|
||||||
|
initial_value: @user.initials,
|
||||||
|
config: {
|
||||||
|
params_group: 'user',
|
||||||
|
field_to_udpate: 'initials',
|
||||||
|
path_to_update: registration_path(resource_name, format: :json)
|
||||||
|
}
|
||||||
|
} %>
|
||||||
|
</span>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<%= form_for(resource,
|
||||||
|
as: resource_name,
|
||||||
|
url: registration_path(resource_name, format: :json),
|
||||||
|
remote: true,
|
||||||
|
html: { method: :put, "data-for" => "password", class: 'settings-page-change-password', id: 'user-password-field' }) do |f| %>
|
||||||
|
<%= hidden_field_tag "user[change_password]", "true" %>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-part="edit" style="display: none;">
|
||||||
|
<div class="well">
|
||||||
|
<h4><%=t "users.registrations.edit.password_title" %></h4>
|
||||||
|
<div class="form-group">
|
||||||
|
<%= 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' %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<%= f.label :password, t("users.registrations.edit.new_password_label") %>
|
||||||
|
<%= f.password_field :password, autocomplete: "off", class: "form-control", "data-role" => "clear" %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<%= 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" %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="align-right">
|
||||||
|
<a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
|
||||||
|
<%= f.submit t("general.save"), class: "btn btn-success" %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
Loading…
Reference in a new issue