refactor(account): login & register component

npm/ng-packs/packages/account/src/lib/components/login/login.component.html

@@ -28,9 +28,9 @@
           </label>
         </div>
         <div class="mt-2">
-          <button [disabled]="inProgress" type="submit" name="Action" value="Login" class="btn btn-primary ml-1">
+          <abp-button [loading]="inProgress" type="submit">
             {{ 'AbpAccount::Login' | abpLocalization }}
-          </button>
+          </abp-button>
         </div>
       </form>
       <div style="padding-top: 20px">

npm/ng-packs/packages/account/src/lib/components/register/register.component.html

@@ -18,9 +18,9 @@
           <label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
           ><span> * </span><input type="password" id="input-password" class="form-control" formControlName="password" />
         </div>
-        <button [disabled]="inProgress" type="submit" name="Action" value="Register" class="btn btn-primary">
+        <abp-button [loading]="inProgress" type="submit">
           {{ 'AbpAccount::Register' | abpLocalization }}
-        </button>
+        </abp-button>
       </form>
       <div style="padding-top: 20px">
         <a routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>

npm/ng-packs/packages/account/src/lib/components/register/register.component.ts

@@ -1,8 +1,12 @@
+import { ConfigState, GetAppConfiguration } from '@abp/ng.core';
 import { ToasterService } from '@abp/ng.theme.shared';
 import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { throwError } from 'rxjs';
-import { catchError, finalize, take } from 'rxjs/operators';
+import { Navigate } from '@ngxs/router-plugin';
+import { Store } from '@ngxs/store';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { from, throwError } from 'rxjs';
+import { catchError, finalize, switchMap, take, tap } from 'rxjs/operators';
 import snq from 'snq';
 import { RegisterRequest } from '../../models';
 import { AccountService } from '../../services/account.service';
@@ -17,7 +21,16 @@ export class RegisterComponent {
 
   inProgress: boolean;
 
-  constructor(private fb: FormBuilder, private accountService: AccountService, private toasterService: ToasterService) {
+  constructor(
+    private fb: FormBuilder,
+    private accountService: AccountService,
+    private oauthService: OAuthService,
+    private store: Store,
+    private toasterService: ToasterService,
+  ) {
+    this.oauthService.configure(this.store.selectSnapshot(ConfigState.getOne('environment')).oAuthConfig);
+    this.oauthService.loadDiscoveryDocument();
+
     this.form = this.fb.group({
       username: ['', [required, maxLength(255)]],
       password: ['', [required, maxLength(32)]],
@@ -40,6 +53,9 @@ export class RegisterComponent {
     this.accountService
       .register(newUser)
       .pipe(
+        switchMap(() => from(this.oauthService.fetchTokenUsingPasswordFlow(newUser.userName, newUser.password))),
+        switchMap(() => this.store.dispatch(new GetAppConfiguration())),
+        tap(() => this.store.dispatch(new Navigate(['/']))),
         take(1),
         catchError(err => {
           this.toasterService.error(

npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts

@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'abp-button',
   template: `
-    <button [attr.type]="buttonType" [ngClass]="buttonClass" [disabled]="loading || disabled">
+    <button [attr.type]="type" [ngClass]="buttonClass" [disabled]="loading || disabled">
       <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
     </button>
   `,
@@ -13,7 +13,7 @@ export class ButtonComponent {
   buttonClass: string = 'btn btn-primary';
 
   @Input()
-  buttonType: string = 'button';
+  type: string = 'button';
 
   @Input()
   iconClass: string;