Token TTL or Time setting

hashicorp · Sep 18, 2023 · 6d0c05a · 6d0c05a
1 parent 6edd8f5
commit 6d0c05a
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 11 deletions.
diff --git a/ui/app/components/token-editor.hbs b/ui/app/components/token-editor.hbs
@@ -5,9 +5,9 @@
 
 <form class="acl-form" autocomplete="off" {{on "submit" this.save}}>
 	<label>
-		<span>
-			Token Name
-		</span>
+    <Hds::Form::Label>
+      Token Name
+    </Hds::Form::Label>
 		<Input
 			data-test-token-name-input
 			@type="text"
@@ -19,6 +19,69 @@
 
 {{!-- TODO: add expiration time here --}}
 
+<div class="expiration-time">
+  {{#if @token.isNew}}
+    <Hds::Form::Label>
+      Expiration time
+    </Hds::Form::Label>
+
+    {{!-- Radio to select between 1, 4, 8, 24, or never --}}
+    <Hds::Form::Radio::Group @layout="horizontal" @name="expiration-time" {{on "change" this.updateTokenExpirationTTL}} as |G|>
+      <G.Radio::Field
+        @id="10m"
+        @value="10m"
+      as |F|>
+        <F.Label>10 minutes</F.Label>
+      </G.Radio::Field>
+      <G.Radio::Field
+        @id="8h"
+        @value="8h"
+      as |F|>
+        <F.Label>8 hours</F.Label>
+      </G.Radio::Field>
+      <G.Radio::Field
+        @id="24h"
+        @value="24h"
+      as |F|>
+        <F.Label>24 hours</F.Label>
+      </G.Radio::Field>
+      <G.Radio::Field
+        @id="never"
+        @value="never"
+        checked={{eq @token.expirationTTL "never"}}
+      as |F|>
+        <F.Label>Never</F.Label>
+      </G.Radio::Field>
+      <G.Radio::Field
+        @id="custom"
+        @value="custom"
+      as |F|>
+        <F.Label>Custom</F.Label>
+      </G.Radio::Field>
+    </Hds::Form::Radio::Group>
+
+    {{#if @token.expirationTime}}
+      <Hds::Form::TextInput::Field
+        @type="datetime-local"
+        @id="token-expiration-time"
+        {{on "change" this.updateTokenExpirationTime}}>
+      </Hds::Form::TextInput::Field>
+    {{/if}}
+
+  {{else}}
+    <Hds::Form::Label>
+      {{#if @token.expirationTime}}
+      Token {{#if @token.isExpired}}expired{{else}}expires{{/if}}
+      <Tooltip @text={{@token.expirationTime}}  @isFullText={{true}}>
+        <span data-test-token-expiration-time class="{{if @token.isExpired "has-text-danger"}}">{{moment-from-now @token.expirationTime interval=1000}}</span>
+      </Tooltip>
+      {{else}}
+      Token never expires
+      {{/if}}
+    </Hds::Form::Label>
+  {{/if}}
+</div>
+
   {{#unless @token.isNew}}
   <div>
     <Hds::Form::MaskedInput::Field @isMasked={{false}} @hasCopyButton={{true}} @value={{@token.accessor}} readonly as |F|>

diff --git a/ui/app/components/token-editor.js b/ui/app/components/token-editor.js
@@ -25,40 +25,51 @@ export default class TokenEditorComponent extends Component {
   // when this renders, set up tokenPolicies
   constructor() {
     super(...arguments);
-    console.log('tokpol', this.activeToken, this.activeToken.policies);
     this.tokenPolicies = this.activeToken.policies.toArray() || [];
     this.tokenRoles = this.activeToken.roles.toArray() || [];
-    console.log('tp;', this.tokenPolicies, this.tokenRoles);
+    this.activeToken.expirationTTL = 'never';
   }
 
   @action updateTokenPolicies(policy, event) {
     let { value, checked } = event.target;
-    console.log('updating token policies and', policy, value, checked);
     if (checked) {
       this.tokenPolicies.push(policy);
     } else {
       this.tokenPolicies = this.tokenPolicies.filter((p) => p !== policy);
     }
-    console.log('thus, rolePolicies', this.tokenPolicies);
   }
 
   @action updateTokenRoles(role, event) {
     let { value, checked } = event.target;
-    console.log('updating token roles and', role, value, checked);
     if (checked) {
       this.tokenRoles.push(role);
     } else {
       this.tokenRoles = this.tokenRoles.filter((p) => p !== role);
     }
-    console.log('thus, tokenRoles', this.tokenRoles);
   }
 
   @action updateTokenType(event) {
-    console.log('updating token type', event, event.target.id);
     let tokenType = event.target.id;
     this.activeToken.type = tokenType;
   }
 
+  @action updateTokenExpirationTime(event) {
+    // Override expirationTTL if user selects a time
+    this.activeToken.expirationTTL = null;
+    this.activeToken.expirationTime = new Date(event.target.value);
+  }
+  @action updateTokenExpirationTTL(event) {
+    // Override expirationTime if user selects a TTL
+    this.activeToken.expirationTime = null;
+    if (event.target.value === 'never') {
+      this.activeToken.expirationTTL = null;
+    } else if (event.target.value === 'custom') {
+      this.activeToken.expirationTime = new Date();
+    } else {
+      this.activeToken.expirationTTL = event.target.value;
+    }
+  }
+
   @action async save(e) {
     try {
       const shouldRedirectAfterSave = this.activeToken.isNew;

diff --git a/ui/app/models/token.js b/ui/app/models/token.js
@@ -18,6 +18,7 @@ export default class Token extends Model {
   @hasMany('role') roles;
   @attr() policyNames;
   @attr('date') expirationTime;
+  @attr() expirationTTL;
 
   @alias('id') accessor;
 

diff --git a/ui/app/styles/components/access-control.scss b/ui/app/styles/components/access-control.scss
@@ -48,7 +48,7 @@
 
 .acl-form {
   display: grid;
-  gap: 1rem;
+  gap: 2rem;
 
   .selection-checkbox {
     position: relative;
@@ -62,4 +62,8 @@
       padding: 12px 16px;
     }
   }
+
+  .expiration-time fieldset {
+    margin-bottom: 1rem;
+  }
 }