From be47e9d3b7dd0a2a6a23ff859c260ae62b129ea8 Mon Sep 17 00:00:00 2001
From: hc-github-team-secure-vault-core
 <82990506+hc-github-team-secure-vault-core@users.noreply.github.com>
Date: Thu, 20 Apr 2023 10:30:43 -0400
Subject: [PATCH] backport of UI: OIDC provider logo fix (#20269)

Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
---
 changelog/20263.txt                   |  3 +++
 ui/app/models/role-jwt.js             | 27 +++++++++++++--------------
 ui/tests/unit/models/role-jwt-test.js | 21 +++++++++++++++------
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 changelog/20263.txt

diff --git a/changelog/20263.txt b/changelog/20263.txt
new file mode 100644
index 000000000000..8556fe8865b3
--- /dev/null
+++ b/changelog/20263.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix OIDC provider logo showing when domain doesn't match
+```
diff --git a/ui/app/models/role-jwt.js b/ui/app/models/role-jwt.js
index 6de28f121204..d2de124f3a28 100644
--- a/ui/app/models/role-jwt.js
+++ b/ui/app/models/role-jwt.js
@@ -1,31 +1,30 @@
 import Model, { attr } from '@ember-data/model';
-import { computed } from '@ember/object';
 import parseURL from 'core/utils/parse-url';
 
 const DOMAIN_STRINGS = {
-  github: 'GitHub',
-  gitlab: 'GitLab',
-  google: 'Google',
-  ping: 'Ping',
-  okta: 'Okta',
-  auth0: 'Auth0',
+  'github.com': 'GitHub',
+  'gitlab.com': 'GitLab',
+  'google.com': 'Google',
+  'ping.com': 'Ping',
+  'okta.com': 'Okta',
+  'auth0.com': 'Auth0',
 };
 
 const PROVIDER_WITH_LOGO = ['GitLab', 'Google', 'Auth0'];
 
 export { DOMAIN_STRINGS, PROVIDER_WITH_LOGO };
 
-export default Model.extend({
-  authUrl: attr('string'),
+export default class RoleJwtModel extends Model {
+  @attr('string') authUrl;
 
-  providerName: computed('authUrl', function () {
+  get providerName() {
     const { hostname } = parseURL(this.authUrl);
     const firstMatch = Object.keys(DOMAIN_STRINGS).find((name) => hostname.includes(name));
     return DOMAIN_STRINGS[firstMatch] || null;
-  }),
+  }
 
-  providerButtonComponent: computed('providerName', function () {
+  get providerButtonComponent() {
     const { providerName } = this;
     return PROVIDER_WITH_LOGO.includes(providerName) ? `auth-button-${providerName.toLowerCase()}` : null;
-  }),
-});
+  }
+}
diff --git a/ui/tests/unit/models/role-jwt-test.js b/ui/tests/unit/models/role-jwt-test.js
index eedf305435bc..1e55546b7a31 100644
--- a/ui/tests/unit/models/role-jwt-test.js
+++ b/ui/tests/unit/models/role-jwt-test.js
@@ -24,26 +24,35 @@ module('Unit | Model | role-jwt', function (hooks) {
 
   test('it provides a providerName for listed known providers', function (assert) {
     assert.expect(12);
-    Object.keys(DOMAIN_STRINGS).forEach((domainPart) => {
+    Object.keys(DOMAIN_STRINGS).forEach((domain) => {
       const model = this.owner.lookup('service:store').createRecord('role-jwt', {
-        authUrl: `http://provider-${domainPart}.com`,
+        authUrl: `http://provider-${domain}`,
       });
 
-      const expectedName = DOMAIN_STRINGS[domainPart];
+      const expectedName = DOMAIN_STRINGS[domain];
       assert.strictEqual(model.providerName, expectedName, `computes providerName: ${expectedName}`);
       if (PROVIDER_WITH_LOGO.includes(expectedName)) {
         assert.strictEqual(
           model.providerButtonComponent,
-          `auth-button-${domainPart}`,
-          `computes providerButtonComponent: ${domainPart}`
+          `auth-button-${expectedName.toLowerCase()}`,
+          `computes providerButtonComponent: ${domain}`
         );
       } else {
         assert.strictEqual(
           model.providerButtonComponent,
           null,
-          `computes providerButtonComponent: ${domainPart}`
+          `computes providerButtonComponent: ${domain}`
         );
       }
     });
   });
+
+  test('it does not return provider unless domain matches completely', function (assert) {
+    assert.expect(2);
+    const model = this.owner.lookup('service:store').createRecord('role-jwt', {
+      authUrl: `http://custom-auth0-provider.com`,
+    });
+    assert.strictEqual(model.providerName, null, `no providerName for custom URL`);
+    assert.strictEqual(model.providerButtonComponent, null, 'no providerButtonComponent for custom URL');
+  });
 });