stages/identification: add show_source_labels option, to show labels for sources

closes #1679

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/stages/authenticator_sms/migrations/0002_alter_authenticatorsmsstage_from_number.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.8 on 2021-10-31 16:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_stages_authenticator_sms", "0001_squashed_0004_auto_20211014_0936"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="authenticatorsmsstage",
+            name="from_number",
+            field=models.TextField(),
+        ),
+    ]

authentik/stages/identification/api.py

@@ -20,6 +20,7 @@ class IdentificationStageSerializer(StageSerializer):
             "enrollment_flow",
             "recovery_flow",
             "sources",
+            "show_source_labels",
         ]
 
 
@@ -35,5 +36,6 @@ class IdentificationStageViewSet(UsedByMixin, ModelViewSet):
         "show_matched_user",
         "enrollment_flow",
         "recovery_flow",
+        "show_source_labels",
     ]
     ordering = ["name"]

authentik/stages/identification/migrations/0012_identificationstage_show_source_labels.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.8 on 2021-10-31 16:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_stages_identification", "0011_alter_identificationstage_user_fields"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="identificationstage",
+            name="show_source_labels",
+            field=models.BooleanField(default=False),
+        ),
+    ]

authentik/stages/identification/models.py

@@ -81,6 +81,7 @@ class IdentificationStage(Stage):
     sources = models.ManyToManyField(
         Source, default=list, help_text=_("Specify which sources should be shown.")
     )
+    show_source_labels = models.BooleanField(default=False)
 
     @property
     def serializer(self) -> BaseSerializer:

authentik/stages/identification/stage.py

@@ -57,6 +57,7 @@ class IdentificationChallenge(Challenge):
     recovery_url = CharField(required=False)
     primary_action = CharField()
     sources = LoginSourceSerializer(many=True, required=False)
+    show_source_labels = BooleanField()
 
     component = CharField(default="ak-stage-identification")
 
@@ -152,6 +153,7 @@ class IdentificationStageView(ChallengeStageView):
                 "component": "ak-stage-identification",
                 "user_fields": current_stage.user_fields,
                 "password_fields": bool(current_stage.password_stage),
+                "show_source_labels": current_stage.show_source_labels,
             }
         )
         # If the user has been redirected to us whilst trying to access an

schema.yml

@@ -16719,6 +16719,10 @@ paths:
         name: show_matched_user
         schema:
           type: boolean
+      - in: query
+        name: show_source_labels
+        schema:
+          type: boolean
       tags:
       - stages
       security:
@@ -21659,9 +21663,12 @@ components:
           type: array
           items:
             $ref: '#/components/schemas/LoginSource'
+        show_source_labels:
+          type: boolean
       required:
       - password_fields
       - primary_action
+      - show_source_labels
       - type
       - user_fields
     IdentificationChallengeResponseRequest:
@@ -21740,6 +21747,8 @@ components:
             type: string
             format: uuid
           description: Specify which sources should be shown.
+        show_source_labels:
+          type: boolean
       required:
       - component
       - name
@@ -21794,6 +21803,8 @@ components:
             type: string
             format: uuid
           description: Specify which sources should be shown.
+        show_source_labels:
+          type: boolean
       required:
       - name
     IntentEnum:
@@ -26705,6 +26716,8 @@ components:
             type: string
             format: uuid
           description: Specify which sources should be shown.
+        show_source_labels:
+          type: boolean
     PatchedInvitationRequest:
       type: object
       description: Invitation Serializer

web/src/authentik.css

@@ -213,6 +213,10 @@ html > form > input {
     option {
         color: var(--ak-dark-foreground);
     }
+    optgroup:checked,
+    option:checked {
+        color: var(--ak-dark-background);
+    }
     .pf-c-input-group {
         --pf-c-input-group--BackgroundColor: transparent;
     }

web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts

@@ -76,8 +76,14 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
                         <input
                             type="text"
                             name="code"
-                            inputmode="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static ? 'text' : 'numeric'}"
+                            inputmode="${this.deviceChallenge?.deviceClass ===
-                            pattern="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static ? '' : '[0-9]*'}"
+                            DeviceClassesEnum.Static
+                                ? "text"
+                                : "numeric"}"
+                            pattern="${this.deviceChallenge?.deviceClass ===
+                            DeviceClassesEnum.Static
+                                ? ""
+                                : "[0-9]*"}"
                             placeholder="${t`Please enter your Code`}"
                             autofocus=""
                             autocomplete="one-time-code"

web/src/flows/stages/identification/IdentificationStage.ts

