✔ Fix Form ~

src/api/controllers/lost-account-/lost-account-find.controller.ts

@@ -80,15 +80,15 @@ export class LostAccountFindController {
           }
         }, res_raw.status || HttpStatus.BAD_REQUEST);
       }
-      throw new Error('Data Tidak Lengkap!');
+      throw new Error('Akun Tidak Ditemukan!');
     } catch (error) {
       if (error instanceof HttpException) throw error;
       throw new HttpException({
-        info: '🙄 400 - Lost Account API :: Pencarian Gagal 😪',
+        info: '🙄 404 - Lost Account API :: Pencarian Gagal 😪',
         result: {
-          message: 'Data Tidak Lengkap!'
+          message: 'Akun Tidak Ditemukan!'
         }
-      }, HttpStatus.BAD_REQUEST);
+      }, HttpStatus.NOT_FOUND);
     }
   }
 

src/api/controllers/lost-account-/lost-account-reset.controller.ts

@@ -48,13 +48,13 @@ export class LostAccountResetController {
           }
         };
       }
-      throw new Error('Data Tidak Lengkap!');
+      throw new Error('Token Expired!');
     } catch (error) {
       if (error instanceof HttpException) throw error;
       throw new HttpException({
         info: '🙄 400 - Lost Account API :: Pencarian Gagal 😪',
         result: {
-          message: 'Data Tidak Lengkap!'
+          message: 'Token Expired!'
         }
       }, HttpStatus.BAD_REQUEST);
     }

src/app/_pages/create/fansub-create/fansub-create.component.html

@@ -9,7 +9,7 @@
   <!-- Detail -->
   <div class="row px-3">
     <div class="col-12">
-      <form [formGroup]="fg" (submit)="onSubmit();">
+      <form [formGroup]="fg" (submit)="onSubmit();" *ngIf="fg">
         <div class="row mt-3 mb-3">
           <div class="col-12 sticky-top bg-bifeldy">
             <h2 class="pt-3 border-bottom-dotted">

src/app/_pages/fansub/fansub-edit/fansub-edit.component.html

@@ -9,7 +9,7 @@
   <!-- Detail -->
   <div class="row px-3">
     <div class="col-12">
-      <form [formGroup]="fg" (submit)="onSubmit();">
+      <form [formGroup]="fg" (submit)="onSubmit();" *ngIf="fg">
         <div class="row mt-3 mb-3">
           <div class="col-12 sticky-top bg-bifeldy">
             <h2 class="pt-3 border-bottom-dotted">

src/app/_pages/login/login.component.html

@@ -11,7 +11,7 @@
         <div class="col-lg-7 col-md-9 me-auto p-0">
           <div class="card bg-transparent border-0">
             <div class="card-body">
-              <form [formGroup]="fg" class="m-2" (ngSubmit)="onClickedSubmit()">
+              <form [formGroup]="fg" class="m-2" (ngSubmit)="onClickedSubmit()" *ngIf="fg">
                 <div class="text-center mb-4">
                   <img class="mb-4" src="{{ ENV.baseUrl }}/assets/img/logo/login.png" style="max-width: 128px;" />
                   <h1 class="h3 mb-3 font-weight-normal">Hai, Jumpa Lagi! >_<"</h1>

src/app/_pages/register/register.component.html

@@ -6,7 +6,7 @@
         <div class="col-lg-7 col-md-9 me-auto p-0">
           <div class="card bg-transparent border-0">
             <div class="card-body">
-              <form [formGroup]="fg" class="m-2" (ngSubmit)="onClickedSubmit()">
+              <form [formGroup]="fg" class="m-2" (ngSubmit)="onClickedSubmit()" *ngIf="fg">
                 <div class="text-center mb-4">
                   <img class="mb-4" src="{{ ENV.baseUrl }}/assets/img/logo/register.png" style="max-width: 128px;" />
                   <h1 class="h3 mb-3 font-weight-normal">Hai, Selamat Datang! >_<"</h1>

