initial commit

src/app/settings/settings.html

@@ -0,0 +1,79 @@
+<h1>Settings</h1>
+
+<div class="description">
+  Use the forms below to change your settings.
+</div>
+
+<div class="section">
+  <h2>General</h2>
+  <form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <div class="form-group row">
+      <label for="server" class="col-sm-3 col-form-label">Server</label>
+      <div class="col-sm-9">
+        <input formControlName="server" id="server" type="text" class="form-control" placeholder="Server" />
+      </div>
+    </div>
+    <p *ngIf="error" class="error">{{error.message}}</p>
+    <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Save</button>
+  </form>
+
+</div>
+
+<div *ngIf="sessionService.getUser()">
+  <div class="section">
+    <h2>Change Password</h2>
+
+    <form [formGroup]="changePasswordForm" (ngSubmit)="changePassword()">
+      <div class="form-group row">
+        <label for="password" class="col-sm-3 col-form-label">New Password</label>
+        <div class="col-sm-9">
+          <input formControlName="password" id="password" type="password" class="form-control" />
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="password2" class="col-sm-3 col-form-label">Repeat Password</label>
+        <div class="col-sm-9">
+          <input formControlName="password2" id="password2" type="password" class="form-control" />
+        </div>
+      </div>
+      <p *ngIf="changePasswordForm.controls.password2.errors?.mismatchedPassword">
+        Passwords do not match.
+      </p>
+      <p *ngIf="changePasswordError" class="error">{{changePasswordError.message}}</p>
+      <button type="submit" class="btn btn-primary" [disabled]="!changePasswordForm.valid">Save</button>
+    </form>
+  </div>
+
+  <div class="section">
+    <h2>API Keys</h2>
+
+    <div class="container-fluid">
+      <form *ngFor="let item of keyItems; let i = index" [formGroup]="item.form">
+        <div class="row py-2">
+          <div class="col-5">
+            <input type="hidden" formControlName="id" id="id">
+            {{item.form.value.id}}
+          </div>
+          <div class="col-5">
+            <input type="text" formControlName="label" id="label">
+          </div>
+          <div class="col-2">
+            <div *ngIf="item.exists && item.form.dirty"><a (click)="updateKey(item)">Update</a></div>
+            <div *ngIf="item.exists"><a (click)="deleteKey(item)">Delete</a></div>
+            <div *ngIf="!item.exists"><a (click)="postKey(item)">Save</a></div>
+          </div>
+        </div>
+      </form>
+      <div class="row">
+        <div class="col-12">
+          <a (click)="newKey()">Create new API key</a>
+        </div>
+      </div>
+      <div class="row" *ngIf="keyError">
+        <div class="col-12">
+          <p class="error">{{keyError.message}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/settings/settings.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { SettingsPage } from './settings';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [
+    SettingsPage,
+  ],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule
+  ],
+  providers: []
+})
+export class SettingsModule { }

src/app/settings/settings.ts

@@ -0,0 +1,145 @@
+import { Component } from '@angular/core';
+import { 
+  FormGroup,
+  Validators,
+  FormBuilder,
+  AbstractControl
+} from '@angular/forms';
+import { ConfigService } from '../core/config.service';
+import { ApiKeyService } from '../core/apikey.service';
+import { SessionService } from '../core/session.service';
+import { UserService } from '../core/user.service';
+import { AppError } from '../shared/error';
+import { ApiKey } from '../shared/apikey';
+import { Util } from '../shared/util';
+import { User } from '../shared/user';
+
+class KeyItem {
+  exists: boolean;
+  form: FormGroup;
+}
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: 'settings.html'
+})
+export class SettingsPage {
+  public form: FormGroup;
+  public error: AppError;
+  private changePasswordForm: FormGroup;
+  private changePasswordError: AppError;
+  private keyItems: KeyItem[];
+  private keyError: AppError;
+
+  constructor(
+    private configService: ConfigService,
+    private apiKeyService: ApiKeyService,
+    public sessionService: SessionService,
+    private userService: UserService,
+    private fb: FormBuilder
+   ) {
+  }
+
+  ngOnInit() {
+    let server = this.configService.get('server');
+
+    this.form = this.fb.group({
+      'server': [server, Validators.required],
+    });
+
+    if(!this.sessionService.getUser()) {
+      return;
+    }
+
+    this.changePasswordForm = this.fb.group({
+      'password': [null, Validators.required],
+      'password2': [null, Validators.required]
+    }, {
+      validator: this.passwordMatchValidator
+    });
+
+    this.keyItems = [];
+
+    this.apiKeyService.getApiKeys().subscribe(keys => {
+      keys.forEach(key => {
+        this.keyItems.push({
+          exists: true,
+          form: this.fb.group({
+            'id': [key.id, Validators.required],
+            'label': [key.label, Validators.required]
+          })
+        });
+      });
+    });
+  }
+
+  onSubmit() {
+    this.configService.put('server', this.form.value.server);
+  }
+
+  changePassword() {
+    let user = new User({
+      password: this.changePasswordForm.value.password
+    });
+
+    this.userService.putUser(user).subscribe(() => {
+      this.changePasswordError = new AppError('Successfully changed password');
+    }, err => {
+      this.changePasswordError = err;
+    });
+  }
+
+  passwordMatchValidator(control: AbstractControl) {
+    if(control.get('password').value === control.get('password2').value) {
+      return null;
+    } else {
+      control.get('password2').setErrors({mismatchedPassword: true});
+    }
+  }
+
+  newKey() {
+    let key = new ApiKey({
+      id: Util.newGuid(),
+      label: ''
+    });
+
+    this.keyItems.push({
+      exists: false,
+      form: this.fb.group({
+        'id': [key.id, Validators.required],
+        'label': [key.label, Validators.required]
+      })
+    });
+  }
+
+  postKey(item: KeyItem) {
+    let key = new ApiKey(item.form.value);
+    this.apiKeyService.newApiKey(key).subscribe(() => {
+      item.exists = true;
+      item.form.markAsPristine();
+    }, err => {
+      this.keyError = err;
+    })
+  }
+
+  updateKey(item: KeyItem) {
+    let key = new ApiKey(item.form.value);
+    this.apiKeyService.putApiKey(key).subscribe(newKey => {
+      item.form.markAsPristine();
+    }, err => {
+      this.keyError = err;
+    })
+  }
+
+  deleteKey(item: KeyItem) {
+    let key = new ApiKey(item.form.value);
+    this.apiKeyService.deleteApiKey(key.id).subscribe(() => {
+      // remove item from list
+      this.keyItems = this.keyItems.filter(item => {
+        return item.form.value['id'] !== key.id;
+      });
+    }, err => {
+      this.keyError = err;
+    })
+  }
+}