first commit

Author: emoncuso

.ember-cli

@@ -4,6 +4,7 @@
     rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
   "isTypeScriptProject": true,
+  "output-path": "/Users/emoncuso/hashicorp/vault-ui",
 
   /**
     Setting `componentAuthoringFormat` to "strict" will force the blueprint generators to generate GJS

app/authenticators/token.ts

@@ -0,0 +1,28 @@
+import { service } from '@ember/service';
+import Base from 'ember-simple-auth/authenticators/base';
+import type ApiService from 'fresh-vault/services/api';
+
+type AuthenticateParams = { token: string, path: string };
+
+export default class TokenAuthenticator extends Base {
+  @service declare readonly api: ApiService;
+
+  restore(data: unknown) {
+    return Promise.resolve(data);
+  }
+
+  async authenticate({ path, token }: AuthenticateParams) {
+    console.log({ path, token });
+
+    const res = await this.api.auth.lookupSelf({ token });
+    console.log(res)
+    return Promise.resolve({
+      token,
+
+    });
+  }
+
+  invalidate(data: unknown) {
+    return Promise.resolve(data);
+  }
+}

app/components/pages/login.hbs

@@ -0,0 +1,29 @@
+<h1> Login </h1>
+
+<form method="POST" {{on "submit" this.login.perform}}>
+  <div>
+    <label for="path">Path</label>
+    <input 
+      id="path" 
+      name="path" 
+      type="text" 
+      value="/"
+      readonly
+      autocomplete="off" 
+    />
+  </div>
+  <div>
+    <label for="token">Token</label>
+    <input 
+      id="token" 
+      name="token" 
+      type="text" 
+      required 
+      aria-required="true" 
+      autocomplete="off" 
+    />
+  </div>
+  <button type="submit">
+    Login
+  </button>
+</form>

app/components/pages/login.ts

@@ -0,0 +1,31 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { task } from 'ember-concurrency';
+import type SessionService from 'fresh-vault/services/session';
+
+export interface PagesLoginSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: []
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class PagesLogin extends Component<PagesLoginSignature> {
+  @service declare readonly session: SessionService;
+
+  login = task({ drop: true }, async (e: unknown) => {
+    e.preventDefault();
+  
+    const fd = new FormData(e.target);
+
+    const path = fd.get('path');
+    const token = fd.get('token');
+
+    this.session.authenticate('authenticator:token', { path, token });
+  });
+}

app/components/pages/overview.hbs

@@ -0,0 +1,8 @@
+<h1> Overview </h1>
+
+<button {{on "click" this.logout}}>
+  Logout
+</button>
+
+<p>Hey I'm a random web app connecting to Vault!</p>
+<p>Vault server version is: <strong>{{this.backendVersion}}</strong></p>

app/components/pages/overview.ts

@@ -0,0 +1,40 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import type ClusterService from 'fresh-vault/services/cluster';
+import type SessionService from 'fresh-vault/services/session';
+
+export interface PagesOverviewSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: []
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class PagesOverview extends Component<PagesOverviewSignature> {
+  @service declare readonly cluster: ClusterService;
+  @service declare readonly session: SessionService;
+
+  // get isDr() {
+  //   return
+  // }
+
+  // get isPr() {
+
+  // }
+
+  // get isSecondary() {
+
+  // }
+
+  get backendVersion() {
+    return this.cluster.health.version;
+  }
+
+  logout = async () => {
+    this.session.invalidate();
+  }
+}

app/router.ts

@@ -7,5 +7,8 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  // Add route declarations here
+  this.route('login');
+  this.route('authenticated', { path: '/' }, function () {
+    this.route('overview', { path: '/' });
+  });
 });

app/routes/application.ts

@@ -0,0 +1,37 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+import type ApiService from 'fresh-vault/services/api';
+import type ClusterService from 'fresh-vault/services/cluster';
+import type SessionService from 'fresh-vault/services/session';
+
+export default class ApplicationRoute extends Route {
+  @service declare readonly api: ApiService;
+  @service declare readonly cluster: ClusterService;
+  @service declare readonly session: SessionService;
+
+  beforeModel() {
+    this.session.setup();
+  }
+
+  async model() {
+    const [
+      health,
+      sealStatus
+    ] = await Promise.all([
+      this.api.sys.health(),
+      this.api.sys.sealStatus(),
+    ]);
+
+    console.log({ health, sealStatus });
+
+    return {
+      health,
+      sealStatus
+    }
+  }
+
+  afterModel(model: unknown) {
+    this.cluster.health = model.health;
+    this.cluster.sealStatus = model.sealStatus;
+  }
+}

app/routes/authenticated.ts

@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+import type SessionService from 'fresh-vault/services/session';
+import type Transition from '@ember/routing/transition';
+
+export default class AuthenticatedRoute extends Route {
+  @service declare readonly session: SessionService;
+  beforeModel(transition: Transition) {
+    this.session.requireAuthentication(transition, 'login');
+  }
+}

app/routes/authenticated/overview.ts

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+import { tracked } from '@glimmer/tracking';
+
+export default class AuthenticatedOverviewRoute extends Route {
+  @tracked health = {}
+  @tracked sealStatus = {}
+}