OAuth and Confirmation Box re-style
closes: CNVS-20724 This commit brings the new login styles to Canvas' many login confirmation screens. QA: Please note that this commit does not touch the User Terms page or the OAuth2 request permissions page. Those will be addressed in subsequent tickets. Test Plan: There are a lot of pages to this, and Chart has documented the things that we know and are aware of that these changes touch here: https://docs.google.com/document/d/1csN1YJOm9zcl-bzUaA5yT3deUWlENleTyYuN8_VGhFE/ - See document - Go through the document, and make sure all the pages work as advertised :) Change-Id: I2b9d85643a01e436613e22761a71286b3bcc07a0 Reviewed-on: https://gerrit.instructure.com/61561 Reviewed-by: Jennifer Stern <jstern@instructure.com> Product-Review: Jennifer Stern <jstern@instructure.com> Tested-by: Jenkins QA-Review: Myller de Araujo <myller@instructure.com>
This commit is contained in:
Chris Hart
parent
7c39e14fb1
commit
25a739b96f
|
|
@ -1,9 +1,12 @@
|
|||
@import "base/environment";
|
||||
@import "pages/login/registration_dialog.scss";
|
||||
@import "pages/login/login_legacy.scss";
|
||||
@import "pages/login/ic-login-sso.scss";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// If new UI, then import the new UI login styles/vars
|
||||
@if $use_new_styles {
|
||||
@import "pages/login/ic-login.scss";
|
||||
}
|
||||
// If legacy UI, then load the existing styles for the confirmation/disambiguation box
|
||||
@else {
|
||||
@import "pages/login/login_legacy.scss";
|
||||
}
|
||||
|
|
@ -1,6 +1,11 @@
|
|||
@import "base/environment";
|
||||
@import "pages/login/registration_dialog.scss";
|
||||
@import "pages/login/login_legacy.scss";
|
||||
@if $use_new_styles {
|
||||
@import "pages/login/ic-login.scss";
|
||||
}
|
||||
@else {
|
||||
@import "pages/login/login_legacy.scss";
|
||||
}
|
||||
@import "vendor/bootstrap/responsive-767px-max";
|
||||
@import "pages/login/login_otp";
|
||||
@import "pages/login/ic-login-sso.scss";
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
$ic-Login-border-radius: 5px;
|
||||
$modal_box_width: 623px;
|
||||
$modal_box_padding: 20px;
|
||||
$ic-Login-confirmation-bgd: #34444f;
|
||||
|
||||
////////////////////////////////////////
|
||||
// New Login Styles
|
||||
|
|
@ -259,3 +260,49 @@ body.ic-Login-Body #footer.ic-Login-footer {
|
|||
}
|
||||
}
|
||||
|
||||
.ic-Login-confirmation__headline {
|
||||
margin: 0 0 $ic-sp;
|
||||
}
|
||||
|
||||
.ic-Login-confirmation__actions {
|
||||
margin-top: $ic-sp*2;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
////
|
||||
// Styles specific to the confirmation box, using new UI variables
|
||||
////
|
||||
body.body--login-confirmation {
|
||||
background: darken($ic-Login-confirmation-bgd, 3%);
|
||||
}
|
||||
|
||||
.ic-Login-confirmation {
|
||||
box-sizing: border-box;
|
||||
border-radius: $baseBorderRadius;
|
||||
font-size: $baseFontSize;
|
||||
box-shadow: 0 1px 4px 1px rgba(black, 0.4);
|
||||
width: 400px;
|
||||
margin: $ic-sp*3 auto 0;
|
||||
width: 696px;
|
||||
@include breakpoint(short) {
|
||||
margin-top: $ic-sp;
|
||||
}
|
||||
}
|
||||
|
||||
.ic-Login-confirmation__header {
|
||||
background: $ic-Login-confirmation-bgd;
|
||||
border-top-left-radius: $baseBorderRadius;
|
||||
border-top-right-radius: $baseBorderRadius;
|
||||
padding: $ic-sp*1.5;
|
||||
}
|
||||
|
||||
.ic-Login-confirmation__logo {
|
||||
width: 140px; height: 57px;
|
||||
}
|
||||
|
||||
.ic-Login-confirmation__content {
|
||||
padding: $ic-sp*2;
|
||||
background: $ic-color-light;
|
||||
border-bottom-left-radius: $baseBorderRadius;
|
||||
border-bottom-right-radius: $baseBorderRadius;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,21 @@
|
|||
css_bundle :login_confirm
|
||||
js_bundle :registration_confirmation
|
||||
@headers = false
|
||||
@body_classes << "modal"
|
||||
@body_classes << "modal body--login-confirmation"
|
||||
content_for :page_title, t(:page_title, "Register %{email}", :email => @communication_channel.path)
|
||||
%>
|
||||
|
||||
<div id="modal-box">
|
||||
<h2><%= t 'titles.welcome_aboard', "Welcome Aboard!" %></h2>
|
||||
<div id="modal-box"<% if use_new_styles? %> class="ic-Login-confirmation"<% end %>>
|
||||
<% if use_new_styles? %>
|
||||
<header class="ic-Login-confirmation__header">
|
||||
<%= image_tag("login/canvas-logo@2x.png", class:"ic-Login-confirmation__logo", alt:"Canvas by Instructure") %>
|
||||
</header>
|
||||
<div class="ic-Login-confirmation__content">
|
||||
<% end %>
|
||||
<h2<% if use_new_styles? %> class="ic-Login-confirmation__headline"<% end %>><%= t 'titles.welcome_aboard', "Welcome Aboard!" %></h2>
|
||||
<% if @current_user && @current_user != @user && @user.registered? && @enrollment %>
|
||||
<p><%= mt 'details.wrong_account', "The invitation for %{course} was sent to **%{invited_user}**, but you are currently logged in as **%{current_user}**", :course => @course.name, :invited_user => @user.name, :current_user => @current_user.name %></p>
|
||||
<div class="button_box">
|
||||
<div class="button_box<% if use_new_styles? %> ic-Login-confirmation__actions<% end %>">
|
||||
<a href="<%= registration_confirmation_path(@nonce, :enrollment => @enrollment.uuid, :transfer_enrollment => 1) %>" class="btn" id='transfer'><%= t 'buttons.transfer_enrollment', "Transfer Enrollment" %></a>
|
||||
<a href="<%= login_url(:enrollment => @enrollment.uuid, :pseudonym_session => { :unique_id => @user.pseudonym.try(:unique_id) }, :expected_user_id => @user.id) %>" class="btn" id="login"><%= t 'buttons.login_as', "Log in as %{invited_user}", :invited_user => @user.name %></a>
|
||||
</div>
|
||||
|
|
@ -26,7 +32,7 @@
|
|||
**Are you %{name}?**", :email => @communication_channel.path, :name => friendly_name(@merge_opportunities.first.last.first, @merge_opportunities) %>
|
||||
<% end %></p>
|
||||
</div>
|
||||
<div class="button_box">
|
||||
<div class="button_box<% if use_new_styles? %> ic-Login-confirmation__actions<% end %>">
|
||||
<% if @pseudonym %><a href="#" class="btn" id="register"><%= t 'buttons.no', 'No' %></a><% end %>
|
||||
<a href="<%= merge_or_login_link(@merge_opportunities.first.last.first) %>" class="btn not_external btn-primary" id="merge"><%= @user.registered? ? t('buttons.merge', "Combine") : t('buttons.yes', "Yes") %></a>
|
||||
</div>
|
||||
|
|
@ -34,12 +40,17 @@
|
|||
</div><!-- Close #disambiguation_box -->
|
||||
<div id="where_to_log_in" style="display:none;">
|
||||
<p><strong><%= t 'details.choose_login', "Select where you would like to log in at." %></strong></p>
|
||||
<ul>
|
||||
<ul class="unstyled_list">
|
||||
<% @merge_opportunities.first.last.each_with_index do |pseudonym, i| %>
|
||||
<li><input type="radio" name="pseudonym_select" value="<%= merge_or_login_link(pseudonym) %>"<%= ' checked="checked"' if i == 0 %>> <%= pseudonym.account.name %> (<%= pseudonym.unique_id %>)</li>
|
||||
<li>
|
||||
<label class="radio">
|
||||
<input type="radio" name="pseudonym_select" value="<%= merge_or_login_link(pseudonym) %>"<%= ' checked="checked"' if i == 0 %>>
|
||||
<%= pseudonym.account.name %> (<%= pseudonym.unique_id %>)
|
||||
</label>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="button_box">
|
||||
<div class="button_box<% if use_new_styles? %> ic-Login-confirmation__actions<% end %>">
|
||||
<a href="#" class="btn" id="back"><%= t 'buttons.back', "Back" %></a>
|
||||
<a href="#" class="btn btn-primary" id="merge_if_clicked"><%= t 'buttons.continue', 'Continue' %></a>
|
||||
</div>
|
||||
|
|
@ -52,7 +63,7 @@
|
|||
<%= mt 'details.logged_in_other_user', "**%{email}** is a new account, but you are currently logged in as **%{user}**.", :email => @communication_channel.path, :user => (@current_pseudonym && @current_pseudonym.user == @current_user ? @current_pseudonym : @current_user.pseudonym).unique_id %>
|
||||
<% end %></p>
|
||||
<p><strong><%= t 'details.add_email', "Would you like to add this email address to your current account?" %></strong></p>
|
||||
<div class="button_box">
|
||||
<div class="button_box<% if use_new_styles? %> ic-Login-confirmation__actions<% end %>">
|
||||
<a href="#" class="btn" id="register"><%= t 'buttons.new_account', 'No' %></a>
|
||||
<a href="<%= registration_confirmation_path(@nonce, :enrollment => @enrollment.try(:uuid), :confirm => 1) %>" class="btn btn-primary" id='merge'><%= t 'buttons.add_email_address', "Yes, Add Email Address" %></a>
|
||||
</div>
|
||||
|
|
@ -64,25 +75,40 @@
|
|||
|
||||
Which is you?", :count => @merge_opportunities.length %>
|
||||
<% end %>
|
||||
<ul>
|
||||
<ul class="unstyled_list">
|
||||
<% @merge_opportunities.each_with_index do |(user, pseudonyms), i| %>
|
||||
<% if pseudonyms.length == 1 || user == @current_user %>
|
||||
<li><span class="radio_spacer"><input type="radio" name="pseudonym_select" value="<%= merge_or_login_link(pseudonyms.first) %>"<%= ' checked="checked"' if i == 0 %> /></span><%= friendly_name(pseudonyms.first, @merge_opportunities) %></li>
|
||||
<li>
|
||||
<label class="radio">
|
||||
<input type="radio" name="pseudonym_select" value="<%= merge_or_login_link(pseudonyms.first) %>"<%= ' checked="checked"' if i == 0 %> />
|
||||
<%= friendly_name(pseudonyms.first, @merge_opportunities) %>
|
||||
</label>
|
||||
</li>
|
||||
<% else %>
|
||||
<li><span class="radio_spacer"></span><%= user.name %>
|
||||
<ul>
|
||||
<li><%= user.name %>
|
||||
<ul class="unstyled_list">
|
||||
<% pseudonyms.each_with_index do |pseudonym, j| %>
|
||||
<li><span class="radio_spacer"><input type="radio" name="pseudonym_select" value="<%= merge_or_login_link(pseudonym) %>"<%= ' checked="checked"' if i == 0 && j == 0 %> /></span><%= pseudonym.account.name %> (<%= pseudonym.unique_id %>)</li>
|
||||
<li>
|
||||
<label class="radio">
|
||||
<input type="radio" name="pseudonym_select" value="<%= merge_or_login_link(pseudonym) %>"<%= ' checked="checked"' if i == 0 && j == 0 %> />
|
||||
<%= pseudonym.account.name %> (<%= pseudonym.unique_id %>)
|
||||
</label>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if @pseudonym %>
|
||||
<li><span class="radio_spacer"><input type="radio" name="pseudonym_select" value="new_user_account" /></span><%= t 'details.none_of_these', "None of these, I'm a new user" %></li>
|
||||
<li>
|
||||
<label class="radio">
|
||||
<input type="radio" name="pseudonym_select" value="new_user_account" />
|
||||
<%= t 'details.none_of_these', "None of these, I'm a new user" %>
|
||||
</label>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="button_box">
|
||||
<div class="button_box<% if use_new_styles? %> ic-Login-confirmation__actions<% end %>">
|
||||
<a href="<%= merge_or_login_link(@merge_opportunities.first.last.first) %>" class="btn not_external" id="merge"><%= t 'buttons.continue', "Continue" %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -90,7 +116,7 @@ Which is you?", :count => @merge_opportunities.length %>
|
|||
<% elsif @enrollment && @pseudonym %>
|
||||
<div class="disambiguation_box"<%= ' style="display: none;"'.html_safe if params[:register] %>>
|
||||
<p><%= mt 'details.account_needed', "You've been invited to join **%{course}**. To accept this request you need a Canvas account. Click the link below to create a Canvas account.", :course => @course.name %></p>
|
||||
<div class="button_box">
|
||||
<div class="button_box<% if use_new_styles? %> ic-Login-confirmation__actions<% end %>">
|
||||
<a href="<%= login_url(:host => HostUrl.context_host(@root_account, @request.try(:host_with_port)), :confirm => @communication_channel.confirmation_code, :enrollment => @enrollment.uuid) %>" class="btn not_external"><%= t 'buttons.have_account', "I Have a Canvas Account" %></a>
|
||||
<a href="#" class="btn" id="register"><%= t 'buttons.create_account', 'Create My Account' %></a>
|
||||
</div>
|
||||
|
|
@ -126,7 +152,7 @@ Which is you?", :count => @merge_opportunities.length %>
|
|||
<% if @pseudonym.account == Account.default %>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label for="user_subscribe_to_emails">
|
||||
<label for="user_subscribe_to_emails" class="checkbox">
|
||||
<%= check_box :user, :subscribe_to_emails, :checked => true %>
|
||||
<%= t "labels.subscribe_to_emails", "I want to receive information, news and tips from Instructure" %>
|
||||
</label>
|
||||
|
|
@ -136,7 +162,7 @@ Which is you?", :count => @merge_opportunities.length %>
|
|||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<% if require_terms? %>
|
||||
<label for="user_terms_of_use">
|
||||
<label for="user_terms_of_use" class="checkbox">
|
||||
<%= check_box :user, :terms_of_use %>
|
||||
<%= agree_to_terms %>
|
||||
</label>
|
||||
|
|
@ -150,10 +176,10 @@ Which is you?", :count => @merge_opportunities.length %>
|
|||
<% unless @merge_opportunities.empty? %>
|
||||
<a href="#" class="btn" id="back"><%= t 'buttons.back', "Back" %></a>
|
||||
<% end %>
|
||||
<button type="submit" class="btn btn-primary btn-large"><%= t 'buttons.register', "Register" %></button>
|
||||
<button type="submit" class="btn btn-primary"><%= t 'buttons.register', "Register" %></button>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if use_new_styles? %></div><% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
<%
|
||||
css_bundle :login_confirm
|
||||
@headers = false
|
||||
@body_classes << "modal"
|
||||
@body_classes << "modal body--login-confirmation"
|
||||
content_for :page_title, t(:page_title, "Registration Confirmation Failed")
|
||||
%>
|
||||
|
||||
<div id="modal-box">
|
||||
<h2><%= t 'titles.problems_with_registration', "Problem with Registration" %></h2>
|
||||
<div id="modal-box"<% if use_new_styles? %> class="ic-Login-confirmation"<% end %>>
|
||||
<% if use_new_styles? %>
|
||||
<header class="ic-Login-confirmation__header">
|
||||
<%= image_tag("login/canvas-logo@2x.png", class:"ic-Login-confirmation__logo", alt:"Canvas by Instructure") %>
|
||||
</header>
|
||||
<div class="ic-Login-confirmation__content">
|
||||
<% end %>
|
||||
<h2<% if use_new_styles? %> class="ic-Login-confirmation__headline"<% end %>>
|
||||
<%= t 'titles.problems_with_registration', "Problem with Registration" %>
|
||||
</h2>
|
||||
<p><%= t :details, %{It looks like you may have already confirmed your registration. Try
|
||||
*logging in*
|
||||
with the email address and password you registered. If you can't remember
|
||||
|
|
@ -18,4 +26,5 @@
|
|||
or to let us know what's going on.} %>
|
||||
<% end %>
|
||||
</p>
|
||||
<% if use_new_styles? %></div><% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
css_bundle :otp_login
|
||||
js_bundle :otp_login
|
||||
@headers = false
|
||||
@body_classes << "modal"
|
||||
@body_classes << "modal body--login-confirmation"
|
||||
content_for :page_title, t(:page_title, "Multi-factor Authentication")
|
||||
%>
|
||||
|
||||
|
|
@ -10,8 +10,14 @@
|
|||
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=yes,width=device-width">
|
||||
<% end %>
|
||||
|
||||
<div id="modal-box">
|
||||
<h2><%= t 'titles.mfa', "Multi-factor Authentication" %></h2>
|
||||
<div id="modal-box"<% if use_new_styles? %> class="ic-Login-confirmation"<% end %>>
|
||||
<% if use_new_styles? %>
|
||||
<header class="ic-Login-confirmation__header">
|
||||
<%= image_tag("login/canvas-logo@2x.png", class:"ic-Login-confirmation__logo", alt:"Canvas by Instructure") %>
|
||||
</header>
|
||||
<div class="ic-Login-confirmation__content">
|
||||
<% end %>
|
||||
<h2<% if use_new_styles? %> class="ic-Login-confirmation__headline"<% end %>><%= t 'titles.mfa', "Multi-factor Authentication" %></h2>
|
||||
<% if configuring? %>
|
||||
<div>
|
||||
<% if @current_user.mfa_settings == :required %>
|
||||
|
|
@ -36,14 +42,14 @@ secret key **%{secret_key}**.
|
|||
<button type="submit" class="btn btn-primary"><%= t('buttons.send', "Send") %></button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= form_for :otp_login, :url => send_otp_via_sms_path, :html => { :id => 'new_phone_form', :style => (hidden(false) unless ccs.empty?), :class => 'bootstrap-form form-horizontal' } do |f| %>
|
||||
<div class="control-group">
|
||||
<%= f.blabel :phone_number, :en => 'Phone Number', :class => 'control-label' %>
|
||||
<div class="controls"><%= f.text_field :phone_number, :class => 'input-medium' %></div>
|
||||
<%= form_for :otp_login, :url => send_otp_via_sms_path, :html => { :id => 'new_phone_form', :style => (hidden(false) unless ccs.empty?), :class => 'ic-Form-group' } do |f| %>
|
||||
<div class="ic-Form-control">
|
||||
<%= f.blabel :phone_number, :en => 'Phone Number', :class => 'ic-Label' %>
|
||||
<div class="controls"><%= f.text_field :phone_number, :class => 'ic-Input' %></div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<%= f.blabel :carrier, :en => 'Carrier', :class => 'control-label' %>
|
||||
<div class="controls"><%= f.select :carrier, CommunicationChannel.sms_carriers, {}, { :style => 'width: 100%' } %></div>
|
||||
<div class="ic-Form-control">
|
||||
<%= f.blabel :carrier, :en => 'Carrier', :class => 'ic-Label' %>
|
||||
<%= f.select :carrier, CommunicationChannel.sms_carriers, {}, { :class => 'ic-Input' } %>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
|
|
@ -71,14 +77,17 @@ secret key **%{secret_key}**.
|
|||
<% else %>
|
||||
<div><p><%= t('details.otp_on_device', "Please enter the verification code shown by your token.") %></p></div>
|
||||
<% end %>
|
||||
<%= form_for :otp_login, :url => otp_login_path, :html => {:id => "login_form", :class => "inline-form"} do |f| %>
|
||||
<div>
|
||||
<%= f.blabel :verification_code, :en => "Verification Code", :class => 'control-label' %>
|
||||
<%= f.text_field :verification_code, :class => "text", :autocomplete => 'off' %>
|
||||
<button type="submit" class="btn btn-primary"><%= t('buttons.verify', 'Verify') %></button>
|
||||
<%= form_for :otp_login, :url => otp_login_path, :html => {:id => "login_form", :class => "ic-Form-group"} do |f| %>
|
||||
<div class="ic-Form-control">
|
||||
<div class="ic-Input-group">
|
||||
<%= f.blabel :verification_code, :en => "Verification Code", :class => 'ic-Label' %>
|
||||
<%= f.text_field :verification_code, :class => "ic-Input", :autocomplete => 'off' %>
|
||||
<button type="submit" class="Button Button--primary"><%= t('buttons.verify', 'Verify') %></button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<%= f.check_box :remember_me %> <%= f.label :remember_me, :en => "Remember this computer" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if use_new_styles? %></div><% end %>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Loading…
Reference in New Issue