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

Update [authentication] in /admin/config (#10748)

Browse source 
* Write up new accordion view in markup

* Add inline SVG and edit padding of form

* Fix padding

* Remove extraneous buttons for current draft
This commit is contained in:
Lisa Sy 2020-10-13 13:43:29 -07:00 • committed by GitHub
parent 01414a5120
commit 3377b5b69e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 242 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/assets/stylesheets/admin.scss
View file

@ -3,6 +3,11 @@
@import 'variables';
@import 'scaffolds';
// overriding Bootstrap styles
label {
margin-bottom: 0 !important;
}
.pagination {
justify-content: right;
@ -101,3 +106,22 @@
width: 24px;
height: 24px;
}
.config-authentication__item {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: var(--su-4);
margin-bottom: var(--su-6);
&--icon,
&--label {
padding-top: var(--su-4);
padding-bottom: var(--su-4);
}
}
.config-authentication-form {
display: flex;
flex-direction: column;
gap: var(--su-4);
}

4
app/helpers/application_helper.rb
View file

@ -285,10 +285,10 @@ module ApplicationHelper
def admin_config_label(method, content = nil)
content ||= raw("<span>#{method.to_s.humanize}</span>")
if method.to_sym.in?(VerifySetupCompleted::MANDATORY_CONFIGS)
content = safe_join([content, raw("<span class='site-config__required'>Required</span>")])
content = safe_join([content, raw("<span class='crayons-indicator'>Required</span>")])
end
tag.label(content, class: "site-config__label", for: "site_config_#{method}")
tag.label(content, class: "site-config__label crayons-field__label", for: "site_config_#{method}")
end
# rubocop:enable Rails/OutputSafety
end

265
app/views/admin/configs/show.html.erb
View file

@ -124,85 +124,194 @@
expanded: "false"
} %>
<div id="authenticationBodyContainer" class="card-body collapse hide" aria-labelledby="authenticationBodyContainer">
<div class="form-group">
<%= admin_config_label :invite_only_mode %>
<%= f.check_box :invite_only_mode, checked: SiteConfig.invite_only_mode, data: { action: "config#disableAuthenticationOptions", target: "config.inviteOnlyMode" } %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:invite_only_mode][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :allow_email_password_registration %>
<%= f.check_box :allow_email_password_registration, checked: SiteConfig.allow_email_password_registration %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:allow_email_password_registration][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :allow_email_password_login %>
<%= f.check_box :allow_email_password_login, checked: SiteConfig.allow_email_password_login %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:allow_email_password_login][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :authentication_providers %>
<%= select_tag "site_config[authentication_providers]",
options_from_collection_for_select(
authentication_available_providers,
:provider_name,
:official_name,
authentication_enabled_providers.map(&:provider_name),
),
multiple: true,
class: "form-control selectpicker",
data: { target: "config.authenticationProviders" } %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:authentication_providers][:description] %></div>
</div>
<section class="mb-6">
<h3 class="crayons-subtitle-3 mb-3">
General
</h3>
<div class="form-group">
<div class="crayons-field--checkbox">
<%= f.check_box :invite_only_mode, checked: SiteConfig.invite_only_mode, data: { action: "config#disableAuthenticationOptions", target: "config.inviteOnlyMode" }, class: "crayons-checkbox" %>
<div>
<%= admin_config_label :invite_only_mode %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:invite_only_mode][:description] %>
</p>
</div>
</div>
</div>
</section>
<section>
<h3 class="crayons-subtitle-3 mb-3">
Authentication methods
</h3>
<div class="form-group">
<%= admin_config_label :authentication_providers %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:authentication_providers][:description] %>
</p>
<%= select_tag "site_config[authentication_providers]",
options_from_collection_for_select(
authentication_available_providers,
:provider_name,
:official_name,
authentication_enabled_providers.map(&:provider_name),
),
multiple: true,
class: "form-control selectpicker",
data: { target: "config.authenticationProviders" } %>
</div>
<section class="config-authentication__item">
<figure class="config-authentication__item--icon">
<%= inline_svg_tag("email.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
</figure>
<div class="config-authentication__item--container">
<div class="config-authentication__item--label">
<p class="fw-medium">
Email address and password
</p>
</div>
<div class="config-authentication__item--body">
<fieldset class="config-authentication-form">
<div class="crayons-field--checkbox">
<%= f.check_box :allow_email_password_login, checked: SiteConfig.allow_email_password_login, class: "crayons-checkbox" %>
<div>
<%= admin_config_label :allow_email_password_login %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:allow_email_password_login][:description] %>
</p>
</div>
</div>
<div class="crayons-field--checkbox">
<%= f.check_box :allow_email_password_registration, checked: SiteConfig.allow_email_password_registration, class: "crayons-checkbox" %>
<div>
<%= admin_config_label :allow_email_password_registration %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:allow_email_password_registration][:description] %>
</p>
</div>
</div>
</fieldset>
</div>
</div>
</section>
<section class="config-authentication__item">
<figure class="config-authentication__item--icon">
<%= inline_svg_tag("twitter.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
</figure>
<div class="config-authentication__item--container">
<div class="config-authentication__item--label">
<p class="fw-medium">
Twitter
</p>
</div>
<div class="config-authentication__item--body">
<fieldset class="config-authentication-form">
<div class="crayons-field">
<%= admin_config_label :twitter_key %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:twitter_key][:description] %>
</p>
<%= f.text_field :twitter_key,
class: "crayons-textfield",
value: SiteConfig.twitter_key,
placeholder: Constants::SiteConfig::DETAILS[:twitter_key][:placeholder] %>
</div>
<div class="crayons-field">
<%= admin_config_label :twitter_secret %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:twitter_secret][:description] %>
<p>
<%= f.text_field :twitter_secret,
class: "crayons-textfield",
value: SiteConfig.twitter_secret,
placeholder: Constants::SiteConfig::DETAILS[:twitter_secret][:placeholder] %>
</div>
</fieldset>
</div>
</div>
</section>
<section class="config-authentication__item">
<figure class="config-authentication__item--icon">
<%= inline_svg_tag("github.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
</figure>
<div class="config-authentication__item--container">
<div class="config-authentication__item--label">
<p class="fw-medium">
Github
</p>
</div>
<div class="config-authentication__item--body">
<fieldset class="config-authentication-form">
<div class="crayons-field">
<%= admin_config_label :github_key %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:github_key][:description] %>
</p>
<%= f.text_field :github_key,
class: "crayons-textfield",
value: SiteConfig.github_key,
placeholder: Constants::SiteConfig::DETAILS[:github_key][:placeholder] %>
</div>
<div class="crayons-field">
<%= admin_config_label :github_secret %>
<p class="config-authentication__row--subtitle">
<%= Constants::SiteConfig::DETAILS[:github_secret][:description] %>
</p>
<%= f.text_field :github_secret,
class: "crayons-textfield",
value: SiteConfig.github_secret,
placeholder: Constants::SiteConfig::DETAILS[:github_secret][:placeholder] %>
</div>
</fieldset>
</div>
</div>
</section>
<section class="config-authentication__item">
<figure class="config-authentication__item--icon">
<%= inline_svg_tag("facebook.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
</figure>
<div class="config-authentication__item--container">
<div class="config-authentication__item--label">
<p class="fw-medium">
Facebook
</p>
</div>
<div class="config-authentication__item--body">
<fieldset class="config-authentication-form">
<div class="crayons-field">
<%= admin_config_label :facebook_key %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:facebook_key][:description] %>
</p>
<%= f.text_field :facebook_key,
class: "crayons-textfield",
value: SiteConfig.facebook_key,
placeholder: Constants::SiteConfig::DETAILS[:facebook_key][:placeholder] %>
</div>
<div class="crayons-field">
<%= admin_config_label :facebook_secret %>
<p class="crayons-field__description">
<%= Constants::SiteConfig::DETAILS[:facebook_secret][:description] %>
</p>
<%= f.text_field :facebook_secret,
class: "crayons-textfield",
value: SiteConfig.facebook_secret,
placeholder: Constants::SiteConfig::DETAILS[:facebook_secret][:placeholder] %>
</div>
</fieldset>
</div>
</div>
</section>
</section>
<div class="crayons-notice crayons-notice--info mb-4">
Notice: Changing authentication keys will not take affect until devops restarts the app (about once per day). This will soon be instant.
</div>
<div class="form-group">
<%= admin_config_label :twitter_key %>
<%= f.text_field :twitter_key,
class: "form-control",
value: SiteConfig.twitter_key,
placeholder: Constants::SiteConfig::DETAILS[:twitter_key][:placeholder] %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:twitter_key][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :twitter_secret %>
<%= f.text_field :twitter_secret,
class: "form-control",
value: SiteConfig.twitter_secret,
placeholder: Constants::SiteConfig::DETAILS[:twitter_secret][:placeholder] %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:twitter_secret][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :github_key %>
<%= f.text_field :github_key,
class: "form-control",
value: SiteConfig.github_key,
placeholder: Constants::SiteConfig::DETAILS[:github_key][:placeholder] %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:github_key][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :github_secret %>
<%= f.text_field :github_secret,
class: "form-control",
value: SiteConfig.github_secret,
placeholder: Constants::SiteConfig::DETAILS[:github_secret][:placeholder] %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:github_secret][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :facebook_key %>
<%= f.text_field :facebook_key,
class: "form-control",
value: SiteConfig.facebook_key,
placeholder: Constants::SiteConfig::DETAILS[:facebook_key][:placeholder] %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:facebook_key][:description] %></div>
</div>
<div class="form-group">
<%= admin_config_label :facebook_secret %>
<%= f.text_field :facebook_secret,
class: "form-control",
value: SiteConfig.facebook_secret,
placeholder: Constants::SiteConfig::DETAILS[:facebook_secret][:placeholder] %>
<div class="alert alert-info"><%= Constants::SiteConfig::DETAILS[:facebook_secret][:description] %></div>
Changing authentication keys will not take affect until this forem instance is restarted.
</div>
</div>
</div>

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

