initial commit

src/app/pages/settings/settings.page.html

@@ -0,0 +1,30 @@
+<form [formGroup]="form" (ngSubmit)="save()" #formDirective="ngForm" *ngIf="user">
+  <mat-card>
+    <mat-card-content>
+      <mat-form-field>
+        <input matInput formControlName="username" type="text">
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput placeholder="{{'settings.email' | i18n}}" formControlName="email" type="email">
+        <mat-error *ngIf="hasError('email')">
+          {{'settings.email.error' | i18n}}
+        </mat-error>
+      </mat-form-field>
+      <mat-form-field>
+        <textarea matInput placeholder="{{'settings.about' | i18n}}" formControlName="about"></textarea>
+        <mat-error>
+          {{'settings.about.error' | i18n}}
+        </mat-error>
+      </mat-form-field>
+      <mat-slide-toggle (change)="darkThemeChange($event)" [checked]="user.darkTheme">
+        {{'settings.darkTheme' | i18n}}
+      </mat-slide-toggle>
+    </mat-card-content>
+    <mat-card-actions>
+      <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+        {{'settings.update' | i18n}}
+      </button>
+    </mat-card-actions>
+  </mat-card>
+
+</form>

src/app/pages/settings/settings.page.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}

src/app/pages/settings/settings.page.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
+
+import { UserService } from '../../services/user.service';
+
+@Component({
+  selector: 'page-settings',
+  templateUrl: './settings.page.html',
+  styleUrls: [ './settings.page.scss' ]
+})
+export class PageSettings implements OnInit {
+
+  auth: any;
+  user: any;
+  working: boolean = false;
+  form: FormGroup;
+  @ViewChild('formDirective') private formDirective: NgForm;
+
+  constructor(
+    private userService: UserService,
+    private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      username: [ { disabled: true }, Validators.nullValidator ],
+      email: [ '', Validators.nullValidator ],
+      about: [ '', Validators.nullValidator ],
+      darkTheme: [ '', Validators.nullValidator ],
+    });
+
+    this.form.get('username').disable();
+
+    this.userService.get().subscribe(user => {
+      this.user = user;
+      this.form.get('username').setValue(this.user.username);
+      this.form.get('email').setValue(this.user.email);
+      this.form.get('about').setValue(this.user.about);
+      this.form.get('darkTheme').setValue(this.user.darkTheme);
+    })
+  }
+
+  darkThemeChange($event) {
+    this.user.darkTheme = $event.checked;
+  }
+
+  hasError(controlName: string): boolean {
+    return this.form.controls[ controlName ].errors != null;
+  }
+
+  save(): void {
+    if (this.working) {
+      return;
+    }
+
+    this.working = true;
+
+    this.user.about = this.form.get('about').value;
+    this.user.email = this.form.get('email').value;
+
+    this.userService.update(this.user).subscribe((data) => {
+      this.user = data;
+      this.working = false;
+    }, (error) => {
+      this.working = false;
+      if (error.status == 422) {
+        let errors = {};
+        for (let code of error.error) {
+          errors[ code.field ] = errors[ code.field ] || {};
+          errors[ code.field ][ code.code ] = true;
+        }
+
+        for (let code in errors) {
+          this.form.get(code).setErrors(errors[ code ]);
+        }
+      }
+    })
+
+  }
+
+}