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

[deploy] Branded authentication buttons (#8679)

Browse source 
* flare tag line height

* .

* init styling

* social buttons

* no need for inverted

* other places

* more

* Fix specs

Co-authored-by: rhymes <rhymesete@gmail.com>
This commit is contained in:
ludwiczakpawel 2020-06-15 17:34:07 +02:00 • committed by GitHub
parent 3e8089f191
commit 75c81b542f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 108 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/images/apple.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M11.752 6.657c.828 0 1.867-.56 2.486-1.307.56-.677.969-1.623.969-2.568 0-.129-.012-.257-.036-.362-.922.035-2.03.618-2.696 1.4-.525.596-1.004 1.53-1.004 2.487 0 .14.024.28.035.326.059.012.152.024.245.024zM8.834 20.78c1.132 0 1.634-.759 3.046-.759 1.436 0 1.75.736 3.011.736 1.238 0 2.066-1.144 2.848-2.265.876-1.284 1.238-2.544 1.261-2.603-.082-.023-2.451-.992-2.451-3.711 0-2.358 1.867-3.42 1.972-3.502-1.237-1.774-3.116-1.82-3.63-1.82-1.389 0-2.52.84-3.233.84-.77 0-1.786-.794-2.988-.794-2.288 0-4.61 1.89-4.61 5.462 0 2.218.863 4.564 1.925 6.082.91 1.284 1.705 2.334 2.849 2.334z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 689 B

47
app/assets/stylesheets/components/buttons.scss
View file

@ -1,5 +1,19 @@
@import '../config/import';
:root {
--brand-apple-bg: #000;
--brand-apple-color: #fff;
--brand-apple-bg-hover: #1b1b1b;
--brand-twitter-bg: #1da1f2;
--brand-twitter-color: #fff;
--brand-twitter-bg-hover: #0096f2;
--brand-github-bg: #24292e;
--brand-github-color: #fff;
--brand-github-bg-hover: #000;
}
// Basic styling
.crayons-btn {
// Setup
@ -200,6 +214,39 @@
}
}
.crayons-btn--brand-apple {
--bg: var(--brand-apple-bg);
--bg-hover: var(--brand-apple-bg-hover);
--color: var(--brand-apple-color);
--color-hover: var(--brand-apple-color);
--bg-inverted: var(--brand-apple-bg);
--bg-inverted-hover: var(--brand-apple-bg-hover);
--color-inverted: var(--brand-apple-color);
--color-inverted-hover: var(--brand-apple-color);
}
.crayons-btn--brand-twitter {
--bg: var(--brand-twitter-bg);
--bg-hover: var(--brand-twitter-bg-hover);
--color: var(--brand-twitter-color);
--color-hover: var(--brand-twitter-color);
--bg-inverted: var(--brand-twitter-bg);
--bg-inverted-hover: var(--brand-twitter-bg-hover);
--color-inverted: var(--brand-twitter-color);
--color-inverted-hover: var(--brand-twitter-color);
}
.crayons-btn--brand-github {
--bg: var(--brand-github-bg);
--bg-hover: var(--brand-github-bg-hover);
--color: var(--brand-github-color);
--color-hover: var(--brand-github-color);
--bg-inverted: var(--brand-github-bg);
--bg-inverted-hover: var(--brand-github-bg-hover);
--color-inverted: var(--brand-github-color);
--color-inverted-hover: var(--brand-github-color);
}
// Icon alone
.crayons-btn--icon,
.crayons-btn--icon-rounded {

13
app/assets/stylesheets/signup-modal.scss
View file

@ -55,19 +55,6 @@
text-align: center;
margin: auto;
}
a {
display: inline-block;
margin: calc(2vw + 5px) 10px;
border-radius: 100px;
padding: calc(0.5vw + 4px) calc(1.5vw + 10px);
background: $purple;
color: $bold-blue;
img {
width: calc(1vw + 18px);
height: calc(1vw + 18px);
vertical-align: calc(-0.1em - 2px);
}
}
.mascot-image {
height: calc(7vw + 80px);
margin-top: calc(6vh - 10px);

6
app/views/devise/registrations/_registration_form.html.erb
View file

@ -74,9 +74,11 @@
<h1>Great to have you</h1>
<% end %>
<div class="links">
<%= render partial: "shared/authentication/providers_registration_form" %>
<div class="flex flex-col m:flex-row justify-center">
<%= render partial: "shared/authentication/providers_registration_form" %>
</div>
<p><em>We require social login to prevent abuse.</em></p>
<p class="pt-4"><em>We require social login to prevent abuse.</em></p>
</div>
<p>Open Source 😇</p>
<p>Free Forever ❤️</p>

10
app/views/layouts/_nav_menu.html.erb
View file

@ -20,15 +20,7 @@
<a href="<%= signout_confirm_path %>" class="crayons-link crayons-link--block" id="last-nav-link">Sign Out</a>
</div>
<% else %>
<div class="border-0 border-b-1 border-solid border-base-20 p-1">
<a
href="<%= sign_up_path %>"
id="first-nav-link"
class="crayons-link crayons-link--block fw-medium"
data-no-instant>
Sign In/Up
</a>
<div class="border-0 border-b-1 border-solid border-base-20 p-2 grid gap-2">
<%= render partial: "shared/authentication/providers_nav_menu" %>
</div>
<div class="p-1">

4
app/views/layouts/_signup_modal.html.erb
View file

@ -16,7 +16,9 @@
<%= SiteConfig.tagline %>
</p>
<%= render partial: "shared/authentication/providers_signup_modal" %>
<div class="flex flex-col l:flex-row justify-center">
<%= render partial: "shared/authentication/providers_signup_modal" %>
</div>
<p>
<em>We strive for transparency and don't collect excess data.</em>

5
app/views/shared/authentication/_providers_nav_menu.html.erb
View file

@ -1,8 +1,9 @@
<% authentication_enabled_providers.each do |provider| %>
<a
href="<%= provider.sign_in_path(state: "navbar_basic") %>"
class="crayons-link crayons-link--block pl-5"
class="crayons-btn crayons-btn--brand-<%= provider.provider_name %> crayons-btn--icon-left"
data-no-instant>
Via <%= provider.official_name %>
<%= inline_svg_tag("#{provider.provider_name}.svg", aria: true, class: "crayons-icon", title: provider.provider_name) %>
Sign In with <%= provider.official_name %>
</a>
<% end %>

7
app/views/shared/authentication/_providers_registration_form.html.erb
View file

@ -1,8 +1,9 @@
<% authentication_enabled_providers.each do |provider| %>
<a
href="<%= provider.sign_in_path(state: "join-club-page_basic") %>"
class="sign-up-link"
href="<%= provider.sign_in_path(state: "navbar_basic") %>"
class="crayons-btn crayons-btn--xl crayons-btn--brand-<%= provider.provider_name %> crayons-btn--icon-left m-1 whitespace-nowrap"
data-no-instant>
<%= inline_svg_tag("#{provider.provider_name}-logo.svg", class: "icon-img", aria: true, title: "#{provider.name} logo") %> Sign In with <%= provider.official_name %>
<%= inline_svg_tag("#{provider.provider_name}.svg", aria: true, class: "crayons-icon", title: provider.provider_name) %>
Sign In with <%= provider.official_name %>
</a>
<% end %>

5
app/views/shared/authentication/_providers_sidebar.html.erb
View file

@ -1,8 +1,9 @@
<% authentication_enabled_providers.each do |provider| %>
<a
href="<%= provider.sign_in_path(state: "navbar_basic") %>"
class="crayons-btn crayons-btn--l"
class="crayons-btn crayons-btn--l crayons-btn--brand-<%= provider.provider_name %> crayons-btn--icon-left"
data-no-instant>
Sign In With <%= provider.official_name %>
<%= inline_svg_tag("#{provider.provider_name}.svg", aria: true, class: "crayons-icon", title: provider.provider_name) %>
Sign In with <%= provider.official_name %>
</a>
<% end %>

8
app/views/shared/authentication/_providers_signup_modal.html.erb
View file

@ -1,11 +1,9 @@
<% authentication_enabled_providers.each do |provider| %>
<a
href="<%= provider.sign_in_path(state: "signup-modal") %>"
class="sign-up-link cta"
class="crayons-btn crayons-btn--xl crayons-btn--brand-<%= provider.provider_name %> crayons-btn--icon-left m-1"
data-no-instant>
<img
src="<%= asset_path("#{provider.provider_name}-logo.svg") %>"
class="icon-img"
alt="<%= provider.official_name %> logo" /> Sign In With <%= provider.official_name %>
<%= inline_svg_tag("#{provider.provider_name}.svg", aria: true, class: "crayons-icon", title: provider.provider_name) %>
Sign In with <%= provider.official_name %>
</a>
<% end %>

4
app/views/users/_account.html.erb
View file

@ -1,4 +1,6 @@
<%= render "users/additional_authentication" %>
<div class="crayons-card mb-6 p-5">
<%= render "users/additional_authentication" %>
</div>
<div class="crayons-card mb-6 p-6 grid gap-6">
<header>

2
app/views/users/_additional_authentication.html.erb
View file

@ -2,7 +2,7 @@
<% unless @user.identities.exists?(provider: provider.provider_name) %>
<a
href="<%= provider.sign_in_path(state: "profile") %>"
class="crayons-btn crayons-btn--outlined mr-2"
class="crayons-btn crayons-btn--icon-left crayons-btn--brand-<%= provider.provider_name %> m-1"
data-no-instant>
<%= inline_svg_tag(
"#{provider.provider_name}.svg",

4
app/views/users/_profile.html.erb
View file

@ -1,6 +1,8 @@
<%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", defer: true %>
<%= render "users/additional_authentication" %>
<div class="crayons-card mb-6 p-5">
<%= render "users/additional_authentication" %>
</div>
<div class="crayons-card mb-6 p-6 grid gap-6">
<div class="flex items-center">

29
spec/system/authentication/user_logs_in_with_github_spec.rb
View file

@ -1,7 +1,7 @@
require "rails_helper"
RSpec.describe "Authenticating with GitHub" do
let(:sign_in_link) { "Sign In With GitHub" }
let(:sign_in_link) { "Sign In with GitHub" }
before { omniauth_mock_github_payload }
@ -10,13 +10,13 @@ RSpec.describe "Authenticating with GitHub" do
it "creates a new user" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.to change(User, :count).by(1)
end
it "logs in and redirects to the onboarding" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(page).to have_current_path("/onboarding", ignore_query: true)
expect(page.html).to include("onboarding-container")
@ -24,7 +24,7 @@ RSpec.describe "Authenticating with GitHub" do
it "remembers the user" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
user = User.last
@ -40,7 +40,7 @@ RSpec.describe "Authenticating with GitHub" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.to change(User, :count).by(1)
expect(page).to have_current_path("/onboarding", ignore_query: true)
@ -66,17 +66,16 @@ RSpec.describe "Authenticating with GitHub" do
it "does not create a new user" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.not_to change(User, :count)
end
it "does not log in" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(page).to have_current_path("/users/sign_in")
expect(page).to have_link("Sign In/Up")
expect(page).to have_link("Via GitHub")
expect(page).to have_link(sign_in_link)
expect(page).to have_link("All about #{ApplicationConfig['COMMUNITY_NAME']}")
end
@ -88,7 +87,7 @@ RSpec.describe "Authenticating with GitHub" do
omniauth_setup_authentication_error(error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
args = omniauth_failure_args(error, "github", params)
expect(DatadogStatsClient).to have_received(:increment).with(
@ -104,7 +103,7 @@ RSpec.describe "Authenticating with GitHub" do
omniauth_setup_authentication_error(error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
args = omniauth_failure_args(error, "github", params)
expect(DatadogStatsClient).to have_received(:increment).with(
@ -117,7 +116,7 @@ RSpec.describe "Authenticating with GitHub" do
omniauth_setup_authentication_error(error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
args = omniauth_failure_args(error, "github", params)
expect(DatadogStatsClient).to have_received(:increment).with(
@ -135,13 +134,13 @@ RSpec.describe "Authenticating with GitHub" do
it "does not create a new user" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.not_to change(User, :count)
end
it "redirects to the registration page" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(page).to have_current_path("/users/sign_up")
end
@ -150,7 +149,7 @@ RSpec.describe "Authenticating with GitHub" do
allow(Rails.logger).to receive(:error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(Rails.logger).to have_received(:error).at_least(3).times
end

29
spec/system/authentication/user_logs_in_with_twitter_spec.rb
View file

@ -1,7 +1,7 @@
require "rails_helper"
RSpec.describe "Authenticating with Twitter" do
let(:sign_in_link) { "Sign In With Twitter" }
let(:sign_in_link) { "Sign In with Twitter" }
before { omniauth_mock_twitter_payload }
@ -10,13 +10,13 @@ RSpec.describe "Authenticating with Twitter" do
it "creates a new user" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.to change(User, :count).by(1)
end
it "logs in and redirects to the onboarding" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(page).to have_current_path("/onboarding?referrer=none")
expect(page.html).to include("onboarding-container")
@ -24,7 +24,7 @@ RSpec.describe "Authenticating with Twitter" do
it "remembers the user" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
user = User.last
@ -40,7 +40,7 @@ RSpec.describe "Authenticating with Twitter" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.to change(User, :count).by(1)
expect(page).to have_current_path("/onboarding?referrer=none")
@ -62,17 +62,16 @@ RSpec.describe "Authenticating with Twitter" do
it "does not create a new user" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.not_to change(User, :count)
end
it "does not log in" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(page).to have_current_path("/users/sign_in")
expect(page).to have_link("Sign In/Up")
expect(page).to have_link("Via Twitter")
expect(page).to have_link(sign_in_link)
expect(page).to have_link("All about #{ApplicationConfig['COMMUNITY_NAME']}")
end
@ -84,7 +83,7 @@ RSpec.describe "Authenticating with Twitter" do
omniauth_setup_authentication_error(error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
args = omniauth_failure_args(error, "twitter", "{}")
expect(DatadogStatsClient).to have_received(:increment).with(
@ -100,7 +99,7 @@ RSpec.describe "Authenticating with Twitter" do
omniauth_setup_authentication_error(error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
args = omniauth_failure_args(error, "twitter", "{}")
expect(DatadogStatsClient).to have_received(:increment).with(
@ -113,7 +112,7 @@ RSpec.describe "Authenticating with Twitter" do
omniauth_setup_authentication_error(error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
args = omniauth_failure_args(error, "twitter", "{}")
expect(DatadogStatsClient).to have_received(:increment).with(
@ -131,13 +130,13 @@ RSpec.describe "Authenticating with Twitter" do
it "does not create a new user" do
expect do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
end.not_to change(User, :count)
end
it "redirects to the registration page" do
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(page).to have_current_path("/users/sign_up")
end
@ -146,7 +145,7 @@ RSpec.describe "Authenticating with Twitter" do
allow(Rails.logger).to receive(:error)
visit root_path
click_link sign_in_link
click_link(sign_in_link, match: :first)
expect(Rails.logger).to have_received(:error).at_least(3).times
end

4
spec/system/homepage/user_visits_homepage_spec.rb
View file

@ -15,8 +15,8 @@ RSpec.describe "User visits a homepage", type: :system do
it "shows the sign-in block" do
visit "/"
within ".signin-cta-widget" do
expect(page).to have_text("Sign In With Twitter")
expect(page).to have_text("Sign In With GitHub")
expect(page).to have_text("Sign In with Twitter")
expect(page).to have_text("Sign In with GitHub")
end
end