src/app/_pages/register/register.component.ts

@@ -175,9 +175,13 @@ export class RegisterComponent implements OnInit, OnDestroy {
 
   captcha(captchaResponse, captchaRef): void {
     this.gs.log(`[GOOGLE_CAPTCHA] ${captchaResponse}`);
-    this.captchaRef = captchaRef;
     if (captchaResponse) {
+      this.captchaRef = captchaRef;
       this.fg.controls['g-recaptcha-response'].patchValue(captchaResponse);
+    } else {
+      if (this.fg.value['g-recaptcha-response']) {
+        this.fg.controls['g-recaptcha-response'].patchValue(null);
+      }
     }
   }
 

src/app/_pages/reset-password/reset-password.component.html

@@ -10,11 +10,11 @@
                 <h1 class="h3 mb-3 font-weight-normal">Hikz, Akun Kamu Kenapa (?)</h1>
                 <p class="text-warning">{{ resetInfo }}</p>
               </div>
-              <mat-vertical-stepper [orientation]="(stepperOrientation | async)!" #stepper style="background-color: transparent;">
+              <mat-vertical-stepper #stepper [orientation]="(stepperOrientation | async)!" style="background-color: transparent;">
 
                 <mat-step [stepControl]="fg1" [editable]="false">
                   <ng-template matStepLabel>Cari & Cek Akun</ng-template>
-                  <form [formGroup]="fg1" class="m-2">
+                  <form [formGroup]="fg1" class="m-2" *ngIf="fg1">
                     <div class="form-group row py-2">
                       <label for="userNameOrEmail" class="col-md-4 col-form-label text-md-end">Surel / Nama Pengguna</label>
                       <div class="col-md-8">
@@ -34,15 +34,27 @@ <h1 class="h3 mb-3 font-weight-normal">Hikz, Akun Kamu Kenapa (?)</h1>
                     <div class="form-group row mb-0 py-2">
                       <div class="col offset-md-4">
                         <re-captcha #captchaRef formControlName="g-recaptcha-response" [siteKey]="G_CAPTCHA_SITE_KEY"
-                          (resolved)="findLostAccount($event, captchaRef, stepper)"></re-captcha>
+                          (resolved)="captcha($event, captchaRef)"></re-captcha>
+                      </div>
+                    </div>
+                    <div class="form-group row mb-0 py-2">
+                      <div class="col-md-8 offset-md-4">
+                        <div class="row">
+                          <div class="col-12">
+                            <button mat-flat-button color="primary" class="w-100" type="button"
+                              [disabled]="submitted || fg1.invalid" (click)="findAccount()">
+                              Cari Akun <mat-icon class="ms-1">search</mat-icon>
+                            </button>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </form>
                 </mat-step>
 
                 <mat-step [stepControl]="fg2" [editable]="false">
                   <ng-template matStepLabel>Ubah Kata Sandi</ng-template>
-                  <form [formGroup]="fg2" class="m-2">
+                  <form [formGroup]="fg2" class="m-2" *ngIf="fg2">
                     <div class="form-group row py-2">
                       <label for="token" class="col-md-4 col-form-label text-md-end">Token</label>
                       <div class="col-md-8">
@@ -84,7 +96,7 @@ <h1 class="h3 mb-3 font-weight-normal">Hikz, Akun Kamu Kenapa (?)</h1>
                         <div class="row">
                           <div class="col-12">
                             <button mat-flat-button color="primary" class="w-100" type="button"
-                              [disabled]="submitted" (click)="resetAccount(stepper)">
+                              [disabled]="submitted || fg2.invalid" (click)="resetAccount()">
                               Atur Ulang Akun <mat-icon class="ms-1">check_circle_outline</mat-icon>
                             </button>
                           </div>

src/app/_pages/reset-password/reset-password.component.ts

@@ -1,7 +1,8 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { StepperOrientation } from '@angular/cdk/stepper';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatStepper } from '@angular/material/stepper';
 import { ActivatedRoute, Router } from '@angular/router';
 import { map, Observable } from 'rxjs';
 
