fix: users being able to step to the final step without submitting (#157

)
sovity · Oct 24, 2024 · c96329b · c96329b
1 parent 82757fd
commit c96329b
Show file tree

Hide file tree

Showing 21 changed files with 50 additions and 68 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ please see [changelog_updates.md](docs/dev/changelog_updates.md).
 
 #### Patch
 
+- Fixed user being able to skip to the final step without submitting in multiple components ([#121](https://github.com/sovity/authority-portal/issues/121))
 - Fixed Keycloak notifications, OTP pages ([#146](https://github.com/sovity/authority-portal/issues/146)), ([#151](https://github.com/sovity/authority-portal/issues/151))
 - Fixed provided connectors' statuses missing on the dashboard ([#138](https://github.com/sovity/authority-portal/issues/138))
 - Fixed "Hosted By Name" column in Connector CSV report ([#149](https://github.com/sovity/authority-portal/issues/149))
@@ -297,9 +298,9 @@ Major release, containing a UI rework and several new features.
 - Keycloak
   - Replace [MDS theme](authority-portal-keycloak/mds-theme) with the new version
   - Keycloak IAM needs to be upgraded to version 23.0.4
+
 - Portal Backend
   - Added environment variables
-
     ```yaml
     # CaaS Portal API Client Auth
     # will be provided by sovity

diff --git a/authority-portal-frontend/src/app/core/api/fake-backend/fake-backend.ts b/authority-portal-frontend/src/app/core/api/fake-backend/fake-backend.ts
@@ -324,13 +324,6 @@ export const AUTHORITY_PORTAL_FAKE_BACKEND: FetchAPI = async (
       return ok(IdResponseToJSON(result));
     })
 
-    .url('registration')
-    .on('POST', () => {
-      const request = RegistrationRequestDtoFromJSON(body);
-      const result = registerOrganization(request);
-      return failed(409);
-    })
-
     .url('registration')
     .on('POST', () => {
       const request = RegistrationRequestDtoFromJSON(body);

diff --git a/...-pages/provide-connector-page/provide-connector-page/provide-connector-page-form-model.ts b/...-pages/provide-connector-page/provide-connector-page/provide-connector-page-form-model.ts
@@ -44,13 +44,11 @@ export const DEFAULT_CERTIFICATE_TAB_FORM_VALUE: CertificateTabFormValue =
 export interface ProvideConnectorPageFormModel {
   connectorTab: FormGroup<ConnectorTabFormModel>;
   certificateTab: FormGroup<CertificateTabFormModel>;
-  canSwitchTabs: FormControl<boolean>;
 }
 export const DEFAULT_PROVIDE_CONNECTOR_PAGE_FORM_VALUE: ProvideConnectorPageFormValue =
   {
     connectorTab: DEFAULT_CONNECTOR_TAB_FORM_VALUE,
     certificateTab: DEFAULT_CERTIFICATE_TAB_FORM_VALUE,
-    canSwitchTabs: true,
   };
 export type ProvideConnectorPageFormValue =
   ɵFormGroupRawValue<ProvideConnectorPageFormModel>;
diff --git a/...ration-pages/provide-connector-page/provide-connector-page/provide-connector-page-form.ts b/...ration-pages/provide-connector-page/provide-connector-page/provide-connector-page-form.ts
@@ -83,7 +83,6 @@ export class ProvideConnectorPageForm {
     );
 
     return this.formBuilder.nonNullable.group({
-      canSwitchTabs: [true, Validators.requiredTrue],
       connectorTab,
       certificateTab,
     });

diff --git a/...pages/provide-connector-page/provide-connector-page/provide-connector-page.component.html b/...pages/provide-connector-page/provide-connector-page/provide-connector-page.component.html
@@ -8,8 +8,7 @@
     <mat-step
       color="accent"
       [editable]="state.state === 'editing' || state.state === 'error'"
-      [completed]="state.state === 'success'"
-      [stepControl]="form.connectorTab">
+      [completed]="state.state === 'success' || form.connectorTab.valid">
       <form class="flex flex-col w-full justify-center">
         <ng-template matStepLabel>Add Connector Details</ng-template>
         <div
@@ -96,8 +95,7 @@
     <mat-step
       color="accent"
       [editable]="state.state === 'editing' || state.state === 'error'"
-      [completed]="state.state === 'success'"
-      [stepControl]="form.certificateTab">
+      [completed]="state.state === 'success'">
       <ng-template matStepLabel>Generate Certificate</ng-template>
 
       <div class="flex justify-center items-center">
@@ -121,7 +119,9 @@
         <button
           class="btn-accent"
           [disabledBtn]="
-            state.state === 'submitting' || !form.certificateTab.valid
+            state.state === 'submitting' ||
+            !form.connectorTab.valid ||
+            !form.certificateTab.valid
           "
           (click)="registerConnector()">
           {{ createActionName }}
@@ -131,10 +131,7 @@
     <!-- Generate Certificate Step-->
 
     <!-- Final Step -->
-    <mat-step
-      color="accent"
-      [editable]="false"
-      [stepControl]="form.group.controls.canSwitchTabs">
+    <mat-step color="accent" [editable]="false">
       <ng-template matStepLabel>Setup Connector</ng-template>
 
       <app-connector-registering-success-message-page

diff --git a/...n-pages/provide-connector-page/provide-connector-page/provide-connector-page.component.ts b/...n-pages/provide-connector-page/provide-connector-page/provide-connector-page.component.ts
@@ -103,7 +103,11 @@ export class ProvideConnectorPageComponent implements OnInit, OnDestroy {
         mdsId,
         () => this.form.group.enable(),
         () => this.form.group.disable(),
-        () => this.stepper.next(),
+        () => {
+          setTimeout(() => {
+            this.stepper.next();
+          }, 0);
+        },
       ),
     );
   }

diff --git a/...ponent-page/register-central-component-page/register-central-component-page-form-model.ts b/...ponent-page/register-central-component-page/register-central-component-page-form-model.ts
@@ -41,14 +41,12 @@ export const DEFAULT_CERTIFICATE_TAB_FORM_VALUE: CertificateTabFormValue =
 export interface RegisterCentralComponentPageFormModel {
   componentTab: FormGroup<ComponentTabFormModel>;
   certificateTab: FormGroup<CertificateTabFormModel>;
-  canSwitchTabs: FormControl<boolean>;
 }
 
 export const DEFAULT_REGISTER_CENTRAL_COMPONENT_PAGE_FORM_VALUE: RegisterCentralComponentPageFormValue =
   {
     componentTab: DEFAULT_COMPONENT_TAB_FORM_VALUE,
     certificateTab: DEFAULT_CERTIFICATE_TAB_FORM_VALUE,
-    canSwitchTabs: true,
   };
 export type RegisterCentralComponentPageFormValue =
   ɵFormGroupRawValue<RegisterCentralComponentPageFormModel>;
diff --git a/...al-component-page/register-central-component-page/register-central-component-page-form.ts b/...al-component-page/register-central-component-page/register-central-component-page-form.ts
@@ -75,7 +75,6 @@ export class RegisterCentralComponentPageForm {
     );
 
     return this.formBuilder.nonNullable.group({
-      canSwitchTabs: [true, Validators.requiredTrue],
       componentTab,
       certificateTab,
     });

diff --git a/...onent-page/register-central-component-page/register-central-component-page.component.html b/...onent-page/register-central-component-page/register-central-component-page.component.html
@@ -4,8 +4,7 @@
     <mat-step
       color="accent"
       [editable]="state.state === 'editing' || state.state === 'error'"
-      [completed]="state.state === 'success'"
-      [stepControl]="form.componentTab">
+      [completed]="state.state === 'success' || form.componentTab.valid">
       <form class="flex flex-col w-full justify-center">
         <ng-template matStepLabel>Add Component Details</ng-template>
         <div
@@ -71,8 +70,7 @@
     <mat-step
       color="accent"
       [editable]="state.state === 'editing' || state.state === 'error'"
-      [completed]="state.state === 'success'"
-      [stepControl]="form.componentTab">
+      [completed]="state.state === 'success'">
       <ng-template matStepLabel>Generate Certificate</ng-template>
 
       <div class="flex justify-center items-center">
@@ -94,7 +92,9 @@
         <button
           class="btn-accent"
           [disabledBtn]="
-            state.state === 'submitting' || !form.certificateTab.valid
+            state.state === 'submitting' ||
+            !form.componentTab.valid ||
+            !form.certificateTab.valid
           "
           (click)="registerComponent()">
           {{ createActionName }}
@@ -104,10 +104,7 @@
     <!-- Generate Certificate Step-->
 
     <!-- Final Step -->
-    <mat-step
-      color="accent"
-      [editable]="false"
-      [stepControl]="form.group.controls.canSwitchTabs">
+    <mat-step color="accent" [editable]="false">
       <ng-template matStepLabel>Setup Central Component</ng-template>
       <div class="my-12 flex flex-col justify-center items-center text-center">
         <h2 class="wizard-end-title">Finish setting up your component!</h2>

diff --git a/...mponent-page/register-central-component-page/register-central-component-page.component.ts b/...mponent-page/register-central-component-page/register-central-component-page.component.ts
@@ -110,7 +110,11 @@ export class RegisterCentralComponentPageComponent
         request,
         () => this.form.group.enable(),
         () => this.form.group.disable(),
-        () => this.stepper.next(),
+        () => {
+          setTimeout(() => {
+            this.stepper.next();
+          }, 0);
+        },
       ),
     );
   }

diff --git a/...ges/register-connector-page/register-connector-page/register-connector-page-form-model.ts b/...ges/register-connector-page/register-connector-page/register-connector-page-form-model.ts
@@ -43,14 +43,12 @@ export const DEFAULT_CERTIFICATE_TAB_FORM_VALUE: CertificateTabFormValue =
 export interface RegisterConnectorPageFormModel {
   connectorTab: FormGroup<ConnectorTabFormModel>;
   certificateTab: FormGroup<CertificateTabFormModel>;
-  canSwitchTabs: FormControl<boolean>;
 }
 
 export const DEFAULT_REGISTER_CONNECTOR_PAGE_FORM_VALUE: RegisterConnectorPageFormValue =
   {
     connectorTab: DEFAULT_CONNECTOR_TAB_FORM_VALUE,
     certificateTab: DEFAULT_CERTIFICATE_TAB_FORM_VALUE,
-    canSwitchTabs: true,
   };
 export type RegisterConnectorPageFormValue =
   ɵFormGroupRawValue<RegisterConnectorPageFormModel>;
diff --git a/...ion-pages/register-connector-page/register-connector-page/register-connector-page-form.ts b/...ion-pages/register-connector-page/register-connector-page/register-connector-page-form.ts
@@ -79,7 +79,6 @@ export class RegisterConnectorPageForm {
     );
 
     return this.formBuilder.nonNullable.group({
-      canSwitchTabs: [true, Validators.requiredTrue],
       connectorTab,
       certificateTab,
     });

diff --git a/...es/register-connector-page/register-connector-page/register-connector-page.component.html b/...es/register-connector-page/register-connector-page/register-connector-page.component.html
@@ -8,8 +8,7 @@
     <mat-step
       color="accent"
       [editable]="state.state === 'editing' || state.state === 'error'"
-      [completed]="state.state === 'success'"
-      [stepControl]="form.connectorTab">
+      [completed]="state.state === 'success' || form.connectorTab.valid">
       <form class="flex flex-col w-full justify-center">
         <ng-template matStepLabel>Add Connector Details</ng-template>
         <div
@@ -89,8 +88,7 @@
     <mat-step
       color="accent"
       [editable]="state.state === 'editing' || state.state === 'error'"
-      [completed]="state.state === 'success'"
-      [stepControl]="form.certificateTab">
+      [completed]="state.state === 'success'">
       <ng-template matStepLabel>Generate Certificate</ng-template>
 
       <div class="flex justify-center items-center">
@@ -112,7 +110,9 @@
         <button
           class="btn-accent"
           [disabledBtn]="
-            state.state === 'submitting' || !form.certificateTab.valid
+            state.state === 'submitting' ||
+            !form.connectorTab.valid ||
+            !form.certificateTab.valid
           "
           (click)="registerConnector()">
           {{ createActionName }}
@@ -122,10 +122,7 @@
     <!-- Generate Certificate Step-->
 
     <!-- Final Step -->
-    <mat-step
-      color="accent"
-      [editable]="false"
-      [stepControl]="form.group.controls.canSwitchTabs">
+    <mat-step color="accent" [editable]="false">
       <ng-template matStepLabel>Setup Connector</ng-template>
 
       <app-connector-registering-success-message-page

diff --git a/...ages/register-connector-page/register-connector-page/register-connector-page.component.ts b/...ages/register-connector-page/register-connector-page/register-connector-page.component.ts
@@ -97,7 +97,11 @@ export class RegisterConnectorPageComponent implements OnInit, OnDestroy {
         },
         () => this.form.group.enable(),
         () => this.form.group.disable(),
-        () => this.stepper.next(),
+        () => {
+          setTimeout(() => {
+            this.stepper.next();
+          }, 0);
+        },
       ),
     );
   }

diff --git a/...organization-create-page/organization-create-page/organization-create-page.component.html b/...organization-create-page/organization-create-page/organization-create-page.component.html
@@ -20,8 +20,7 @@
         <mat-step
           color="accent"
           [editable]="state.state === 'editing' || state.state === 'error'"
-          [completed]="state.state === 'success'"
-          [stepControl]="userForm">
+          [completed]="userForm.valid || state.state === 'success'">
           <div class="flex flex-col px-1 md:px-8 w-full">
             <ng-template matStepLabel>User Details</ng-template>
             <app-user-create-form
@@ -49,8 +48,7 @@
           color="accent"
           editable="false"
           [editable]="state.state === 'editing' || state.state === 'error'"
-          [completed]="state.state === 'success'"
-          [stepControl]="orgForm">
+          [completed]="state.state === 'success'">
           <div class="flex flex-col px-1 md:px-8 w-full">
             <ng-template matStepLabel>Organization Profile</ng-template>
             <h3 class="wizard-step-title">Organization Profile</h3>
@@ -69,7 +67,7 @@ <h3 class="wizard-step-title">Organization Profile</h3>
 
               <button
                 class="btn-accent"
-                [disabledBtn]="!parentFormGroup.valid || loading"
+                [disabledBtn]="!userForm.valid || !orgForm.valid || loading"
                 (click)="submit()">
                 Register
               </button>
@@ -79,7 +77,7 @@ <h3 class="wizard-step-title">Organization Profile</h3>
         <!-- Organization profile form -->
 
         <!-- final step -->
-        <mat-step [editable]="false" [stepControl]="parentFormGroup">
+        <mat-step [editable]="false">
           <ng-template matStepLabel>Email Verification</ng-template>
           <div
             class="my-12 flex flex-col justify-center items-center text-center">

diff --git a/...s/organization-create-page/organization-create-page/organization-create-page.component.ts b/...s/organization-create-page/organization-create-page/organization-create-page.component.ts
@@ -107,7 +107,6 @@ export class OrganizationCreatePageComponent implements OnInit, OnDestroy {
     );
 
     return this.formBuilder.nonNullable.group({
-      isEditable: [true, Validators.requiredTrue],
       userTab,
       organizationTab,
     });
@@ -135,8 +134,9 @@ export class OrganizationCreatePageComponent implements OnInit, OnDestroy {
         () => this.parentFormGroup.enable(),
         () => this.parentFormGroup.disable(),
         () => {
-          this.stepper.next();
-          this.parentFormGroup.controls.isEditable.setValue(false);
+          setTimeout(() => {
+            this.stepper.next();
+          }, 0);
         },
       ),
     );

diff --git a/.../organization-create-page/organization-create-page/organization-create-page.form-model.ts b/.../organization-create-page/organization-create-page/organization-create-page.form-model.ts
@@ -34,7 +34,6 @@ export type RegistrationOrganizationTabFormValue =
   ɵFormGroupRawValue<RegistrationOrganizationTabFormModel>;
 
 export interface RegistrationWizardFormModel {
-  isEditable: FormControl<boolean>;
   userTab: FormGroup<RegistrationUserTabFormModel>;
   organizationTab: FormGroup<RegistrationOrganizationTabFormModel>;
 }
@@ -44,7 +43,6 @@ export type RegistrationWizardFormValue =
 
 export const DEFAULT_REGISTRATION_WIZARD_FORM_VALUE: RegistrationWizardFormValue =
   {
-    isEditable: true,
     userTab: DEFAULT_USER_CREATE_FORM_MODEL,
     organizationTab: {
       ...DEFAULT_ORGANIZATION_CREATE_FORM_MODEL,

diff --git a/...anization-onboard-page/organization-onboard-page/organization-onboard-page.component.html b/...anization-onboard-page/organization-onboard-page/organization-onboard-page.component.html
@@ -25,8 +25,7 @@
       <mat-step
         color="accent"
         [editable]="state.state === 'editing' || state.state === 'error'"
-        [completed]="state.state === 'success'"
-        [stepControl]="userForm">
+        [completed]="userForm.valid || state.state === 'success'">
         <div class="flex flex-col px-1 md:px-8 w-full">
           <ng-template matStepLabel>User Profile</ng-template>
 
@@ -67,8 +66,7 @@ <h2 class="wizard-step-title">User Profile</h2>
         *ngIf="state.onboardingType === 'USER_ORGANIZATION_ONBOARDING'"
         color="accent"
         [editable]="state.state === 'editing' || state.state === 'error'"
-        [completed]="state.state === 'success'"
-        [stepControl]="orgProfileForm">
+        [completed]="state.state === 'success'">
         <div class="flex flex-col px-1 md:px-8 w-full">
           <ng-template matStepLabel>Organization Profile</ng-template>
 
@@ -88,7 +86,9 @@ <h2 class="wizard-step-title">Organization Profile</h2>
             <button
               class="btn-accent"
               [disabledBtn]="
-                !parentFormGroup.valid || state.state === 'submitting'
+                !userForm.valid ||
+                !orgForm.valid ||
+                state.state === 'submitting'
               "
               (click)="submit()">
               Submit

diff --git a/...rganization-onboard-page/organization-onboard-page/organization-onboard-page.component.ts b/...rganization-onboard-page/organization-onboard-page/organization-onboard-page.component.ts
@@ -148,7 +148,6 @@ export class OrganizationOnboardPageComponent implements OnInit {
     );
 
     return this.formBuilder.nonNullable.group({
-      isEditable: [true, Validators.requiredTrue],
       userTab,
       organizationTab,
     });
@@ -164,8 +163,9 @@ export class OrganizationOnboardPageComponent implements OnInit {
         () => this.parentFormGroup.enable(),
         () => this.parentFormGroup.disable(),
         () => {
-          this.stepper.next();
-          this.parentFormGroup.controls.isEditable.setValue(false);
+          setTimeout(() => {
+            this.stepper.next();
+          }, 0);
         },
       ),
     );