From 0595fe136035bbd474a114d0bd9fdea37904edc6 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Wed, 19 Apr 2023 14:30:18 -0500
Subject: [PATCH] UI: OIDC provider logo fix (#20263)

* glimmerize role-jwt model, update test for use new case

* Fix issue #8949

* Update test

* Add changelog
---
 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 467f2e1e220b..ddd5de04f18f 100644
--- a/ui/app/models/role-jwt.js
+++ b/ui/app/models/role-jwt.js
@@ -4,33 +4,32 @@
  */
 
 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 56bfa0ae64c0..547aaf21f24e 100644
--- a/ui/tests/unit/models/role-jwt-test.js
+++ b/ui/tests/unit/models/role-jwt-test.js
@@ -29,26 +29,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');
+  });
 });