@@ -23,11 +24,14 @@ import { CryptoService } from '../../_shared/services/crypto.service';
 })
 export class ResetPasswordComponent implements OnInit, OnDestroy {
 
+  @ViewChild('stepper', { static: true }) stepper: MatStepper;
+
   stepperOrientation: Observable<StepperOrientation>;
 
   fg1: FormGroup;
   fg2: FormGroup;
 
+  captchaRef = null;
   submitted = false;
 
   returnUrl = '/';
@@ -38,6 +42,7 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
   subsVerify = null;
   subsDialog = null;
   subsUser = null;
+  timedOut = null;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -65,7 +70,12 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.subsFindLostAccount?.unsubscribe();
+    this.subsResetLostAccount?.unsubscribe();
+    this.subsVerify?.unsubscribe();
+    this.subsDialog?.unsubscribe();
     this.subsUser?.unsubscribe();
+    this.timedOut?.unsubscribe();
   }
 
   ngOnInit(): void {
@@ -76,6 +86,14 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
         next: user => {
           if (user) {
             this.router.navigateByUrl(this.returnUrl);
+          } else if (!this.timedOut) {
+            this.timedOut = setTimeout(() => {
+              const token = this.activatedRoute.snapshot.queryParamMap.get('token');
+              if (token) {
+                this.fg2.controls['token'].patchValue(token);
+                this.stepper.next();
+              }
+            }, 0);
           }
         }
       });
@@ -92,46 +110,60 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
       'g-recaptcha-response': [null, [Validators.required, Validators.pattern(CONSTANTS.regexEnglishKeyboardKeys)]]
     });
     this.fg2 = this.fb.group({
-      token: [this.activatedRoute.snapshot.queryParamMap.get('token'), [Validators.required, Validators.pattern(CONSTANTS.regexEnglishKeyboardKeys)]],
+      token: [null, [Validators.required, Validators.pattern(CONSTANTS.regexEnglishKeyboardKeys)]],
       password: [null, [Validators.required, Validators.minLength(8), Validators.pattern(CONSTANTS.regexEnglishKeyboardKeys)]]
     });
   }
 