@@ -57,6 +57,8 @@ export class IdentificationStage extends BaseStage<
                 .pf-c-login__main-footer-links-item button {
                     background-color: transparent;
                     border: 0;
+                    display: flex;
+                    align-items: stretch;
                 }
                 .pf-c-login__main-footer-links-item img {
                     fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
@@ -152,8 +154,10 @@ export class IdentificationStage extends BaseStage<
                     if (!this.host) return;
                     this.host.challenge = source.challenge;
                 }}
+                class=${this.challenge.showSourceLabels ? "pf-c-button pf-m-link" : ""}
             >
-                ${icon}
+                <span class="pf-c-button__icon pf-m-start">${icon}</span>
+                ${this.challenge.showSourceLabels ? source.name : ""}
             </button>
         </li>`;
     }

web/src/locales/en.po

@@ -605,6 +605,10 @@ msgstr "Build hash:"
 msgid "Built-in"
 msgstr "Built-in"
 
+#: src/pages/stages/identification/IdentificationStageForm.ts
+msgid "By default, only icons are shown for sources. Enable this to show their full names."
+msgstr "By default, only icons are shown for sources. Enable this to show their full names."
+
 #: src/pages/outposts/ServiceConnectionDockerForm.ts
 msgid "CA which the endpoint's Certificate is verified against. Can be left empty for no validation."
 msgstr "CA which the endpoint's Certificate is verified against. Can be left empty for no validation."
@@ -4003,6 +4007,10 @@ msgstr "Show matched user"
 msgid "Show more"
 msgstr "Show more"
 
+#: src/pages/stages/identification/IdentificationStageForm.ts
+msgid "Show sources' labels"
+msgstr "Show sources' labels"
+
 #: src/pages/flows/FlowForm.ts
 msgid "Shown as the Title in Flow pages."
 msgstr "Shown as the Title in Flow pages."

web/src/locales/fr_FR.po

@@ -607,6 +607,10 @@ msgstr "Hash de build :"
 msgid "Built-in"
 msgstr "Intégré"
 
+#: src/pages/stages/identification/IdentificationStageForm.ts
+msgid "By default, only icons are shown for sources. Enable this to show their full names."
+msgstr ""
+
 #: src/pages/outposts/ServiceConnectionDockerForm.ts
 msgid "CA which the endpoint's Certificate is verified against. Can be left empty for no validation."
 msgstr "AC auprès de laquelle le certificat du terminal est vérifié. Peut être laissé vide en l'absence de validation."
@@ -3964,6 +3968,10 @@ msgstr "Afficher l'utilisateur correspondant"
 msgid "Show more"
 msgstr "Montrer plus"
 
+#: src/pages/stages/identification/IdentificationStageForm.ts
+msgid "Show sources' labels"
+msgstr ""
+
 #: src/pages/flows/FlowForm.ts
 msgid "Shown as the Title in Flow pages."
 msgstr "Afficher comme Titre dans les pages de Flux."

web/src/locales/pseudo-LOCALE.po

@@ -601,6 +601,10 @@ msgstr ""
 msgid "Built-in"
 msgstr ""
 
+#: src/pages/stages/identification/IdentificationStageForm.ts
+msgid "By default, only icons are shown for sources. Enable this to show their full names."
+msgstr ""
+
 #: src/pages/outposts/ServiceConnectionDockerForm.ts
 msgid "CA which the endpoint's Certificate is verified against. Can be left empty for no validation."
 msgstr ""
@@ -3995,6 +3999,10 @@ msgstr ""
 msgid "Show more"
 msgstr ""
 
+#: src/pages/stages/identification/IdentificationStageForm.ts
+msgid "Show sources' labels"
+msgstr ""
+
 #: src/pages/flows/FlowForm.ts
 msgid "Shown as the Title in Flow pages."
 msgstr ""

web/src/pages/stages/identification/IdentificationStageForm.ts

@@ -191,6 +191,19 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
                             ${t`Hold control/command to select multiple items.`}
                         </p>
                     </ak-form-element-horizontal>
+                    <ak-form-element-horizontal name="showSourceLabels">
+                        <div class="pf-c-check">
+                            <input
+                                type="checkbox"
+                                class="pf-c-check__input"
+                                ?checked=${first(this.instance?.showSourceLabels, false)}
+                            />
+                            <label class="pf-c-check__label"> ${t`Show sources' labels`} </label>
+                        </div>
+                        <p class="pf-c-form__helper-text">
+                            ${t`By default, only icons are shown for sources. Enable this to show their full names.`}
+                        </p>
+                    </ak-form-element-horizontal>
                     <ak-form-element-horizontal name="showMatchedUser">
                         <div class="pf-c-check">
                             <input