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 0000000000..2dcc826d73
--- /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 b4c7ca7132..54925e1f77 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 0000000000..71198c1ea8
--- /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 e12dca4253..9f1127fbc6 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 9ded9a2473..bbc6de2f40 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 7dd401d818..b8d9f21a3e 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 8563ff0467..e108c98747 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 420f5cb725..adb747b439 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 fb41ce20d9..d94eae5811 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 a01e75af30..50bf737085 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 b14c55d90b..f88c70442b 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 4b9f69a472..1777cb1b07 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 e66a928315..30dd93e50c 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