-  findLostAccount(captchaResponse, captchaRef, stepper): void {
+  captcha(captchaResponse, captchaRef): void {
     this.gs.log(`[GOOGLE_CAPTCHA] ${captchaResponse}`);
     if (captchaResponse) {
+      this.captchaRef = captchaRef;
       this.fg1.controls['g-recaptcha-response'].patchValue(captchaResponse);
-      this.subsFindLostAccount = this.us.findLostAccount({
-        userNameOrEmail: this.fg1.value.userNameOrEmail,
-        'g-recaptcha-response': this.fg1.value['g-recaptcha-response']
-      }).subscribe({
-        next: res => {
-          this.gs.log('[USER_FIND_LOST_ACCOUNT_SUCCESS]', res);
-          this.subsDialog = this.ds.openInfoDialog({
-            data: {
-              title: res.result.title,
-              htmlMessage: res.result.message,
-              confirmText: 'Tutup'
-            }
-          }).afterClosed().subscribe({
-            next: re => {
-              this.gs.log('[INFO_DIALOG_CLOSED]', re);
-              this.subsDialog.unsubscribe();
-            }
-          });
-          stepper.next();
-          captchaRef.reset();
-        },
-        error: err => {
-          this.gs.log('[USER_FIND_LOST_ACCOUNT_ERROR]', err);
-          this.resetInfo = err.result?.message || err.info;
-          captchaRef.reset();
-        }
-      });
+    } else {
+      if (this.fg1.value['g-recaptcha-response']) {
+        this.fg1.controls['g-recaptcha-response'].patchValue(null);
+      }
     }
   }
 
-  resetAccount(stepper): void {
+  findAccount(): void {
+    this.bs.busy();
+    this.submitted = true;
+    this.subsFindLostAccount = this.us.findLostAccount({
+      userNameOrEmail: this.fg1.value.userNameOrEmail,
+      'g-recaptcha-response': this.fg1.value['g-recaptcha-response']
+    }).subscribe({
+      next: res => {
+        this.gs.log('[USER_FIND_LOST_ACCOUNT_SUCCESS]', res);
+        this.bs.idle();
+        this.submitted = false;
+        this.subsDialog = this.ds.openInfoDialog({
+          data: {
+            title: res.result.title,
+            htmlMessage: res.result.message,
+            confirmText: 'Tutup'
+          }
+        }).afterClosed().subscribe({
+          next: re => {
+            this.gs.log('[INFO_DIALOG_CLOSED]', re);
+            this.subsDialog.unsubscribe();
+          }
+        });
+        this.stepper.next();
+        this.captchaRef.reset();
+      },
+      error: err => {
+        this.gs.log('[USER_FIND_LOST_ACCOUNT_ERROR]', err);
+        this.bs.idle();
+        this.submitted = false;
+        this.resetInfo = err.result?.message || err.info;
+        this.captchaRef.reset();
+      }
+    });
+  }
+
+  resetAccount(): void {
     this.bs.busy();
     this.submitted = true;
     this.subsResetLostAccount = this.us.resetLostAccount({
@@ -163,7 +195,7 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
         this.bs.idle();
         this.submitted = false;
         this.resetInfo = err.result?.message || err.info;
-        stepper.reset();
+        this.stepper.reset();
       }
     });
   }

src/app/_pages/verify/verify.component.html

@@ -19,7 +19,7 @@ <h1 class="h3 mb-3 font-weight-normal">Yuhu~, Ayo Verifikasi! >_<"</h1>
 
                 <mat-step [stepControl]="fg1" [editable]="false">
                   <ng-template matStepLabel>Cari Tanda Pengenal</ng-template>
-                  <form [formGroup]="fg1" class="m-2">
+                  <form [formGroup]="fg1" class="m-2" *ngIf="fg1">
                     <div class="form-group row py-2">
                       <label for="nik" class="col-md-4 col-form-label text-md-end">NIK KTP</label>
                       <div class="col-md-8">
@@ -55,15 +55,27 @@ <h1 class="h3 mb-3 font-weight-normal">Yuhu~, Ayo Verifikasi! >_<"</h1>
                     <div class="form-group row mb-0 py-2">
                       <div class="col offset-md-4">
                         <re-captcha #captchaRef formControlName="g-recaptcha-response" [siteKey]="G_CAPTCHA_SITE_KEY"
-                          (resolved)="cekNIK($event, captchaRef, stepper)"></re-captcha>
+                          (resolved)="captcha($event, captchaRef)"></re-captcha>
+                      </div>
+                    </div>
+                    <div class="form-group row mb-0 py-2">
+                      <div class="col-md-8 offset-md-4">
+                        <div class="row">
+                          <div class="col-12">
+                            <button mat-flat-button color="primary" class="w-100" type="button"
+                              [disabled]="submitted || fg1.invalid" (click)="findNik()">
+                              Cari KTP <mat-icon class="ms-1">search</mat-icon>
+                            </button>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </form>
                 </mat-step>
 
                 <mat-step [stepControl]="fg2" [editable]="false">
                   <ng-template matStepLabel>Periksa Data Identitas</ng-template>
-                  <form [formGroup]="fg2" class="m-2">
+                  <form [formGroup]="fg2" class="m-2" *ngIf="fg2">
                     <!-- <div class="form-group row py-2">
                       <label for="nik" class="col-md-4 col-form-label text-md-end">NIK</label>
                       <div class="col-md-8">