From 3377b5b69e36250747adc1a9d658eefa772c8a82 Mon Sep 17 00:00:00 2001 From: Lisa Sy Date: Tue, 13 Oct 2020 13:43:29 -0700 Subject: [PATCH] Update [authentication] in /admin/config (#10748) * Write up new accordion view in markup * Add inline SVG and edit padding of form * Fix padding * Remove extraneous buttons for current draft --- app/assets/stylesheets/admin.scss | 24 ++ app/helpers/application_helper.rb | 4 +- app/views/admin/configs/show.html.erb | 265 ++++++++++++------ .../_providers_registration_form.html.erb | 9 +- docs/technical-overview/architecture.md | 4 +- docs/technical-overview/compatibility.md | 25 +- spec/fixtures/files/300x100.svg | 8 +- 7 files changed, 242 insertions(+), 97 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 95c4754a0..27d64db9b 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -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); +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 59440d4f6..60d62675c 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -285,10 +285,10 @@ module ApplicationHelper def admin_config_label(method, content = nil) content ||= raw("#{method.to_s.humanize}") if method.to_sym.in?(VerifySetupCompleted::MANDATORY_CONFIGS) - content = safe_join([content, raw("Required")]) + content = safe_join([content, raw("Required")]) 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 diff --git a/app/views/admin/configs/show.html.erb b/app/views/admin/configs/show.html.erb index 6fe8988b1..fb35ccc2a 100644 --- a/app/views/admin/configs/show.html.erb +++ b/app/views/admin/configs/show.html.erb @@ -124,85 +124,194 @@ expanded: "false" } %>
-
- <%= admin_config_label :invite_only_mode %> - <%= f.check_box :invite_only_mode, checked: SiteConfig.invite_only_mode, data: { action: "config#disableAuthenticationOptions", target: "config.inviteOnlyMode" } %> -
<%= Constants::SiteConfig::DETAILS[:invite_only_mode][:description] %>
-
-
- <%= admin_config_label :allow_email_password_registration %> - <%= f.check_box :allow_email_password_registration, checked: SiteConfig.allow_email_password_registration %> -
<%= Constants::SiteConfig::DETAILS[:allow_email_password_registration][:description] %>
-
-
- <%= admin_config_label :allow_email_password_login %> - <%= f.check_box :allow_email_password_login, checked: SiteConfig.allow_email_password_login %> -
<%= Constants::SiteConfig::DETAILS[:allow_email_password_login][:description] %>
-
-
- <%= 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" } %> -
<%= Constants::SiteConfig::DETAILS[:authentication_providers][:description] %>
-
+
+

+ General +

+
+
+ <%= f.check_box :invite_only_mode, checked: SiteConfig.invite_only_mode, data: { action: "config#disableAuthenticationOptions", target: "config.inviteOnlyMode" }, class: "crayons-checkbox" %> +
+ <%= admin_config_label :invite_only_mode %> +

+ <%= Constants::SiteConfig::DETAILS[:invite_only_mode][:description] %> +

+
+
+
+
+
+

+ Authentication methods +

+
+ <%= admin_config_label :authentication_providers %> +

+ <%= Constants::SiteConfig::DETAILS[:authentication_providers][:description] %> +

+ <%= 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" } %> +
+ +
+
+ <%= inline_svg_tag("email.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %> +
+
+
+

+ Email address and password +

+
+
+
+
+ <%= f.check_box :allow_email_password_login, checked: SiteConfig.allow_email_password_login, class: "crayons-checkbox" %> +
+ <%= admin_config_label :allow_email_password_login %> +

+ <%= Constants::SiteConfig::DETAILS[:allow_email_password_login][:description] %> +

+
+
+
+ <%= f.check_box :allow_email_password_registration, checked: SiteConfig.allow_email_password_registration, class: "crayons-checkbox" %> +
+ <%= admin_config_label :allow_email_password_registration %> +

+ <%= Constants::SiteConfig::DETAILS[:allow_email_password_registration][:description] %> +

+
+
+
+
+
+
+ +
+
+ <%= inline_svg_tag("twitter.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %> +
+
+
+

+ Twitter +

+
+
+
+
+ <%= admin_config_label :twitter_key %> +

+ <%= Constants::SiteConfig::DETAILS[:twitter_key][:description] %> +

+ <%= f.text_field :twitter_key, + class: "crayons-textfield", + value: SiteConfig.twitter_key, + placeholder: Constants::SiteConfig::DETAILS[:twitter_key][:placeholder] %> +
+ +
+ <%= admin_config_label :twitter_secret %> +

+ <%= Constants::SiteConfig::DETAILS[:twitter_secret][:description] %> +

+ <%= f.text_field :twitter_secret, + class: "crayons-textfield", + value: SiteConfig.twitter_secret, + placeholder: Constants::SiteConfig::DETAILS[:twitter_secret][:placeholder] %> +

+
+
+
+
+ +
+
+ <%= inline_svg_tag("github.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %> +
+
+
+

+ Github +

+
+
+
+
+ <%= admin_config_label :github_key %> +

+ <%= Constants::SiteConfig::DETAILS[:github_key][:description] %> +

+ <%= f.text_field :github_key, + class: "crayons-textfield", + value: SiteConfig.github_key, + placeholder: Constants::SiteConfig::DETAILS[:github_key][:placeholder] %> + +
+
+ <%= admin_config_label :github_secret %> +

+ <%= Constants::SiteConfig::DETAILS[:github_secret][:description] %> +

+ <%= f.text_field :github_secret, + class: "crayons-textfield", + value: SiteConfig.github_secret, + placeholder: Constants::SiteConfig::DETAILS[:github_secret][:placeholder] %> +
+
+
+
+
+ +
+
+ <%= inline_svg_tag("facebook.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %> +
+
+
+

+ Facebook +

+
+
+
+
+ <%= admin_config_label :facebook_key %> +

+ <%= Constants::SiteConfig::DETAILS[:facebook_key][:description] %> +

+ <%= f.text_field :facebook_key, + class: "crayons-textfield", + value: SiteConfig.facebook_key, + placeholder: Constants::SiteConfig::DETAILS[:facebook_key][:placeholder] %> +
+ +
+ <%= admin_config_label :facebook_secret %> +

+ <%= Constants::SiteConfig::DETAILS[:facebook_secret][:description] %> +

+ <%= f.text_field :facebook_secret, + class: "crayons-textfield", + value: SiteConfig.facebook_secret, + placeholder: Constants::SiteConfig::DETAILS[:facebook_secret][:placeholder] %> +
+
+
+
+
+
- Notice: Changing authentication keys will not take affect until devops restarts the app (about once per day). This will soon be instant. -
-
- <%= admin_config_label :twitter_key %> - <%= f.text_field :twitter_key, - class: "form-control", - value: SiteConfig.twitter_key, - placeholder: Constants::SiteConfig::DETAILS[:twitter_key][:placeholder] %> -
<%= Constants::SiteConfig::DETAILS[:twitter_key][:description] %>
-
-
- <%= admin_config_label :twitter_secret %> - <%= f.text_field :twitter_secret, - class: "form-control", - value: SiteConfig.twitter_secret, - placeholder: Constants::SiteConfig::DETAILS[:twitter_secret][:placeholder] %> -
<%= Constants::SiteConfig::DETAILS[:twitter_secret][:description] %>
-
-
- <%= admin_config_label :github_key %> - <%= f.text_field :github_key, - class: "form-control", - value: SiteConfig.github_key, - placeholder: Constants::SiteConfig::DETAILS[:github_key][:placeholder] %> -
<%= Constants::SiteConfig::DETAILS[:github_key][:description] %>
-
-
- <%= admin_config_label :github_secret %> - <%= f.text_field :github_secret, - class: "form-control", - value: SiteConfig.github_secret, - placeholder: Constants::SiteConfig::DETAILS[:github_secret][:placeholder] %> -
<%= Constants::SiteConfig::DETAILS[:github_secret][:description] %>
-
-
- <%= admin_config_label :facebook_key %> - <%= f.text_field :facebook_key, - class: "form-control", - value: SiteConfig.facebook_key, - placeholder: Constants::SiteConfig::DETAILS[:facebook_key][:placeholder] %> -
<%= Constants::SiteConfig::DETAILS[:facebook_key][:description] %>
-
-
- <%= admin_config_label :facebook_secret %> - <%= f.text_field :facebook_secret, - class: "form-control", - value: SiteConfig.facebook_secret, - placeholder: Constants::SiteConfig::DETAILS[:facebook_secret][:placeholder] %> -
<%= Constants::SiteConfig::DETAILS[:facebook_secret][:description] %>
+ Changing authentication keys will not take affect until this forem instance is restarted.
diff --git a/app/views/shared/authentication/_providers_registration_form.html.erb b/app/views/shared/authentication/_providers_registration_form.html.erb index b5dc971e3..68d8bc5cf 100644 --- a/app/views/shared/authentication/_providers_registration_form.html.erb +++ b/app/views/shared/authentication/_providers_registration_form.html.erb @@ -9,10 +9,9 @@ <% 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 %> diff --git a/docs/technical-overview/architecture.md b/docs/technical-overview/architecture.md index 02b0cdf98..3acb5af13 100644 --- a/docs/technical-overview/architecture.md +++ b/docs/technical-overview/architecture.md @@ -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 diff --git a/docs/technical-overview/compatibility.md b/docs/technical-overview/compatibility.md index d427721cd..069b65b32 100644 --- a/docs/technical-overview/compatibility.md +++ b/docs/technical-overview/compatibility.md @@ -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 @@ -19,4 +28,6 @@ The canonical meta tags which are expected to be present as a component of valid ``` -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). diff --git a/spec/fixtures/files/300x100.svg b/spec/fixtures/files/300x100.svg index e455796e5..c0c7e364f 100644 --- a/spec/fixtures/files/300x100.svg +++ b/spec/fixtures/files/300x100.svg @@ -1,6 +1,6 @@ - - - 300×100 - + + + 300×100 +