better oauth workflow (redirection after code consumption)

src/app/components/left-side-bar/account-icon/account-icon.component.html

@@ -1,4 +1,4 @@
 <a class="account-icon"
-  href title="{{ account.info.username }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
+  href title="{{ account.info.id }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
   <img class="account-icon__avatar"  [class.account-icon__avatar--selected]="account.info.isSelected" src="{{ account.avatar }}" />
 </a>

src/app/pages/register-new-account/register-new-account.component.html

@@ -1,22 +1,32 @@
+<div class="registering-account">
+    <div *ngIf="!hasError" class="registering-account__waiting">
+        <p>loading...</p>
+    </div>
+    <div *ngIf="hasError" class="registering-account__error">
+        <h3>Oooops!</h3>
+        <p>
+            {{ errorMessage }}
+        </p> 
+
+        <a class="btn btn-info btn-sm" href title="close" [routerLink]="['/home']" role="button" style="float: right;">Quit</a>
+    </div>
+</div>
+
+
+<!-- 
 <div class="col-xs-12 col-sm-6">
-  <br/>
-  <a class="btn btn-info btn-sm" href title="close" [routerLink]="['/home']" role="button" style="float: right;">close</a>
-  <h3>Add new account</h3>
-  <br/>
-  <!-- <form (ngSubmit)="onSubmit()">
-    <label>Mastodon account</label>
-    <input type="text" class="form-control form-control-sm" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" placeholder="@nickname@mastodon.social"/>
-    <br/>
-    <button type="submit" class="btn btn-success btn-sm">Submit</button>
-  </form> -->
-
-  <!-- <p>
-    <br/>
-    <br/> Result:
-    <br/> {{ result }}
-  </p> -->
-
-  {{ result }}
+    <br />
+    <h3>Adding new account...</h3>
+    <h4>please wait</h4>
 
 
-</div>
+
+    <a class="btn btn-info btn-sm" href title="close" [routerLink]="['/home']" role="button" style="float: right;">close</a>
+
+    <br />
+   
+
+    {{ result }}
+
+
+</div> -->

src/app/pages/register-new-account/register-new-account.component.scss

@@ -0,0 +1,8 @@
+.registering-account {
+    max-width: 400px;
+    margin: 20px auto;
+    padding: 20px;
+    word-wrap: break-word;
+    white-space: normal;
+}
+

src/app/pages/register-new-account/register-new-account.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { Store, Select } from '@ngxs/store';
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { Observable } from "rxjs";
 
 import { AuthService, CurrentAuthProcess } from "../../services/auth.service";
@@ -16,21 +16,32 @@ import { MastodonService } from "../../services/mastodon.service";
 })
 export class RegisterNewAccountComponent implements OnInit {
     @Input() mastodonFullHandle: string;
-    result: string;
+
+    hasError: boolean;
+    errorMessage: string;
 
     private authStorageKey: string = 'tempAuth';
 
     constructor(
         private readonly authService: AuthService,
         private readonly store: Store,
-        private readonly activatedRoute: ActivatedRoute) {
+        private readonly activatedRoute: ActivatedRoute,
+        private readonly router: Router) {
 
         this.activatedRoute.queryParams.subscribe(params => {
+            this.hasError = false;
+
             const code = params['code'];
-            if (!code) return;
+            if (!code) {
+                this.displayError(RegistrationErrorTypes.CodeNotFound);
+                return;
+            }
 
             const appDataWrapper = <CurrentAuthProcess>JSON.parse(localStorage.getItem(this.authStorageKey));
-            if (!appDataWrapper) return;
+            if (!appDataWrapper) {
+                this.displayError(RegistrationErrorTypes.AuthProcessNotFound);
+                return;
+            }
 
             const appInfo = this.getAllSavedApps().filter(x => x.instance === appDataWrapper.instance)[0];
 
@@ -44,6 +55,7 @@ export class RegisterNewAccountComponent implements OnInit {
                     this.store.dispatch([new AddAccount(accountInfo)])
                         .subscribe(() => {
                             localStorage.removeItem(this.authStorageKey);
+                            this.router.navigate(['/home']);
                         });
                 });
         });
@@ -52,8 +64,25 @@ export class RegisterNewAccountComponent implements OnInit {
     ngOnInit() {
     }
 
+    private displayError(type: RegistrationErrorTypes) {
+        this.hasError = true;
+        switch (type) {
+            case RegistrationErrorTypes.AuthProcessNotFound:
+                this.errorMessage = 'Something when wrong in the authentication process. Please retry.'
+                break;
+            case RegistrationErrorTypes.CodeNotFound:
+                this.errorMessage = 'No authentication code returned. Please retry.'
+                break;
+        }
+    }
+
     private getAllSavedApps(): AppInfo[] {
         const snapshot = <RegisteredAppsStateModel>this.store.snapshot().registeredapps;
         return snapshot.apps;
     }
 }
+
+enum RegistrationErrorTypes {
+    CodeNotFound,
+    AuthProcessNotFound
+}