@ -9,10 +9,9 @@
</a>
<% end %>
<% if params[:state] == "new-user" && SiteConfig.allow_email_password_registration %>
<%= link_to inline_svg_tag("email.svg", aria: true, class: "crayons-icon", title: "email") + "Sign up with Email",
request.params.merge(state: "email_signup"),
class: "crayons-btn crayons-btn--l crayons-btn--brand-email crayons-btn--icon-left whitespace-nowrap",
data: {no_instant: ""}
%>
<%= link_to "#{inline_svg_tag('email.svg', aria: true, class: 'crayons-icon', title: 'email')}Sign up with Email",
request.params.merge(state: "email_signup"),
class: "crayons-btn crayons-btn--l crayons-btn--brand-email crayons-btn--icon-left whitespace-nowrap",
data: { no_instant: "" } %>
<% end %>
</div>

4
docs/technical-overview/architecture.md
View file

@ -114,7 +114,9 @@ content.
## Collections (or series)
Although the source code refers to them as "collections" groups of articles are referred to, throughout the user interface, as "series". They represent a collection of articles relating to the same topic, indeed, a series.
Although the source code refers to them as "collections" groups of articles are
referred to, throughout the user interface, as "series". They represent a
collection of articles relating to the same topic, indeed, a series.
## Comments

