From 5646141fe20eef3ba19192b7b07ef2b218122faf Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 31 Oct 2021 17:57:48 +0100
Subject: [PATCH] stages/identification: add show_source_labels option, to show
 labels for sources

closes #1679

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 ..._alter_authenticatorsmsstage_from_number.py | 18 ++++++++++++++++++
 authentik/stages/identification/api.py         |  2 ++
 ...2_identificationstage_show_source_labels.py | 18 ++++++++++++++++++
 authentik/stages/identification/models.py      |  1 +
 authentik/stages/identification/stage.py       |  2 ++
 schema.yml                                     | 13 +++++++++++++
 web/src/authentik.css                          |  4 ++++
 .../AuthenticatorValidateStageCode.ts          | 10 ++++++++--
 .../identification/IdentificationStage.ts      |  6 +++++-
 web/src/locales/en.po                          |  8 ++++++++
 web/src/locales/fr_FR.po                       |  8 ++++++++
 web/src/locales/pseudo-LOCALE.po               |  8 ++++++++
 .../identification/IdentificationStageForm.ts  | 13 +++++++++++++
 13 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 authentik/stages/authenticator_sms/migrations/0002_alter_authenticatorsmsstage_from_number.py
 create mode 100644 authentik/stages/identification/migrations/0012_identificationstage_show_source_labels.py

diff --git a/authentik/stages/authenticator_sms/migrations/0002_alter_authenticatorsmsstage_from_number.py b/authentik/stages/authenticator_sms/migrations/0002_alter_authenticatorsmsstage_from_number.py
new file mode 100644
index 000000000..2dcc826d7
--- /dev/null
+++ b/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(),
+        ),
+    ]
diff --git a/authentik/stages/identification/api.py b/authentik/stages/identification/api.py
index b4c7ca713..54925e1f7 100644
--- a/authentik/stages/identification/api.py
+++ b/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"]
diff --git a/authentik/stages/identification/migrations/0012_identificationstage_show_source_labels.py b/authentik/stages/identification/migrations/0012_identificationstage_show_source_labels.py
new file mode 100644
index 000000000..71198c1ea
--- /dev/null
+++ b/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),
+        ),
+    ]
diff --git a/authentik/stages/identification/models.py b/authentik/stages/identification/models.py
index e12dca425..9f1127fbc 100644
--- a/authentik/stages/identification/models.py
+++ b/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:
diff --git a/authentik/stages/identification/stage.py b/authentik/stages/identification/stage.py
index 9ded9a247..bbc6de2f4 100644
--- a/authentik/stages/identification/stage.py
+++ b/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
diff --git a/schema.yml b/schema.yml
index 7dd401d81..b8d9f21a3 100644
--- a/schema.yml
+++ b/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
diff --git a/web/src/authentik.css b/web/src/authentik.css
index 8563ff046..e108c9874 100644
--- a/web/src/authentik.css
+++ b/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;
     }
diff --git a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
index 420f5cb72..adb747b43 100644
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
+++ b/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'}"
-                            pattern="${this.deviceChallenge?.deviceClass === DeviceClassesEnum.Static ? '' : '[0-9]*'}"
+                            inputmode="${this.deviceChallenge?.deviceClass ===
+                            DeviceClassesEnum.Static
+                                ? "text"
+                                : "numeric"}"
+                            pattern="${this.deviceChallenge?.deviceClass ===
+                            DeviceClassesEnum.Static
+                                ? ""
+                                : "[0-9]*"}"
                             placeholder="${t`Please enter your Code`}"
                             autofocus=""
                             autocomplete="one-time-code"
diff --git a/web/src/flows/stages/identification/IdentificationStage.ts b/web/src/flows/stages/identification/IdentificationStage.ts
index fb41ce20d..d94eae581 100644
--- a/web/src/flows/stages/identification/IdentificationStage.ts
+++ b/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>`;
     }
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index a01e75af3..50bf73708 100644
--- a/web/src/locales/en.po
+++ b/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."
diff --git a/web/src/locales/fr_FR.po b/web/src/locales/fr_FR.po
index b14c55d90..f88c70442 100644
--- a/web/src/locales/fr_FR.po
+++ b/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."
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index 4b9f69a47..1777cb1b0 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/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 ""
diff --git a/web/src/pages/stages/identification/IdentificationStageForm.ts b/web/src/pages/stages/identification/IdentificationStageForm.ts
index e66a92831..30dd93e50 100644
--- a/web/src/pages/stages/identification/IdentificationStageForm.ts
+++ b/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