From a33b51dc3ab06bb40d0cb864122a8b25337074f8 Mon Sep 17 00:00:00 2001 From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com> Date: Wed, 14 Apr 2021 13:19:03 -0700 Subject: [PATCH] auth styling --- assets/translations/en-us.yaml | 29 ++++++++++++----------- components/InfoBox.vue | 32 ++++++++++++++++++++++++-- edit/auth/github.vue | 31 +++++++++++++++++++------ edit/auth/googleoauth.vue | 6 ++--- pages/c/_cluster/auth/config/index.vue | 13 +++++++++-- utils/auth.js | 3 ++- 6 files changed, 85 insertions(+), 29 deletions(-) diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml index d504193240..fe3e30bf9d 100644 --- a/assets/translations/en-us.yaml +++ b/assets/translations/en-us.yaml @@ -179,13 +179,13 @@ authConfig: homepage: label: Homepage URL instruction: 'Fill in the form with these values:' - prefix: |- -
  • Click here to go to GitHub application settings in a new window.
    • -
  • Click on the "OAuth Apps" tab.
    • -
  • Click the "New OAuth App" button.
    • - suffix: |- -
  • Click "Register application"
    • -
  • Copy and paste the Client ID and Client Secret of your newly created OAuth app into the fields below
    • + prefix: + 1:
  • Click here to go to GitHub application settings in a new window.
    • + 2:
  • Click on the "OAuth Apps" tab.
    • + 3:
  • Click the "New OAuth App" button.
    • + suffix: + 1:
  • Click "Register application"
    • + 2:
  • Copy and paste the Client ID and Client Secret of your newly created OAuth app into the fields below
    • host: label: GitHub Enterprise Host placeholder: e.g. github.mycompany.example @@ -207,7 +207,7 @@ authConfig: tip: The Service Account Credentials JSON can be found in the service accounts section of the Google API developers console. steps: 1: - title: 'Step One: For standard Google, click here to go applications settings in a new window' + title: 'Click here to open applications settings in a new window' body: 1: Login to your account. Navigate to "APIs & Services" and then select "OAuth consent screen". 2: 'Authorized domains:' @@ -216,7 +216,7 @@ authConfig: 5: 'Click on "Save".' topPrivateDomain: 'Top private domain of:' 2: - title: 'Step Two: Navigate to the "Credentials" tab to create your OAuth client ID' + title: 'Navigate to the "Credentials" tab to create your OAuth client ID' body: 1: 'Select the "Create Credentials" dropdown, and select "OAuth clientID", then select "Web application".' 2: 'Authorized Javascript origins:' @@ -224,7 +224,7 @@ authConfig: 4: 'Click "Create", and then click on the "Download JSON" button.' 5: 'Upload the downloaded JSON file in the OAuth credentials box.' 3: - title: 'Step Three: Create Service Account credentials' + title: 'Create Service Account credentials' introduction: 'Follow this guide to:' body: 1: Create a service account. @@ -310,9 +310,10 @@ authConfig: tokenEndpoint: Token Endpoint authEndpoint: Auth Endpoint stateBanner: - disabled: '{provider} is currently disabled.' - enabled: '{provider} is currently enabled.' + disabled: 'The {provider} authentication provider is currently disabled.' + enabled: 'The {provider} authentication provider is currently enabled.' testAndEnable: Test and Enable Authentication + noneEnabled: Local Authentication is always enabled, but you may select another additional authentication provider from those shown below. authGroups: actions: @@ -3734,8 +3735,8 @@ typeLabel: } management.cattle.io.authconfig: |- {count, plural, - one { Auth Provider } - other { Auth Providers } + one { Authentication Provider } + other { Authentication Providers } } management.cattle.io.feature: |- {count, plural, diff --git a/components/InfoBox.vue b/components/InfoBox.vue index b92bf7941e..444de1915f 100644 --- a/components/InfoBox.vue +++ b/components/InfoBox.vue @@ -1,9 +1,19 @@ @@ -18,6 +28,24 @@ export default {}; border-radius: var(--border-radius); flex-grow: 1; flex-basis: 0; + position:relative; + + .stepped { + padding-left: 40px; + } + + .step-number { + border-radius: 50%; + background: var(--primary); + width: 1.5em; + height: 1.5em; + line-height: 1.5em; + text-align: center; + position: absolute; + top: 20px; + left: -.75em; + color: var(--primary-text) + } .info-column:not(:last-child) { border-right: 1px solid var(--tabbed-border); diff --git a/edit/auth/github.vue b/edit/auth/github.vue index 3471cd9841..e0577e3ceb 100644 --- a/edit/auth/github.vue +++ b/edit/auth/github.vue @@ -2,7 +2,6 @@ import Loading from '@/components/Loading'; import CreateEditView from '@/mixins/create-edit-view'; import CruResource from '@/components/CruResource'; -import InfoBox from '@/components/InfoBox'; import RadioGroup from '@/components/form/RadioGroup'; import LabeledInput from '@/components/form/LabeledInput'; import Banner from '@/components/Banner'; @@ -12,6 +11,7 @@ import { NORMAN, MANAGEMENT } from '@/config/types'; import { findBy } from '@/utils/array'; import AuthConfig from '@/mixins/auth-config'; import AuthBanner from '@/components/auth/AuthBanner'; +import InfoBox from '@/components/InfoBox'; const NAME = 'github'; @@ -19,13 +19,13 @@ export default { components: { Loading, CruResource, - InfoBox, RadioGroup, LabeledInput, Banner, CopyToClipboard, AllowedPrincipals, - AuthBanner + AuthBanner, + InfoBox }, mixins: [CreateEditView, AuthConfig], @@ -184,9 +184,15 @@ export default { - -