maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Forem background (#14700)

Browse source 
* forem background styles

* cleanup

* layout updates

* couple fixes

* cypress
This commit is contained in:
ludwiczakpawel 2021-09-14 14:47:48 +02:00 • committed by GitHub
parent 099b4672ad
commit d6aa9e058b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 125 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/base/layout.scss
View file

@ -73,7 +73,7 @@
}
&--limited-xs {
--site-width: 480px;
--site-width: #{$breakpoint-xs};
}
&--limited-inner-l {

2
app/assets/stylesheets/config/_import.scss vendored
View file

@ -37,11 +37,13 @@ $colors: (
// List of breakpoints for our responsiveness.
// If you modify these breakpoints, ensure you update them in @components/useMediaQuery.js
$breakpoint-xs: 480px;
$breakpoint-s: 640px;
$breakpoint-m: 768px;
$breakpoint-l: 1024px;
$breakpoints: (
'xs': $breakpoint-xs,
's': $breakpoint-s,
'm': $breakpoint-m,
'l': $breakpoint-l,

14
app/assets/stylesheets/views/confirm-email.scss
View file

@ -9,18 +9,4 @@
flex: 1;
background: white;
}
#main-content {
display: flex;
flex: 1;
@media (max-width: $breakpoint-m) {
padding: 1em 1em 0;
}
}
}
.forem-background {
@media (max-width: $breakpoint-l) {
display: none;
}
}

61
app/views/devise/confirmations/new.html.erb
View file

@ -1,42 +1,39 @@
<% title "Confirm your email" %>
<% proper_email = params[:email] || (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
<main id="main-content">
<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout">
<% if FeatureFlag.enabled?(:creator_onboarding) %>
<%= javascript_packs_with_chunks_tag "confirmationEmail", defer: true %>
<div class="crayons-layout crayons-layout--limited-l" id="email-confirmation">
<div class="flex flex-col items-center justify-center">
<%= render "devise/shared/error_messages", resource: resource %>
<div class="flex flex-1 flex-col items-center justify-center relative z-elevate align-center">
<%= render "devise/shared/error_messages", resource: resource %>
<%= inline_svg_tag("mail.svg", aria: true, title: "Email", class: "mb-6") %>
<h1 class="fs-2xl m:fs-3xl lh-tight fw-bold mb-4">Great! Now confirm your email address.</h1>
<% if proper_email.present? %>
<p class="fs-l m:fs-xl color-base-70 m:max-w-50">
We've sent an email to <span class="fw-bold"><%= proper_email %></span>.
Click the button inside to confirm your email.</p>
</p>
<% end %>
</div>
<div class="bg-base-10 p-4 mx-auto my-4 radius-default z-elevate">
<button class="color-accent-brand text-underline cursor-pointer js-confirmation-button border-none p-0" role="button">Click here</button> if you didn't get the email...
</div>
<%= inline_svg_tag("mail.svg", aria: true, title: "Email") %>
<div class="fs-3xl fw-bold">Great! Now confirm your email address.</div>
<%= inline_svg_tag("forem-background.svg", aria: true, title: "forem background", class: "absolute bottom-0 right-0 hidden m:block") %>
<% if proper_email.present? %>
<div class="fs-xl color-base-70">
<div>We've sent an email to <span class="fw-bold"><%= proper_email %></span></div>
<div>Click the button inside to confirm your email</div>
</div>
<% end %>
</div>
<div class="bg-base-10 p-4 self-end mx-auto mb-6">
<button class="color-accent-brand text-underline cursor-pointer js-confirmation-button border-none p-0" role="button">Click here</button> if you didn't get the email...
</div>
<%= inline_svg_tag("forem-background.svg", aria: true, title: "forem background", class: "forem-background absolute bottom-0 right-0") %>
<div id="confirm-email-modal" class="hidden">
<div>Re-enter the email address below to resend the confirmation link</div>
<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }, data: { testid: "resend-confirmation-form" }) do |f| %>
<div class="crayons-field mt-5 mb-3">
<%= f.email_field :email, placeholder: "user@example.com", autocomplete: "email", aria: { label: "Confirmation email address" }, class: "crayons-textfield", required: true, value: proper_email %>
</div>
<div id="confirm-email-modal" class="hidden">
<div>Re-enter the email address below to resend the confirmation link</div>
<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }, data: { testid: "resend-confirmation-form" }) do |f| %>
<div class="crayons-field mt-5 mb-3">
<%= f.email_field :email, placeholder: "user@example.com", autocomplete: "email", aria: { label: "Confirmation email address" }, class: "crayons-textfield", required: true, value: proper_email %>
</div>
<div class="flex">
<%= f.submit "Resend", role: "button", class: "crayons-btn mr-1" %>
<button class="crayons-btn color-base-70 crayons-btn--ghost js-dismiss-button" role="button">
Dismiss
</button>
</div>
<% end %>
</div>
<div class="flex">
<%= f.submit "Resend", role: "button", class: "crayons-btn mr-1" %>
<button class="crayons-btn color-base-70 crayons-btn--ghost js-dismiss-button" role="button">
Dismiss
</button>
</div>
<% end %>
</div>
<% else %>
<div class="crayons-layout crayons-layout--limited-l align-center mt-9 mb-10 p-3">

