feat(settings): access tokens

bleenco · Aug 20, 2017 · 4ee4f6e · 4ee4f6e
1 parent d20ae17
commit 4ee4f6e
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 42 deletions.
diff --git a/src/api/db/migrations.ts b/src/api/db/migrations.ts
@@ -14,6 +14,14 @@ export function create(): Promise<null> {
       t.string('avatar').notNullable().defaultTo('/avatars/user.svg');
       t.timestamps();
     })
+    .then(() => schema.createTableIfNotExists('access_tokens', (t: knex.TableBuilder) => {
+      t.increments('id').unsigned().primary();
+      t.string('description').notNullable();
+      t.string('token').notNullable();
+      t.integer('users_id').notNullable();
+      t.foreign('users_id').references('users.id');
+      t.timestamps();
+    }))
     .then(() => schema.createTableIfNotExists('repositories', (t: knex.TableBuilder) => {
       t.increments('id').unsigned().primary();
       t.integer('github_id');

diff --git a/src/app/assets/public/images/icons/key.svg b/src/app/assets/public/images/icons/key.svg
diff --git a/src/app/assets/public/images/icons/remove.svg b/src/app/assets/public/images/icons/remove.svg
diff --git a/src/app/components/app-repository/app-repository.component.html b/src/app/components/app-repository/app-repository.component.html
@@ -11,8 +11,8 @@ <h1>{{ repo?.full_name }}</h1>
     <div class="nav-center"></div>
     <div class="nav-right">
       <div class="group-buttons">
-        <button class="group-button is-active">Builds</button>
-        <button class="group-button">Settings</button>
+        <button class="group-button" [class.is-active]="tab === 'builds'" (click)="tab = 'builds'">Builds</button>
+        <button class="group-button" [class.is-active]="tab === 'settings'" (click)="tab = 'settings'">Settings</button>
       </div>
     </div>
   </div>
@@ -51,18 +51,31 @@ <h1>{{ repo?.full_name }}</h1>
             </div>
           </div>
 
-          <div class="column is-12" *ngIf="!repo?.builds.length">
+          <div class="column is-12" *ngIf="!repo?.builds.length && tab === 'builds'">
             <div class="notification is-info">
               No builds has been runned yet.
             </div>
           </div>
 
-          <div class="column is-12" *ngIf="repo?.builds.length">
+          <div class="column is-12" *ngIf="repo?.builds.length && tab === 'builds'">
             <div class="columns list-item" *ngFor="let build of repo.builds; let i = index;" [ngClass]="{ 'is-queued': build.status === 'queued', 'is-success': build.status === 'success', 'is-running': build.status === 'running', 'is-errored': build.status === 'failed' }" (click)="gotoBuild(build.id)">
               <app-build-item [build]="build"></app-build-item>
             </div>
           </div>
 
+          <div class="column is-12" *ngIf="tab === 'settings'">
+            <div class="columns is-multiline">
+              <div class="column is-12">
+                <h2>Settings</h2>
+              </div>
+              <div class="column is-12">
+                <form class="form" #repoForm="ngForm" (ngSubmit)="saveRepoSettings($event)">
+
+                </form>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
     </div>

diff --git a/src/app/components/app-repository/app-repository.component.ts b/src/app/components/app-repository/app-repository.component.ts
@@ -13,6 +13,7 @@ import { format, distanceInWordsToNow } from 'date-fns';
 export class AppRepositoryComponent implements OnInit, OnDestroy {
   loading: boolean;
   sub: Subscription;
+  tab: 'builds' | 'settings';
   id: string;
   repo: any;
   url: string;
@@ -29,6 +30,7 @@ export class AppRepositoryComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.tab = 'settings';
     this.url = this.config.url;
 
     this.route.params.subscribe(params => {

diff --git a/src/app/components/app-settings/app-settings.component.html b/src/app/components/app-settings/app-settings.component.html
@@ -29,45 +29,89 @@ <h1>My Settings</h1>
         </figure>
       </div>
       <div class="column is-8">
-        <form method="post" #profileForm="ngForm" (ngSubmit)="updateProfile($event)">
-          <div class="notification is-success" *ngIf="userSaved">
-            <button class="delete" (click)="userSaved = false"></button>
-            Data successfully updated.
-          </div>
+
+        <div class="settings-container">
           <h2>User Settings</h2>
-          <div class="form-field">
-            <label class="form-label">Email (Username)</label>
-            <input class="form-input" type="text" placeholder="Email" name="email" required readonly [(ngModel)]="user.email">
-          </div>
-          <div class="form-field">
-            <label class="form-label">Full Name</label>
-            <input class="form-input" type="text" placeholder="Full Name" name="fullname" required [(ngModel)]="user.fullname">
-          </div>
-          <input type="hidden" name="id" [(ngModel)]="user.id">
-          <div class="form-field">
-            <button type="submit" class="button green float-right" [disabled]="!profileForm.form.valid">Save Details</button>
-          </div>
-        </form>
+          <form method="post" #profileForm="ngForm" (ngSubmit)="updateProfile($event)">
+            <div class="notification is-success" *ngIf="userSaved">
+              <button class="delete" (click)="userSaved = false"></button>
+              Data successfully updated.
+            </div>
+            <div class="form-field">
+              <label class="form-label">Email (Username)</label>
+              <input class="form-input" type="text" placeholder="Email" name="email" required readonly [(ngModel)]="user.email">
+            </div>
+            <div class="form-field">
+              <label class="form-label">Full Name</label>
+              <input class="form-input" type="text" placeholder="Full Name" name="fullname" required [(ngModel)]="user.fullname">
+            </div>
+            <input type="hidden" name="id" [(ngModel)]="user.id">
+            <div class="form-field">
+              <button type="submit" class="button green float-right" [disabled]="!profileForm.form.valid">Save Details</button>
+            </div>
+          </form>
+        </div>
 
-        <form method="post" #passwordForm="ngForm" (ngSubmit)="updatePassword($event)">
-          <div class="notification is-success" *ngIf="userPasswordSaved">
-            <button class="delete" (click)="userPasswordSaved = false"></button>
-            Password successfully updated.
+        <div class="settings-container">
+          <h2>Access Tokens</h2>
+
+          <div class="tokens">
+            <div class="token-item">
+              <div class="columns">
+                <div class="column is-1">
+                  <img src="images/icons/key.svg" class="token-icon">
+                </div>
+                <div class="column is-10">
+                  <p>GitHub Access Token</p>
+                </div>
+                <div class="column is-1">
+                  <span class="icon" title="Delete Token">
+                    <img src="images/icons/remove.svg">
+                  </span>
+                </div>
+              </div>
+            </div>
           </div>
+
+          <form #tokenForm="ngForm" (ngSubmit)="updateToken($event)">
+            <h2>Add New Access Token</h2>
+            <div class="form-field">
+              <label class="form-label">Token Description</label>
+              <input class="form-input" type="text" placeholder="Access Token Description" name="token_description" required [(ngModel)]="token.description">
+            </div>
+            <div class="form-field">
+              <label class="form-label">Token</label>
+              <input class="form-input" type="password" placeholder="Access Token" name="token" required [(ngModel)]="token.token">
+            </div>
+            <input type="hidden" name="id" [(ngModel)]="user.id">
+            <div class="form-field">
+              <button type="submit" class="button green float-right" [disabled]="!tokenForm.form.valid">Add Token</button>
+            </div>
+          </form>
+        </div>
+
+        <div class="settings-container">
           <h2>Password Update</h2>
-          <div class="form-field">
-            <label class="form-label">New Password</label>
-            <input class="form-input" type="password" placeholder="New Password" name="password" required [(ngModel)]="userPass.password">
-          </div>
-          <div class="form-field">
-            <label class="form-label">Repeat New Password</label>
-            <input class="form-input" type="password" placeholder="Repeat New Password" name="repeat_password" required [(ngModel)]="userPass.repeat_password" validateEqual="password">
-          </div>
-          <input type="hidden" name="id" [(ngModel)]="userPass.id">
-          <div class="form-field">
-            <button type="submit" class="button green float-right" [disabled]="!passwordForm.form.valid">Save Details</button>
-          </div>
-        </form>
+          <form method="post" #passwordForm="ngForm" (ngSubmit)="updatePassword($event)">
+            <div class="notification is-success" *ngIf="userPasswordSaved">
+              <button class="delete" (click)="userPasswordSaved = false"></button>
+              Password successfully updated.
+            </div>
+            <div class="form-field">
+              <label class="form-label">New Password</label>
+              <input class="form-input" type="password" placeholder="New Password" name="password" required [(ngModel)]="userPass.password">
+            </div>
+            <div class="form-field">
+              <label class="form-label">Repeat New Password</label>
+              <input class="form-input" type="password" placeholder="Repeat New Password" name="repeat_password" required [(ngModel)]="userPass.repeat_password" validateEqual="password">
+            </div>
+            <input type="hidden" name="id" [(ngModel)]="userPass.id">
+            <div class="form-field">
+              <button type="submit" class="button green float-right" [disabled]="!passwordForm.form.valid">Update Password</button>
+            </div>
+          </form>
+        </div>
+
       </div>
     </div>
   </div>

diff --git a/src/app/components/app-settings/app-settings.component.ts b/src/app/components/app-settings/app-settings.component.ts
@@ -17,6 +17,11 @@ export interface IUserPass {
   repeat_password;
 }
 
+export interface IAccessToken {
+  token: string;
+  description: string;
+}
+
 @Component({
   selector: 'app-settings',
   templateUrl: 'app-settings.component.html'
@@ -28,6 +33,7 @@ export class AppSettingsComponent implements OnInit {
   userPasswordSaved: boolean;
   userPass: IUserPass;
   avatarUrl: string;
+  token: IAccessToken;
 
   constructor(private api: ApiService, private auth: AuthService, private config: ConfigService) { }
 
@@ -47,7 +53,9 @@ export class AppSettingsComponent implements OnInit {
       repeat_password: ''
     };
 
-    this.avatarUrl = this.config.url + '/' + data.avatar;
+    this.avatarUrl = this.config.url + data.avatar;
+
+    this.token = { token: '', description: '' };
   }
 
   updateProfile(e: MouseEvent): void {

diff --git a/src/app/styles/forms.sass b/src/app/styles/forms.sass
@@ -1,10 +1,9 @@
 form
-  margin: 0 0 30px
+  margin: 0 0 20px
   border-radius: 4px
   border: 1px solid $border
   background: $background
 
-
 .form-field
   display: inline-block
   width: 100%

diff --git a/src/app/styles/settings.sass b/src/app/styles/settings.sass
@@ -1,5 +1,48 @@
 .profile-image
+  background: $background
+  padding: 20px
+  border-radius: 10px
+  border: 1px solid $divider
+
   img
     border-radius: 4px
 
+.settings-container
+  padding: 20px
+  background: $background-secondary
+  border-radius: 4px
+  border: 1px solid $divider
+  margin: 0 0 20px 0
+
+  h2
+    display: block
+    margin-bottom: 10px
+    font-weight: 700
+
+  .tokens
+    width: 100%
+    margin: 10px 0 20px 0
+    display: inline-block
+
+    .token-item
+      display: block
+      padding: 10px 5px
+      background: linear-gradient(to bottom, $background, $background-secondary)
+      border: 1px solid $divider
+      border-radius: 10px
+
+      .token-icon
+        display: block
+        width: 12px
+        margin: 0 auto
+
+      .column
+        display: flex
+        align-items: center
+
+        .icon
+          display: block
 
+      p
+        font-size: 14px
+        font-weight: bold