P0077 | Authentication script changes to load registration script directly

apps/proxy-auth/src/app/element.module.ts

@@ -43,6 +43,14 @@ function documentReady(fn: any) {
 
 window['initVerification'] = (config: any) => {
     documentReady(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const isRegisterFormOnlyFromParams = urlParams.get('isRegisterFormOnly') === 'true';
+        const paramsData = {
+            ...(urlParams.get('first_name') && { firstName: urlParams.get('first_name') }),
+            ...(urlParams.get('last_name') && { lastName: urlParams.get('last_name') }),
+            ...(urlParams.get('email') && { email: urlParams.get('email') }),
+            ...(urlParams.get('signup_service_id') && { signupServiceId: urlParams.get('signup_service_id') }),
+        };
         if (config?.referenceId || config?.authToken || config?.showCompanyDetails) {
             const findOtpProvider = document.querySelector('proxy-auth');
             if (findOtpProvider) {
@@ -65,6 +73,7 @@ window['initVerification'] = (config: any) => {
             sendOtpElement.exclude_role_ids = config?.exclude_role_ids;
             sendOtpElement.include_role_ids = config?.include_role_ids;
             sendOtpElement.isHidden = config?.isHidden;
+            sendOtpElement.isRegisterFormOnly = config?.isRegisterFormOnly || isRegisterFormOnlyFromParams;
             sendOtpElement.target = config?.target ?? '_self';
             sendOtpElement.css = config.style;
             if (!config.success || typeof config.success !== 'function') {
@@ -73,8 +82,8 @@ window['initVerification'] = (config: any) => {
             sendOtpElement.successReturn = config.success;
             sendOtpElement.failureReturn = config.failure;
 
-            // omitting keys which are not required in API payload
-            sendOtpElement.otherData = omit(config, RESERVED_KEYS);
+            // omitting keys which are not required in API payload; query params fill in missing values
+            sendOtpElement.otherData = { ...paramsData, ...omit(config, RESERVED_KEYS) };
             if (document.getElementById('proxyContainer') && config?.type !== 'user-management') {
                 document.getElementById('proxyContainer').append(sendOtpElement);
             } else if (config?.type === 'user-management') {

apps/proxy-auth/src/app/otp/component/register/register.component.html

@@ -1,7 +1,7 @@
 <ng-container>
     <div class="dialog-header">
         <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">Register</div>
-        <button mat-icon-button class="close-dialog" (click)="close(true)" type="button">
+        <button mat-icon-button class="close-dialog" (click)="close(true)" type="button" *ngIf="!isRegisterFormOnly">
             <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M11.8334 1.34163L10.6584 0.166626L6.00008 4.82496L1.34175 0.166626L0.166748 1.34163L4.82508 5.99996L0.166748 10.6583L1.34175 11.8333L6.00008 7.17496L10.6584 11.8333L11.8334 10.6583L7.17508 5.99996L11.8334 1.34163Z"

apps/proxy-auth/src/app/otp/component/register/register.component.ts

@@ -52,6 +52,11 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     @Input() public showCompanyDetails: boolean = true;
     @Input() public version: string = 'v1';
     @Input() public theme: string;
+    @Input() public firstName: string;
+    @Input() public lastName: string;
+    @Input() public email: string;
+    @Input() public signupServiceId: string | number;
+    @Input() public isRegisterFormOnly: boolean = false;
     public showPassword: boolean = false;
     public showConfirmPassword: boolean = false;
     @Output() public togglePopUp: EventEmitter<any> = new EventEmitter();
@@ -117,6 +122,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     public isOtpSent: boolean = false;
     public isNumberChanged: boolean = false;
     public otpError: string = '';
+    public otpVerificationToken: string = '';
 
     // Resend OTP timer properties
     public resendTimer: number = 0;
@@ -185,6 +191,9 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
         this.selectWidgetTheme$.pipe(takeUntil(this.destroy$)).subscribe((theme) => {
             this.uiPreferences = theme?.ui_preferences || {};
         });
+        if (this.isRegisterFormOnly) {
+            this.registrationForm.get('user.email').disable();
+        }
         this.registrationForm
             .get('user.mobile')
             .valueChanges.pipe(takeUntil(this.destroy$))
@@ -208,6 +217,9 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
                 this.otpError = ''; // Clear error on successful verification
             }
         });
+        this.selectVerifyOtpV2Data$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
+            this.otpVerificationToken = res?.data?.otp_verification_token;
+        });
         this.selectGetOtpSuccess$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
             this.isOtpSent = res;
             if (res) {
@@ -233,6 +245,15 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
         if (changes?.prefillDetails?.currentValue) {
             this.checkPrefillDetails();
         }
+        if (changes?.firstName?.currentValue) {
+            this.registrationForm.get('user.firstName').setValue(changes.firstName.currentValue);
+        }
+        if (changes?.lastName?.currentValue) {
+            this.registrationForm.get('user.lastName').setValue(changes.lastName.currentValue);
+        }
+        if (changes?.email?.currentValue) {
+            this.registrationForm.get('user.email').setValue(changes.email.currentValue);
+        }
     }
     checkPrefillDetails() {
         if (isNaN(Number(this.prefillDetails))) {
@@ -420,7 +441,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             this.registrationForm.get('user.mobile').setErrors({ otpVerificationFailed: true });
             return;
         }
-        const formData = removeEmptyKeys(cloneDeep(this.registrationForm.value), true);
+        const formData = removeEmptyKeys(cloneDeep(this.registrationForm.getRawValue()), true);
         const state = JSON.parse(
             this.otpUtilityService.aesDecrypt(
                 this.registrationViaLogin ? this.loginServiceData.state : this.serviceData?.state ?? '',
@@ -445,6 +466,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             service_id: this.registrationViaLogin ? this.loginServiceData.service_id : this.serviceData.service_id,
             url_unique_id: state?.url_unique_id,
             request_data: formData,
+            ...(this.signupServiceId && { signup_service_id: this.signupServiceId }),
         };
         const encodedData = this.otpUtilityService.aesEncrypt(
             JSON.stringify(payload),
@@ -453,14 +475,20 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             true
         );
         const registrationState = this.registrationViaLogin ? this.loginServiceData.state : this.serviceData.state;
-        this.otpService.register({ proxy_state: encodedData, state: registrationState }).subscribe(
-            (response) => {
-                window.location.href = response.data.redirect_url;
-            },
-            (err) => {
-                this.apiError.next(errorResolver(err?.error.errors));
-            }
-        );
+        this.otpService
+            .register({
+                proxy_state: encodedData,
+                state: registrationState,
+                otp_verification_token: this.otpVerificationToken,
+            })
+            .subscribe(
+                (response) => {
+                    window.location.href = response.data.redirect_url;
+                },
+                (err) => {
+                    this.apiError.next(errorResolver(err?.error.errors));
+                }
+            );
     }
 
     public getOtp() {

apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html

@@ -57,6 +57,11 @@
             (successReturn)="setShowRegistration(false)"
             (failureReturn)="returnFailureObj($event)"
             [prefillDetails]="prefillDetails"
+            [firstName]="otherData?.firstName"
+            [lastName]="otherData?.lastName"
+            [email]="otherData?.email"
+            [signupServiceId]="otherData?.signupServiceId"
+            [isRegisterFormOnly]="isRegisterFormOnly"
         ></proxy-register>
         <proxy-login
             *ngIf="showLogin | async"

apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts

@@ -65,6 +65,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
     @Input() public isHidden: boolean = false;
     @Input() public input_fields: string = InputFields.TOP;
     @Input() public show_social_login_icons: boolean = false;
+    @Input() public isRegisterFormOnly: boolean = false;
     set css(type: NgStyle['ngStyle']) {
         this.cssSubject$.next(type);
     }
@@ -188,6 +189,10 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             }, 3000);
         } else {
             this.toggleSendOtp(true);
+            if (this.isRegisterFormOnly) {
+                this.registrationViaLogin = false;
+                this.setShowRegistration(true);
+            }
         }
         this.loadExternalFonts();
         this.store.dispatch(

apps/proxy-auth/src/app/otp/service/otp.service.ts

@@ -74,7 +74,7 @@ export class OtpService {
         return this.http.get<any>(requestUrl, params, this.options);
     }
 
-    public register(body: { proxy_state?: string; state?: string }): Observable<any> {
+    public register(body: { proxy_state?: string; state?: string; otp_verification_token?: string }): Observable<any> {
         return this.http.post<any>(otpVerificationUrls.register(this.baseUrl), body, this.options);
     }