add account and security component

Author: chriskapp

projects/fusio-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-fusio-sdk",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "SDK to integrate Fusio into an Angular app",
   "keywords": [
     "Fusio",

projects/fusio-sdk/src/lib/component/account/account.component.css

@@ -0,0 +1,28 @@
+
+<fusio-message [response]="response"></fusio-message>
+<div class="row">
+  <div class="col-md-6">
+    <form *ngIf="user" (ngSubmit)="doSave()">
+      <div class="mb-3">
+        <label for="name" class="form-label">Username</label>
+        <input type="text" class="form-control" id="name" name="name" [ngModel]="user.name" disabled readonly>
+      </div>
+      <div class="mb-3">
+        <label for="email" class="form-label">Email</label>
+        <input type="email" class="form-control" id="email" name="email" [(ngModel)]="user.email">
+      </div>
+      <div class="mb-3">
+        <label for="points" class="form-label">Points</label>
+        <input type="number" class="form-control" id="points" name="points" [ngModel]="user.points" disabled readonly>
+      </div>
+      <div class="mb-3">
+        <label for="scopes" class="form-label">Scopes</label>
+        <input type="text" class="form-control" id="scopes" name="scopes" [ngModel]="user.scopes" disabled readonly>
+      </div>
+      <button type="submit" class="btn btn-primary">Update</button>
+    </form>
+  </div>
+  <div class="col-md-6" *ngIf="email">
+    <img ngxGravatar [email]="email" [size]="128" class="ms-4" />
+  </div>
+</div>

projects/fusio-sdk/src/lib/component/account/account.component.html

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import {ConsumerService} from "../../service/consumer.service";
+import {Message} from "fusio-sdk/dist/src/generated/consumer/Message";
+import {UserAccount} from "fusio-sdk/dist/src/generated/consumer/UserAccount";
+import {ErrorConverter} from "../../util/error-converter";
+
+@Component({
+  selector: 'fusio-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.css']
+})
+export class AccountComponent implements OnInit {
+
+  user?: UserAccount;
+  response?: Message;
+  email: string = '';
+
+  constructor(private consumer: ConsumerService) { }
+
+  async ngOnInit(): Promise<void> {
+    try {
+      const account = await this.consumer.getClient().getConsumerAccount();
+      const response = await account.consumerActionUserGet();
+
+      this.user = response.data;
+      this.email = this.user.email || '';
+      this.response = undefined;
+    } catch (error) {
+      this.response = ErrorConverter.convert(error);
+    }
+  }
+
+  async doSave() {
+    try {
+      if (!this.user) {
+        return;
+      }
+
+      const account = await this.consumer.getClient().getConsumerAccount();
+      const response = await account.consumerActionUserUpdate(this.user);
+
+      this.response = response.data;
+    } catch (error) {
+      this.response = ErrorConverter.convert(error);
+    }
+  }
+
+}

projects/fusio-sdk/src/lib/component/account/account.component.ts

@@ -0,0 +1,23 @@
+
+<fusio-message [response]="response"></fusio-message>
+<div class="row">
+  <div class="col-md-6">
+    <form *ngIf="credentials" (ngSubmit)="doSave()">
+      <div class="mb-3">
+        <label for="name" class="form-label">Old password</label>
+        <input type="password" class="form-control" id="name" name="name" [(ngModel)]="credentials.oldPassword">
+      </div>
+      <div class="mb-3">
+        <label for="email" class="form-label">New password</label>
+        <input type="password" class="form-control" id="email" name="email" [(ngModel)]="credentials.newPassword">
+      </div>
+      <div class="mb-3">
+        <label for="points" class="form-label">Verify password</label>
+        <input type="password" class="form-control" id="points" name="points" [(ngModel)]="credentials.verifyPassword">
+      </div>
+      <button type="submit" class="btn btn-primary">Change password</button>
+    </form>
+  </div>
+  <div class="col-md-6">
+  </div>
+</div>

projects/fusio-sdk/src/lib/component/security/security.component.css

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import {ConsumerService} from "../../service/consumer.service";
+import {AccountChangePassword} from "fusio-sdk/dist/src/generated/consumer/AccountChangePassword";
+import {Message} from "fusio-sdk/dist/src/generated/consumer/Message";
+import {ErrorConverter} from "../../util/error-converter";
+
+@Component({
+  selector: 'fusio-security',
+  templateUrl: './security.component.html',
+  styleUrls: ['./security.component.css']
+})
+export class SecurityComponent implements OnInit {
+
+  credentials: AccountChangePassword = {
+    oldPassword: '',
+    newPassword: '',
+    verifyPassword: '',
+  };
+  response?: Message;
+
+  constructor(private consumer: ConsumerService) { }
+
+  ngOnInit(): void {
+  }
+
+  async doSave() {
+    try {
+      if (!this.credentials) {
+        return;
+      }
+
+      const password = await this.consumer.getClient().getConsumerAccountChangePassword();
+      const response = await password.consumerActionUserChangePassword(this.credentials);
+
+      this.response = response.data;
+    } catch (error) {
+      this.response = ErrorConverter.convert(error);
+    }
+  }
+
+}

projects/fusio-sdk/src/lib/component/security/security.component.html

@@ -17,8 +17,11 @@ import {ConfirmComponent} from "./component/password/confirm/confirm.component";
 import {ResetComponent} from "./component/password/reset/reset.component";
 import {RegisterComponent} from "./component/register/register.component";
 import {ActivateComponent} from "./component/register/activate/activate.component";
+import {AccountComponent} from './component/account/account.component';
+import {SecurityComponent} from './component/security/security.component';
 import {Config, FUSIO_CONFIG} from "./config/config";
 import {NgxCaptchaModule} from "ngx-captcha";
+import {GravatarModule} from "ngx-gravatar";
 
 @NgModule({
   declarations: [
@@ -35,6 +38,8 @@ import {NgxCaptchaModule} from "ngx-captcha";
     ScopesComponent,
     SearchComponent,
     SidebarComponent,
+    AccountComponent,
+    SecurityComponent,
   ],
   imports: [
     BrowserModule,
@@ -43,6 +48,7 @@ import {NgxCaptchaModule} from "ngx-captcha";
     RouterModule,
     NgbModule,
     NgxCaptchaModule,
+    GravatarModule,
   ],
   exports: [
     EmptyComponent,