diff --git a/addons/core/translations/states/en-us.yaml b/addons/core/translations/states/en-us.yaml index 4ecf3007a..15893d59d 100644 --- a/addons/core/translations/states/en-us.yaml +++ b/addons/core/translations/states/en-us.yaml @@ -17,6 +17,8 @@ failed: Failed installed: Installed not-running: Not Running running: Running +authenticated: Authenticated +unauthenticated: Unauthenticated loading: title: Loading all items... description: All of your {resource} are still loading. Please wait while we finish loading everything on screen. diff --git a/ui/desktop/app/components/settings-card/application/index.hbs b/ui/desktop/app/components/settings-card/application/index.hbs new file mode 100644 index 000000000..a9aeed743 --- /dev/null +++ b/ui/desktop/app/components/settings-card/application/index.hbs @@ -0,0 +1,76 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: BUSL-1.1 +}} + + + <:body> +
+
+ + {{t 'titles.client'}} + + + {{@model.formattedDesktopVersion}} + +
+
+ + {{t 'titles.cli'}} + + + {{@model.formattedCliVersion}} + +
+
+ + {{t 'titles.cache-daemon'}} + + + {{#if @model.formattedCacheVersion}} + {{@model.formattedCacheVersion}} + + {{else}} + + {{/if}} + + +
+
+ {{#if @model.error}} + + {{t 'errors.settings-cache.title'}} + {{#if @model.error.message}} + {{@model.error.message}} + {{/if}} + + {{/if}} + + + {{t 'titles.color-theme'}} + + {{#each this.themes as |theme|}} + + {{/each}} + + + + \ No newline at end of file diff --git a/ui/desktop/app/components/settings-card/application/index.js b/ui/desktop/app/components/settings-card/application/index.js new file mode 100644 index 000000000..4bd00b484 --- /dev/null +++ b/ui/desktop/app/components/settings-card/application/index.js @@ -0,0 +1,30 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: BUSL-1.1 + */ + +import Component from '@glimmer/component'; + +const THEMES = [ + { + label: 'system', + value: 'system-default-theme', + }, + { + label: 'light', + value: 'light', + }, + { + label: 'dark', + value: 'dark', + }, +]; + +export default class SettingsApplicationComponent extends Component { + /** + * Returns available themes + */ + get themes() { + return THEMES; + } +} diff --git a/ui/desktop/app/components/settings-card/index.hbs b/ui/desktop/app/components/settings-card/index.hbs index a27036983..93e501885 100644 --- a/ui/desktop/app/components/settings-card/index.hbs +++ b/ui/desktop/app/components/settings-card/index.hbs @@ -11,6 +11,10 @@ {{@header}} + {{#if (has-block 'state')}} + {{yield to='state'}} + {{/if}} + {{#if (has-block 'action')}}
{{! this will contain buttons }} @@ -18,11 +22,6 @@
{{/if}} - {{#if @state}} -
- -
- {{/if}} {{#if @description}} diff --git a/ui/desktop/app/components/settings-card/user/index.hbs b/ui/desktop/app/components/settings-card/user/index.hbs new file mode 100644 index 000000000..39df6bf76 --- /dev/null +++ b/ui/desktop/app/components/settings-card/user/index.hbs @@ -0,0 +1,49 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: BUSL-1.1 +}} + + + <:state> + {{#if this.isAuthenticated}} + + {{else}} + + {{/if}} + + <:body> +
+
+ + {{t 'resources.auth-method.title'}} + + + {{this.authMethod}} + +
+
+ + {{t 'form.username.label'}} + + + {{this.userInfo}} + +
+
+ + + <:action> + + + \ No newline at end of file diff --git a/ui/desktop/app/components/settings-card/user/index.js b/ui/desktop/app/components/settings-card/user/index.js new file mode 100644 index 000000000..917437b6f --- /dev/null +++ b/ui/desktop/app/components/settings-card/user/index.js @@ -0,0 +1,61 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: BUSL-1.1 + */ + +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; +import { action } from '@ember/object'; + +export default class SettingsUserInfoComponent extends Component { + // =services + + @service session; + @service intl; + + /** + * Returns the username of the current user + * @type {string} + */ + get userInfo() { + const { + data: { + authenticated: { username }, + }, + } = this.session; + return username; + } + + /** + * Returns true if user is authenticated + * @type {boolean} + */ + get isAuthenticated() { + const { isAuthenticated } = this.session; + return isAuthenticated; + } + + /** + * Returns the type of authmethod used by the user + * @type {string} + */ + get authMethod() { + const { + data: { + authenticated: { authenticator }, + }, + } = this.session; + const formattedAuthenticatorType = authenticator.split(':')[1]; + return this.intl.t(`resources.account.types.${formattedAuthenticatorType}`); + } + + // =actions + + /** + * Delegates invalidation to the session service. + */ + @action + invalidateSession() { + this.session.invalidate(); + } +} diff --git a/ui/desktop/app/controllers/scopes/scope/projects/settings/index.js b/ui/desktop/app/controllers/scopes/scope/projects/settings/index.js index 4c3e88696..f6502c0e1 100644 --- a/ui/desktop/app/controllers/scopes/scope/projects/settings/index.js +++ b/ui/desktop/app/controllers/scopes/scope/projects/settings/index.js @@ -4,39 +4,12 @@ */ import Controller, { inject as controller } from '@ember/controller'; -import { inject as service } from '@ember/service'; import { action } from '@ember/object'; -const THEMES = [ - { - label: 'system', - value: 'system-default-theme', - }, - { - label: 'light', - value: 'light', - }, - { - label: 'dark', - value: 'dark', - }, -]; - export default class ScopesScopeProjectsSettingsIndexController extends Controller { @controller('application') application; - // Services - - @service session; - - // Methods - - /** - * Returns available themes - */ - get themes() { - return THEMES; - } + //actions /** * Calls the Application controller's toggleTheme method * @param {string} theme - "light", "dark", or nullish (system default) diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index baa97b134..8023ae953 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -665,14 +665,17 @@ $chevron-down: url("data:image/svg+xml;utf-8, - <:body> -
-
- - {{t 'titles.client'}} - - - {{@model.formattedDesktopVersion}} - -
-
- - {{t 'titles.cli'}} - - - {{@model.formattedCliVersion}} - -
-
- - {{t 'titles.cache-daemon'}} - - - {{#if @model.formattedCacheVersion}} - {{@model.formattedCacheVersion}} - - {{else}} - - {{/if}} - -
-
- {{#if @model.error}} - - {{t 'errors.settings-cache.title'}} - {{#if @model.error.message}} - {{@model.error.message}} - {{/if}} - - {{/if}} - - - {{t 'titles.color-theme'}} - - {{#each this.themes as |theme|}} - - {{/each}} - - - - \ No newline at end of file + + \ No newline at end of file diff --git a/ui/desktop/tests/acceptance/projects/settings/index-test.js b/ui/desktop/tests/acceptance/projects/settings/index-test.js index c8624383b..20b7edbe8 100644 --- a/ui/desktop/tests/acceptance/projects/settings/index-test.js +++ b/ui/desktop/tests/acceptance/projects/settings/index-test.js @@ -20,6 +20,8 @@ import { import WindowMockIPC from '../../../helpers/window-mock-ipc'; import setupStubs from 'api/test-support/handlers/cache-daemon-search'; +const SIGNOUT_SELECTOR = '[data-test-signout-button]'; + module('Acceptance | projects | settings | index', function (hooks) { setupApplicationTest(hooks); setupMirage(hooks); @@ -130,4 +132,13 @@ module('Acceptance | projects | settings | index', function (hooks) { assert.notOk(getRootElement().classList.contains('rose-theme-light')); assert.notOk(getRootElement().classList.contains('rose-theme-dark')); }); + + test('clicking signout button logs out the user', async function (assert) { + authenticateSession({ username: 'testuser' }); + assert.expect(2); + await visit(urls.settings); + assert.ok(currentSession().isAuthenticated); + await click(SIGNOUT_SELECTOR); + assert.notOk(currentSession().isAuthenticated); + }); }); diff --git a/ui/desktop/tests/integration/components/settings-card-test.js b/ui/desktop/tests/integration/components/settings-card-test.js index b022512df..ba40ce407 100644 --- a/ui/desktop/tests/integration/components/settings-card-test.js +++ b/ui/desktop/tests/integration/components/settings-card-test.js @@ -8,6 +8,10 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; +const USERNAME_SELECTOR = '[data-test-username]'; +const AUTH_METHOD_SELECTOR = '[data-test-auth-method]'; +const SIGNOUT_SELECTOR = '[data-test-signout-button]'; + module('Integration | Component | settings card', function (hooks) { setupRenderingTest(hooks); @@ -38,4 +42,41 @@ module('Integration | Component | settings card', function (hooks) { 'This is a heading test', ); }); + + test('displays userinfo card correctly', async function (assert) { + this.authMethod = 'OIDC'; + this.userInfo = 'testuser'; + await render(hbs` + + <:body> +
+
+ + {{this.authMethod}} + +
+
+ + {{this.userInfo}} + +
+
+ + <:action> + + + + `); + assert.dom(AUTH_METHOD_SELECTOR).hasText('OIDC'); + assert.dom(USERNAME_SELECTOR).hasText('testuser'); + assert.dom(SIGNOUT_SELECTOR).hasText('sign out'); + }); });