25
docs/technical-overview/compatibility.md
View file

@ -1,17 +1,26 @@
# Compatibility
To go along with effective administration and putting user security and well-being first, for a Forem to be most useful, it maximizes its technical compatibility.
To go along with effective administration and putting user security and
well-being first, for a Forem to be most useful, it maximizes its technical
compatibility.
Compatability means:
- Staying updated. We need to maintain overall compatability by keeping the ecosystem close to the latest version as proactively as we can.
- Maintaining all programmatic interfaces, whether they be the [API](https://api.forem.com) or Forem meta tags which can be consumed for Forem validation.
- Maintaining human interfaces which allow users to find where they need to go and conduct all necessary customizations.
- Maintaining great performance such that the web-based Forem ecosystem can provide a great experience in all network conditions and in comparison to more closed ecosystems.
- Staying updated. We need to maintain overall compatability by keeping the
ecosystem close to the latest version as proactively as we can.
- Maintaining all programmatic interfaces, whether they be the
[API](https://api.forem.com) or Forem meta tags which can be consumed for
Forem validation.
- Maintaining human interfaces which allow users to find where they need to go
and conduct all necessary customizations.
- Maintaining great performance such that the web-based Forem ecosystem can
provide a great experience in all network conditions and in comparison to more
closed ecosystems.
## Meta tags
The canonical meta tags which are expected to be present as a component of validation are as follows:
The canonical meta tags which are expected to be present as a component of
validation are as follows:
```html
<meta property="forem:name" content="My great friends" />
@ -19,4 +28,6 @@ The canonical meta tags which are expected to be present as a component of valid
<meta property="forem:domain" content="mygreatfriends.com" />
```
This list may evolve over time. If you want to propose a new meta tag which could improve the efficacy of an ecosystem app, please feel free to open an issue or a discussion on [forem.dev](https://forem.dev).
This list may evolve over time. If you want to propose a new meta tag which
could improve the efficacy of an ecosystem app, please feel free to open an
issue or a discussion on [forem.dev](https://forem.dev).

8
spec/fixtures/files/300x100.svg vendored
View file

@ -1,6 +1,6 @@
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<path fill="#dedede" stroke="#555" stroke-width="2" d="M2 2h296v96H2z"/>
<text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555">
300×100
</text>
<path fill="#dedede" stroke="#555" stroke-width="2" d="M2 2h296v96H2z"/>
<text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555">
300×100
</text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 318 B