auth styling

assets/translations/en-us.yaml

@@ -179,13 +179,13 @@ authConfig:
       homepage:
         label: Homepage URL
       instruction: 'Fill in the form with these values:'
-      prefix: |-
-        <li><a href="{baseUrl}/settings/developers" target="_blank" rel="noopener noreferrer nofollow">Click here</a> to go to GitHub application settings in a new window.</li>
-        <li>Click on the "OAuth Apps" tab.</li>
-        <li>Click the "New OAuth App" button.</li>
-      suffix: |-
-        <li>Click "Register application"</li>
-        <li>Copy and paste the Client ID and Client Secret of your newly created OAuth app into the fields below</li>
+      prefix: 
+        1: <li><a href="{baseUrl}/settings/developers" target="_blank" rel="noopener noreferrer nofollow">Click here</a> to go to GitHub application settings in a new window.</li>
+        2: <li>Click on the "OAuth Apps" tab.</li>
+        3: <li>Click the "New OAuth App" button.</li>
+      suffix: 
+        1: <li>Click "Register application"</li>
+        2: <li>Copy and paste the Client ID and Client Secret of your newly created OAuth app into the fields below</li>
     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 <a href="https://console.developers.google.com/apis/credentials" target="_blank" rel="noopener noreferrer nofollow">here</a> to go applications settings in a new window'
+        title: 'Click <a href="https://console.developers.google.com/apis/credentials" target="_blank" rel="noopener noreferrer nofollow">here</a> 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 <a href="https://rancher.com/docs/rancher/v2.x/en/admin-settings/authentication/google/#creating-service-account-credentials" target="_blank" rel="noopener noreferrer nofollow">this</a> 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,

components/InfoBox.vue

@@ -1,9 +1,19 @@
 <script>
-export default {};
+export default {
+  props: {
+    step: {
+      type:    Number,
+      default: null
+    }
+  }
+};
 </script>
 
 <template>
-  <div class="info-box">
+  <div :class="{'stepped': !!step}" class="info-box">
+    <div v-if="step" class="step-number">
+      {{ step }}
+    </div>
     <slot />
   </div>
 </template>
@@ -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);

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 {
           </div>
         </div>
 
-        <InfoBox class="mt-20 mb-20 p-10">
-          <ul v-html="t(`authConfig.${NAME}.form.prefix`, tArgs, true)" />
-          <ul>
+        <InfoBox :step="1" class="step-box">
+          <ul class="step-list">
+            <li v-html="t(`authConfig.${NAME}.form.prefix.1`, tArgs, true)" />
+            <li v-html="t(`authConfig.${NAME}.form.prefix.2`, tArgs, true)" />
+            <li v-html="t(`authConfig.${NAME}.form.prefix.3`, tArgs, true)" />
+          </ul>
+        </InfoBox>
+        <InfoBox :step="2" class="step-box">
+          <ul class="step-list">
             <li>
               {{ t(`authConfig.${NAME}.form.instruction`, tArgs, true) }}
               <ul class="mt-10">
@@ -197,7 +203,12 @@ export default {
               </ul>
             </li>
           </ul>
-          <ul v-html="t(`authConfig.${NAME}.form.suffix`, tArgs, true)" />
+        </InfoBox>
+        <InfoBox :step="3" class="mb-20">
+          <ul class="step-list">
+            <li v-html="t(`authConfig.${NAME}.form.suffix.1`, tArgs, true)" />
+            <li v-html="t(`authConfig.${NAME}.form.suffix.2`, tArgs, true)" />
+          </ul>
         </InfoBox>
 
         <div class="row mb-20">
@@ -226,3 +237,9 @@ export default {
     </CruResource>
   </div>
 </template>
+
+<style lang="scss" scoped>
+  .step-list li:not(:last-child) {
+    margin-bottom: 8px;
+  }
+</style>

edit/auth/googleoauth.vue

@@ -135,7 +135,7 @@ export default {
             <Checkbox v-model="model.nestedGroupMembershipEnabled" :mode="mode" :label="t('authConfig.ldap.nestedGroupMembership.label')" />
           </div>
         </div>
-        <InfoBox class=" mt-20 mb-20 p-10">
+        <InfoBox :step="1" class=" mt-20 mb-20">
           <h3 v-html="t('authConfig.googleoauth.steps.1.title', tArgs, true)" />
           <ul class="mt-0 step-list">
             <li>{{ t('authConfig.googleoauth.steps.1.body.1', {}, true) }} </li>
@@ -145,7 +145,7 @@ export default {
             <li>{{ t('authConfig.googleoauth.steps.1.body.5', {}, true) }} </li>
           </ul>
         </InfoBox>
-        <InfoBox class="mb-20 p-10">
+        <InfoBox :step="2" class="mb-20">
           <div class="row">
             <h3 v-html="t('authConfig.googleoauth.steps.2.title', tArgs, true)" />
           </div>
@@ -173,7 +173,7 @@ export default {
             </div>
           </div>
         </InfoBox>
-        <InfoBox class="mb-20 p-10">
+        <InfoBox :step="3" class="mb-20">
           <div class="row">
             <h3 v-html="t('authConfig.googleoauth.steps.3.title', tArgs, true)" />
           </div>

pages/c/_cluster/auth/config/index.vue

@@ -4,9 +4,10 @@ import SelectIconGrid from '@/components/SelectIconGrid';
 import { sortBy } from '@/utils/sort';
 import { MODE, _EDIT } from '@/config/query-params';
 import { authProvidersInfo } from '@/utils/auth';
+import Banner from '@/components/Banner';
 
 export default {
-  components: { SelectIconGrid },
+  components: { SelectIconGrid, Banner },
 
   async asyncData({ store, redirect }) {
     const authProvs = await authProvidersInfo(store);
@@ -15,7 +16,7 @@ export default {
       redirect(authProvs.enabledLocation);
     }
 
-    return { nonLocal: authProvs.nonLocal };
+    return { nonLocal: authProvs.nonLocal, enabled: authProvs.enabled };
   },
 
   data() {
@@ -41,6 +42,10 @@ export default {
     rows() {
       return sortBy(this.nonLocal, ['sideLabel', 'nameDisplay']);
     },
+
+    displayName() {
+      return this.$store.getters['type-map/labelFor'](this.schema, 2);
+    }
   },
 
   methods: {
@@ -69,6 +74,10 @@ export default {
 
 <template>
   <div>
+    <h1 class="m-0">
+      {{ displayName }}
+    </h1>
+    <Banner v-if="!enabled.length" :label="t('authConfig.noneEnabled')" color="info" />
     <SelectIconGrid
       :rows="rows"
       :color-for="colorFor"

utils/auth.js

@@ -73,6 +73,7 @@ export const authProvidersInfo = async(store) => {
 
   return {
     nonLocal,
-    enabledLocation
+    enabledLocation,
+    enabled
   };
 };