diff options
Diffstat (limited to 'app/views/devise/shared')
4 files changed, 82 insertions, 73 deletions
diff --git a/app/views/devise/shared/_sign_in_link.html.haml b/app/views/devise/shared/_sign_in_link.html.haml index a1d10898c5b..a9f24e42d0b 100644 --- a/app/views/devise/shared/_sign_in_link.html.haml +++ b/app/views/devise/shared/_sign_in_link.html.haml @@ -1,4 +1,4 @@ -%p.text-center +%p{ class: local_assigns.fetch(:wrapper_class, 'gl-text-center') } %span.light = _('Already have an account?') - path_params = { redirect_to_referer: 'yes' } diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml index bf1b604465b..fb60b8c08eb 100644 --- a/app/views/devise/shared/_signup_box.html.haml +++ b/app/views/devise/shared/_signup_box.html.haml @@ -1,77 +1,10 @@ -- max_first_name_length = max_last_name_length = 127 - borderless ||= false -- form_resource_name = "new_#{resource_name}" .gl-mb-3.gl-p-4{ class: (borderless ? '' : 'gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base') } = yield :omniauth_providers_top if show_omniauth_providers - = gitlab_ui_form_for(resource, as: form_resource_name, url: url, html: { class: 'gl-show-field-errors js-arkose-labs-form', aria: { live: 'assertive' }}, data: { testid: 'signup-form' }) do |f| - .devise-errors - = render 'devise/shared/error_messages', resource: resource - - if Gitlab::CurrentSettings.invisible_captcha_enabled - = invisible_captcha nonce: true, autocomplete: SecureRandom.alphanumeric(12) - .name.form-row - .col.form-group - = f.label :first_name, _('First name'), for: 'new_user_first_name' - = f.text_field :first_name, - class: 'form-control gl-form-input top js-block-emoji js-validate-length', - data: { max_length: max_first_name_length, - max_length_message: s_('SignUp|First name is too long (maximum is %{max_length} characters).') % { max_length: max_first_name_length }, - testid: 'new-user-first-name-field' }, - required: true, - title: _('This field is required.') - .col.form-group - = f.label :last_name, _('Last name'), for: 'new_user_last_name' - = f.text_field :last_name, - class: 'form-control gl-form-input top js-block-emoji js-validate-length', - data: { max_length: max_last_name_length, - max_length_message: s_('SignUp|Last name is too long (maximum is %{max_length} characters).') % { max_length: max_last_name_length }, - testid: 'new-user-last-name-field' }, - required: true, - title: _('This field is required.') - .username.form-group - = f.label :username, _('Username') - = f.text_field :username, - class: 'form-control gl-form-input middle js-block-emoji js-validate-length js-validate-username', - data: signup_username_data_attributes, - pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, - required: true, - title: _('Please create a username with only alphanumeric characters.') - %p.validation-error.gl-text-red-500.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is already taken.') - %p.validation-success.gl-text-green-600.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is available.') - %p.validation-pending.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Checking username availability...') - .form-group - = f.label :email, _('Email') - = f.email_field :email, - class: 'form-control gl-form-input middle js-validate-email', - data: { testid: 'new-user-email-field' }, - required: true, - title: _('Please provide a valid email address.') - %p.validation-hint.gl-field-hint.text-secondary= _('We recommend a work email address.') - %p.validation-warning.gl-field-error-ignore.text-secondary.hide= _('This email address does not look right, are you sure you typed it correctly?') - -# This is used for providing entry to Jihu on email verification - = render_if_exists 'devise/shared/signup_email_additional_info' - .form-group.gl-mb-5 - = f.label :password, _('Password') - %input.form-control.gl-form-input.js-password{ data: { id: "#{form_resource_name}_password", - title: s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length }, - minimum_password_length: @minimum_password_length, - testid: 'new-user-password-field', - autocomplete: 'new-password', - name: "#{form_resource_name}[password]" } } - %p.gl-field-hint-valid.text-secondary= s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length } - = render_if_exists 'shared/password_requirements_list' - = render_if_exists 'devise/shared/phone_verification', form: f + = render 'devise/shared/signup_box_form', + button_text: button_text, + url: url, + show_omniauth_providers: omniauth_enabled? && button_based_providers_enabled? - .form-group - - if arkose_labs_enabled? - = render_if_exists 'devise/registrations/arkose_labs' - - elsif show_recaptcha_sign_up? - = recaptcha_tags nonce: content_security_policy_nonce - - = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { testid: 'new-user-register-button' }}) do - = button_text - - = render 'devise/shared/terms_of_service_notice', button_text: button_text - - = yield :omniauth_providers_bottom if show_omniauth_providers diff --git a/app/views/devise/shared/_signup_box_form.html.haml b/app/views/devise/shared/_signup_box_form.html.haml new file mode 100644 index 00000000000..246036b72e1 --- /dev/null +++ b/app/views/devise/shared/_signup_box_form.html.haml @@ -0,0 +1,73 @@ +- max_first_name_length = max_last_name_length = 127 +- form_resource_name = "new_#{resource_name}" + += gitlab_ui_form_for(resource, as: form_resource_name, url: url, html: { class: 'gl-show-field-errors js-arkose-labs-form', aria: { live: 'assertive' }}, data: { testid: 'signup-form' }) do |f| + .devise-errors + = render 'devise/shared/error_messages', resource: resource + - if Gitlab::CurrentSettings.invisible_captcha_enabled + = invisible_captcha nonce: true, autocomplete: SecureRandom.alphanumeric(12) + .name.form-row + .col.form-group + = f.label :first_name, _('First name'), for: 'new_user_first_name' + = f.text_field :first_name, + class: 'form-control gl-form-input top js-block-emoji js-validate-length', + data: { max_length: max_first_name_length, + max_length_message: s_('SignUp|First name is too long (maximum is %{max_length} characters).') % { max_length: max_first_name_length }, + testid: 'new-user-first-name-field' }, + required: true, + title: _('This field is required.') + .col.form-group + = f.label :last_name, _('Last name'), for: 'new_user_last_name' + = f.text_field :last_name, + class: 'form-control gl-form-input top js-block-emoji js-validate-length', + data: { max_length: max_last_name_length, + max_length_message: s_('SignUp|Last name is too long (maximum is %{max_length} characters).') % { max_length: max_last_name_length }, + testid: 'new-user-last-name-field' }, + required: true, + title: _('This field is required.') + .username.form-group + = f.label :username, _('Username') + = f.text_field :username, + class: 'form-control gl-form-input middle js-block-emoji js-validate-length js-validate-username', + data: signup_username_data_attributes, + pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, + required: true, + title: _('Please create a username with only alphanumeric characters.') + %p.validation-error.gl-text-red-500.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is already taken.') + %p.validation-success.gl-text-green-600.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is available.') + %p.validation-pending.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Checking username availability...') + .form-group + = f.label :email, _('Email') + = f.email_field :email, + class: 'form-control gl-form-input middle js-validate-email', + data: { testid: 'new-user-email-field' }, + required: true, + title: _('Please provide a valid email address.') + %p.validation-hint.gl-field-hint.text-secondary= _('We recommend a work email address.') + %p.validation-warning.gl-field-error-ignore.text-secondary.hide= _('This email address does not look right, are you sure you typed it correctly?') + -# This is used for providing entry to Jihu on email verification + = render_if_exists 'devise/shared/signup_email_additional_info' + .form-group.gl-mb-5 + = f.label :password, _('Password') + %input.form-control.gl-form-input.js-password{ data: { id: "#{form_resource_name}_password", + title: s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length }, + minimum_password_length: @minimum_password_length, + testid: 'new-user-password-field', + autocomplete: 'new-password', + name: "#{form_resource_name}[password]" } } + %p.gl-field-hint-valid.text-secondary= s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length } + = render_if_exists 'shared/password_requirements_list' + = render_if_exists 'devise/shared/phone_verification', form: f + + .form-group + - if arkose_labs_enabled? + = render_if_exists 'devise/registrations/arkose_labs' + - elsif show_recaptcha_sign_up? + = recaptcha_tags nonce: content_security_policy_nonce + + = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { testid: 'new-user-register-button' }}) do + = button_text + + = render 'devise/shared/terms_of_service_notice', button_text: button_text + += yield :omniauth_providers_bottom if show_omniauth_providers diff --git a/app/views/devise/shared/_signup_omniauth_provider_list.haml b/app/views/devise/shared/_signup_omniauth_provider_list.haml index e8c82e456ae..b9efcaa11b4 100644 --- a/app/views/devise/shared/_signup_omniauth_provider_list.haml +++ b/app/views/devise/shared/_signup_omniauth_provider_list.haml @@ -14,7 +14,10 @@ = _("Create an account using:") .gl-display-flex.gl-justify-content-between.gl-flex-wrap - providers.each do |provider| - = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do + = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), + class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", + data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, + id: "oauth-login-#{provider}" do - if provider_has_icon?(provider) = provider_image_tag(provider) %span.gl-button-text |