Add progress indicator to sign-up flow (#24545)
parent
955ec252a4
commit
e5c0b16735
76 changed files with 157 additions and 105 deletions
@ -1,20 +1,22 @@ |
||||
- content_for :page_title do |
||||
= t('auth.setup.title') |
||||
|
||||
- if missing_email? |
||||
= simple_form_for(@user, url: auth_setup_path) do |f| |
||||
= render 'shared/error_messages', object: @user |
||||
= simple_form_for(@user, url: auth_setup_path) do |f| |
||||
= render 'auth/shared/progress', stage: 'confirm' |
||||
|
||||
.fields-group |
||||
%p.hint= t('auth.setup.email_below_hint_html') |
||||
%h1.title= t('auth.setup.title') |
||||
%p.lead= t('auth.setup.email_settings_hint_html', email: content_tag(:strong, @user.email)) |
||||
|
||||
.fields-group |
||||
= f.input :email, required: true, hint: false, input_html: { 'aria-label': t('simple_form.labels.defaults.email'), autocomplete: 'off' } |
||||
= render 'shared/error_messages', object: @user |
||||
|
||||
.actions |
||||
= f.submit t('admin.accounts.change_email.label'), class: 'button' |
||||
- else |
||||
.simple_form |
||||
%p.hint= t('auth.setup.email_settings_hint_html', email: content_tag(:strong, @user.email)) |
||||
%p.lead |
||||
%strong= t('auth.setup.link_not_received') |
||||
%p.lead= t('auth.setup.email_below_hint_html') |
||||
|
||||
.fields-group |
||||
= f.input :email, required: true, hint: false, input_html: { 'aria-label': t('simple_form.labels.defaults.email'), autocomplete: 'off' } |
||||
|
||||
.actions |
||||
= f.submit t('auth.resend_confirmation'), class: 'button' |
||||
|
||||
.form-footer= render 'auth/shared/links' |
||||
|
@ -0,0 +1,25 @@ |
||||
- progress_index = { rules: 0, details: 1, confirm: 2 }[stage.to_sym] |
||||
|
||||
%ol.progress-tracker |
||||
%li{ class: progress_index.positive? ? 'completed' : 'active' } |
||||
.circle |
||||
- if progress_index.positive? |
||||
= check_icon |
||||
.label= t('auth.progress.rules') |
||||
%li.separator{ class: progress_index.positive? ? 'completed' : nil } |
||||
%li{ class: [progress_index > 1 && 'completed', progress_index == 1 && 'active'] } |
||||
.circle |
||||
- if progress_index > 1 |
||||
= check_icon |
||||
.label= t('auth.progress.details') |
||||
%li.separator{ class: progress_index > 1 ? 'completed' : nil } |
||||
%li{ class: [progress_index > 2 && 'completed', progress_index == 2 && 'active'] } |
||||
.circle |
||||
- if progress_index > 2 |
||||
= check_icon |
||||
.label= t('auth.progress.confirm') |
||||
- if approved_registrations? |
||||
%li.separator{ class: progress_index > 2 ? 'completed' : nil } |
||||
%li |
||||
.circle |
||||
.label= t('auth.progress.review') |
Loading…
Reference in new issue