175
app/views/shared/authentication/_forem_creator_signup.html.erb
View file

@ -1,97 +1,106 @@
<%= javascript_packs_with_chunks_tag "foremCreatorSignup", defer: true %>
<main id="main-content">
<div class="mx-auto mt-8 mb-10 p-4 fs-2xl lh-base align-center" style="width:96%;max-width:1300px;">
<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] %>
<style>
#page-content {
display: flex;
flex-direction: column;
}
#page-content-inner {
display: flex;
flex: 1;
background: white;
}
</style>
<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout crayons-layout--limited-xs">
<div class="relative z-elevate p-4">
<% if flash[:notice] %>
<div class="crayons-notice crayons-notice--danger mb-6" role="alert">
<%= flash[:notice] %>
</div>
<% end %>
<% any_errors = local_assigns[:resource]&.errors&.any? %>
<%= form_for(@user, as: :user, data: { testid: "creator-signup-form" }, url: registration_path(:user)) do |f| %>
<% if any_errors %>
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger my-8" 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>
<% end %>
<% any_errors = local_assigns[:resource]&.errors&.any? %>
<div class="align-center">
<p class="pb-4 fs-2xl m:fs-3xl lh-tight fw-bold">Let's start your Forem journey!</p>
<p class="color-base-70 fs-l m:fs-xl">Create your admin account first.</p>
<p class="color-base-70 fs-l m:fs-xl">Then we'll walk you through your Forem setup.</p>
</div>
<%= form_for(@user, as: :user, data: { testid: "creator-signup-form" }, url: registration_path(:user)) do |f| %>
<% if any_errors %>
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger my-8" 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>
<% end %>
<div class="crayons-field mt-6">
<%= f.label :name, "Name", for: "name", class: "crayons-field__label" %>
<%= f.text_field :name, id: "name", placeholder: "John Doe", class: "crayons-textfield js-creator-signup-name", required: true %>
<div class="align-center">
<p class="pb-4 fs-3xl fw-bold lh-tight">Let's start your Forem journey!</p>
<p class="color-base-70 fs-xl lh-tight">Create your admin account first.</p>
<p class="color-base-70 fs-xl lh-tight">Then we'll walk you through your Forem setup.</p>
</div>
<div class="crayons-field mt-6">
<%= f.label :name, "Name", for: "name", class: "crayons-field__label" %>
<%= f.text_field :name, id: "name", placeholder: "John Doe", class: "crayons-textfield js-creator-signup-name", required: true %>
<div class="js-creator-signup-username-hint-row hidden">
<div class="fs-xs color-base-60 flex">
<span>Your username will be&nbsp;</span>
<button aria-label="Edit username" class="cursor-pointer border-none bg-transparent p-0 js-creator-edit-username flex color-base-90 " role="button">
<span class="js-creator-signup-username-hint"></span>
<%= inline_svg_tag("pencil.svg", class: "cursor-pointer crayons-icon opacity-75 ml-1", aria_hidden: true, title: "Edit username") %>
</button>
</div>
</div>
</div>
<div class="crayons-field mt-6 <%= "hidden" unless any_errors %> js-creator-signup-username-row">
<%= f.label :username, "Username", for: "username", class: "crayons-field__label" %>
<%= f.text_field :username, pattern: "[A-Za-z0-9_]+", maxlength: "30", title: "A username can only contain letters, numbers and underscores. The maximum username length can be 30 characters.", id: "username", class: "js-creator-signup-username crayons-textfield",
aria: { describedby: "username-helper-text" } %>
<p id="username-helper-text" class="fs-xs color-base-60 mt-1">It can only contain letters, numbers and underscores. The maximum username length can be 30 characters.</p>
</div>
<div class="crayons-field mt-6">
<%= f.label :email, "Email", for: "email", class: "crayons-field__label" %>
<%= f.email_field :email, placeholder: "john@example.com", autocomplete: "email", id: "email", class: "crayons-textfield", required: true %>
</div>
<div class="crayons-field mt-6">
<%= f.label :password, "Password", class: "crayons-field__label" %>
<div class="relative">
<%= f.password_field :password, minlength: "8", class: "crayons-textfield js-password", placeholder: "••••••••", required: true, aria: { describedby: "password-helper-text" } %>
<button class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="Show password" aria-pressed="false">
<%= inline_svg_tag("eye.svg", class: "crayons-icon js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: "Show password") %>
<%= inline_svg_tag("eye-off.svg", class: "crayons-icon hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: "Hide password") %>
<div class="js-creator-signup-username-hint-row hidden">
<div class="fs-xs color-base-60 flex">
<span>Your username will be&nbsp;</span>
<button aria-label="Edit username" class="cursor-pointer border-none bg-transparent p-0 js-creator-edit-username flex color-base-90 " role="button">
<span class="js-creator-signup-username-hint"></span>
<%= inline_svg_tag("pencil.svg", class: "cursor-pointer crayons-icon opacity-75 ml-1", aria_hidden: true, title: "Edit username") %>
</button>
</div>
<p id="password-helper-text" class="fs-xs color-base-60 mt-1">Minimum 8 characters</p>
</div>
</div>
</div>
<% needs_owner_secret_field = ENV["FOREM_OWNER_SECRET"].present? && Settings::General.waiting_on_first_user %>
<% if needs_owner_secret_field %>
<% if params[:owner_secret].present? %>
<%= f.hidden_field :owner_secret, value: params[:owner_secret] %>
<% else %>
<div class="crayons-field mt-6">
<%= f.label :owner_secret, "New Forem Secret", class: "crayons-field__label" %>
<%= f.password_field :owner_secret, class: "crayons-textfield", required: needs_owner_secret_field, placeholder: "As provided by your Forem host" %>
</div>
<% end %>
<div class="crayons-field mt-6 <%= "hidden" unless any_errors %> js-creator-signup-username-row">
<%= f.label :username, "Username", for: "username", class: "crayons-field__label" %>
<%= f.text_field :username, pattern: "[A-Za-z0-9_]+", maxlength: "30", title: "A username can only contain letters, numbers and underscores. The maximum username length can be 30 characters.", id: "username", class: "js-creator-signup-username crayons-textfield",
aria: { describedby: "username-helper-text" } %>
<p id="username-helper-text" class="fs-xs color-base-60 mt-1">It can only contain letters, numbers and underscores. The maximum username length can be 30 characters.</p>
</div>
<div class="crayons-field mt-6">
<%= f.label :email, "Email", for: "email", class: "crayons-field__label" %>
<%= f.email_field :email, placeholder: "john@example.com", autocomplete: "email", id: "email", class: "crayons-textfield", required: true %>
</div>
<div class="crayons-field mt-6">
<%= f.label :password, "Password", class: "crayons-field__label" %>
<div class="relative">
<%= f.password_field :password, minlength: "8", class: "crayons-textfield js-password", placeholder: "••••••••", required: true, aria: { describedby: "password-helper-text" } %>
<button class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="Show password" aria-pressed="false">
<%= inline_svg_tag("eye.svg", class: "crayons-icon js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: "Show password") %>
<%= inline_svg_tag("eye-off.svg", class: "crayons-icon hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: "Hide password") %>
</button>
</div>
<p id="password-helper-text" class="fs-xs color-base-60 mt-1">Minimum 8 characters</p>
</div>
<% needs_owner_secret_field = ENV["FOREM_OWNER_SECRET"].present? && Settings::General.waiting_on_first_user %>
<% if needs_owner_secret_field %>
<% if params[:owner_secret].present? %>
<%= f.hidden_field :owner_secret, value: params[:owner_secret] %>
<% else %>
<div class="crayons-field mt-6">
<%= f.label :owner_secret, "New Forem Secret", class: "crayons-field__label" %>
<%= f.password_field :owner_secret, class: "crayons-textfield", required: needs_owner_secret_field, placeholder: "As provided by your Forem host" %>
</div>
<% end %>
<div class="flex flex-col pt-6">
<%= f.submit "Create my account", class: "crayons-btn" %>
</div>
<%= inline_svg_tag("forem-background.svg", aria_hidden: true, class: "forem-background absolute bottom-0 right-0") %>
<% end %>
</div>
<div class="flex flex-col pt-6">
<%= f.submit "Create my account", class: "crayons-btn" %>
</div>
<% end %>
</div>
<%= inline_svg_tag("forem-background.svg", aria: true, title: "forem background", class: "absolute bottom-0 right-0 hidden m:block") %>
</main>

2
cypress/integration/creatorOnboardingFlows/confirmEmail.spec.js
View file

@ -16,7 +16,7 @@ describe('Confirm Email page', () => {
it('should display the correct subtext', () => {
cy.contains("We've sent an email to user@forem.com").should('be.visible');
cy.findByText('Click the button inside to confirm your email').should(
cy.findByText(/Click the button inside to confirm your email/).should(
'be.visible',
);
});