docbrown/app/views/shared/authentication/_email_registration_form.html.erb
Ridhwana 5827be4ecc
RFC 190: Forem Creator Signup Page (#13875)
* chore: add my name to the chaore so that I can search after cleanup

* feat: update the forem creator signup template and copy over some stuff from the email_resgistration

* feat: update the fields

* feat: make sure that it saves

* feat: add an eye svg to the password input

* feat: update eye and eye-off svg

* feat: update the placeholder for the password field

* reveak and hide the password when clicking on the icon

* eye visiblibility functionality

* feat: display the username

* feat: show the username row when we click edit

* feat: update the interaction design

* chore: remove extra line

* chore: remove unneeded function

* feat: never show the username hint when the user field is not hidden

* feat: ensure that the username works

* chore: update the existing specs

* feat: move to packs

* refactor: manage the visibility with a avariable and not with the password type

* optimize the way we use password visibility

* chore: validate the username field

* chore: update the statement

* feat: add a background

* feat: accessibility changes

* feat: set a max length on the username

* feat: some more accessibility changes

* feat: validate the length of the password

* chore: add some margin to the error box

* feat: by_email shows the error states and we should cater for the Forem Creator

* feat: tackle any errors

* WIP/test: first pass of some integration specs

* feat: update the Cypress tests

* Update app/views/shared/authentication/_forem_creator_signup.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/shared/authentication/_forem_creator_signup.html.erb

Co-authored-by: Michael Kohl <me@citizen428.net>

* chore: temporarily disable the background on large screens

* chore: remove title

* prevent default

* feat; update the style of the button

* feat: update the tests to use accessibility tags

* feat: update icons

* chore: oops

* little forntend updates

* Update app/views/shared/authentication/_forem_creator_signup.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update cypress/integration/creatorOnboardingFlows/creatorSignup.spec.js

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* fea: change the aria label and pressed

* feat: change to just John

* feat: update  cypress tests

* test if this is causing the test to fail

* feat: add some margin

* feat: mostly for Cypress - required is true or false based on whether the field is needed

* refactor: use the password label and skip last test

* Update app/views/shared/authentication/_forem_creator_signup.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/shared/authentication/_forem_creator_signup.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* fix: do not toggle  the label (accessibility)

* fix: add a comma

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
Co-authored-by: Michael Kohl <me@citizen428.net>
Co-authored-by: Paweł Ludwiczak <ludwiczakpawel@gmail.com>
Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
2021-08-24 10:33:26 +02:00

113 lines
4.8 KiB
Text

<div id="sign-in-password-form" class="mt-8 mb-6 crayons-card p-7 align-left mx-auto" style="max-width:580px;">
<% if flash[:notice] %>
<div class="crayons-notice crayons-notice--danger mb-6" role="alert">
<%= flash[:notice] %>
</div>
<% end %>
<%= form_for(@user, as: :user, data: { testid: "registration-form" }, url: registration_path(:user)) do |f| %>
<% if defined?(resource) && resource&.errors&.any? %>
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger" role="alert" data-testid="signup-errors">
<div class="crayons-card__header">
<h3 class="crayons-card__headline">
Whoops, we found <%= pluralize(resource.errors.size, "problem") %>
</h3>
</div>
<div class="crayons-card__body">
<ul>
<% resource.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
</div>
<% else %>
<p class="pb-4 fw-bold">Create your account</p>
<% end %>
<% if Settings::Authentication.display_email_domain_allow_list_publicly &&
Settings::Authentication.allowed_registration_email_domains.any? %>
<div class="crayons-notice crayons-notice--info" aria-live="polite">
<% if Settings::Authentication.allowed_registration_email_domains.one? %>
Registration restricted to <strong>@<%= Settings::Authentication.allowed_registration_email_domains.first %></strong> emails.
<% else %>
Registration restricted to the following emails
<ul>
<% Settings::Authentication.allowed_registration_email_domains.each do |domain| %>
<li>
<strong>@<%= domain %></strong></strong>
</li>
<% end %>
</ul>
<% end %>
</div>
<% end %>
<div class="crayons-field mt-3">
<%= f.label :profile_image, class: "crayons-field__label" %>
<%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
</div>
<div class="crayons-field mt-2">
<%= f.label :name, class: "crayons-field__label", aria: { label: "Name" } do %>
Name
<span class="crayons-field__required crayons-tooltip" data-tooltip="* - required">*</span>
<% end %>
<%= f.text_field :name, class: "crayons-textfield", required: true %>
</div>
<div class="crayons-field mt-2">
<%= f.label :username, class: "crayons-field__label", aria: { label: "Username" } do %>
Username
<span class="crayons-field__required crayons-tooltip" data-tooltip="* - required">*</span>
<% end %>
<%= f.text_field :username, class: "crayons-textfield", required: true %>
</div>
<div class="crayons-field mt-2">
<%= f.label :email, class: "crayons-field__label", aria: { label: "Email" } do %>
Email
<span class="crayons-field__required crayons-tooltip" data-tooltip="* - required">*</span>
<% end %>
<%= f.email_field :email, autocomplete: "email", class: "crayons-textfield", required: true %>
</div>
<div class="crayons-field mt-2">
<%= f.label :password, class: "crayons-field__label", aria: { label: "Password" } do %>
Password
<span class="crayons-field__required crayons-tooltip" data-tooltip="* - required">*</span>
<% end %>
<%= f.password_field :password, autocomplete: "current-password", class: "crayons-textfield", required: true %>
</div>
<div class="crayons-field mt-2">
<%= f.label :password_confirmation, class: "crayons-field__label", aria: { label: "Password Confirmation" } do %>
Password Confirmation
<span class="crayons-field__required crayons-tooltip" data-tooltip="* - required">*</span>
<% end %>
<%= f.password_field :password_confirmation, autocomplete: "current-password", class: "crayons-textfield", required: true %>
</div>
<% if ENV["FOREM_OWNER_SECRET"].present? && Settings::General.waiting_on_first_user %>
<% if params[:forem_owner_secret].present? %>
<%= f.hidden_field :forem_owner_secret, value: params[:forem_owner_secret] %>
<% else %>
<div class="crayons-field mt-2">
<%= f.label :forem_owner_secret, "New Forem Secret", class: "crayons-field__label" %>
<%= f.password_field :forem_owner_secret, class: "crayons-textfield", required: true, placeholder: "As provided by your Forem host" %>
</div>
<% end %>
<% end %>
<% if ReCaptcha::CheckRegistrationEnabled.call %>
<div class="recaptcha-tag-container mt-2">
<%= recaptcha_tags site_key: Settings::Authentication.recaptcha_site_key %>
</div>
<% end %>
<div class="actions pt-3">
<%= f.submit "Sign up", class: "crayons-btn" %>
</div>
<% end %>
</div>