Api key regenerate (#2782)

* Implement access token regenerate and remove

* Fix

app/components/account-token.js

@@ -1,10 +1,21 @@
 import Component from '@ember/component';
+import { reads } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
   classNames: ['account-token'],
 
+  api: service(),
+  auth: service(),
+
+  localStorage: service('storage'),
+  authStorage: reads('localStorage.auth'),
+
+  flashes: service(),
+
   tokenIsVisible: false,
   showCopySuccess: false,
+  showRegenerateButton: false,
 
   actions: {
     tokenVisibility() {
@@ -19,5 +30,15 @@ export default Component.extend({
         this.toggleProperty('showCopySuccess');
       }
     },
+
+    regenerateToken() {
+      this.api.patch('/access_token').then((data) => {
+        this.auth.handleTokenRegeneration(data['token']);
+
+        this.flashes.success('Token successfully regenerated!');
+      }).catch(() => {
+        this.flashes.error('There was an error regenerating the token.');
+      });
+    }
   },
 });

app/services/auth.js

@@ -328,6 +328,16 @@ export default Service.extend({
     }
   }),
 
+  handleTokenRegeneration(token) {
+    const currentUser = this.currentUser;
+    this.storage.accounts.removeObject(currentUser);
+    currentUser.set('authToken', token);
+    this.storage.accounts.addObject(currentUser);
+    this.reloadUser(currentUser);
+    this.storage.set('activeAccount', currentUser);
+    this.storage.setRegeneratedToken(token);
+  },
+
   actions: {
 
     switchAccount(id) {

app/services/storage/auth.js

@@ -109,6 +109,10 @@ export default Service.extend({
 
   isBecome: computed(() => !!storage.getItem('travis.auth.become')),
 
+  setRegeneratedToken(token) {
+    storage.setItem('travis.token', token);
+  },
+
   clearLoginData() {
     storage.removeItem('travis.token');
     storage.removeItem('travis.user');

app/styles/app/layouts/profile.scss

@@ -410,6 +410,14 @@ $profile-breakpoint: 600px;
   }
 }
 
+.token-field-regen {
+  line-height: 30px;
+}
+
+.token-actions-regen {
+  width: 19em !important;
+}
+
 .token-actions {
   width: 15em;
   display: flex;
@@ -420,6 +428,10 @@ $profile-breakpoint: 600px;
   padding-left: 0.4em;
 }
 
+.token-actions-regen button {
+  width: calc(1/3*100% - (1 - 1/3)*0.5em) !important;
+}
+
 .token-actions button {
   display: inline-flex;
   justify-content: center;

app/templates/account/settings.hbs

@@ -26,7 +26,7 @@
         developer.travis-ci.com
       </ExternalLinkTo>.
     </p>
-    <AccountToken @token={{this.auth.token}}/>
+    <AccountToken @token={{this.auth.token}} @showRegenerateButton={{true}}/>
   </section>
   <section>
     <h3>

app/templates/components/account-token.hbs

@@ -2,7 +2,7 @@
   <span class="label">
     Token
   </span>
-  <span class="token-field">
+  <span class="token-field {{if this.showRegenerateButton 'token-field-regen' ''}}">
     {{#if this.showCopySuccess}}
       <span class="token-copied-text">
         Token copied!
@@ -18,7 +18,7 @@
     {{/if}}
   </span>
 </div>
-<div class="token-actions">
+<div class="{{if this.showRegenerateButton 'token-actions-regen' ''}} token-actions">
   <CopyButton
     class="copy-button"
     @clipboardText={{this.token}}
@@ -34,4 +34,12 @@
       {{if this.tokenIsVisible "Hide token" "View token"}}
     </span>
   </button>
+  {{#if this.showRegenerateButton}}
+  <button class="show-token" onclick={{action "regenerateToken"}}>
+    <SvgImage @name="icon-restart" @class="icon" />
+    <span>
+      Regenerate
+    </span>
+  </button>
+  {{/if}}
 </div>