feat: CXSPA-6689 one time password for login

feature-libs/user/_index.scss

@@ -8,7 +8,8 @@ $skipComponentStyles: () !default;
 $selectors: cx-address-book, cx-address-form, cx-suggested-addresses-dialog,
   cx-login, cx-login-form, cx-register, cx-reset-password, cx-close-account,
   cx-close-account-modal, cx-my-account-v2-profile, cx-my-account-v2-email,
-  cx-my-account-v2-password !default;
+  cx-my-account-v2-password, cx-otp-login-form, cx-verification-token-form,
+  cx-verification-token-dialog !default;
 
 @each $selector in $selectors {
   #{$selector} {

feature-libs/user/account/assets/translations/en/userAccount.json

@@ -15,6 +15,26 @@
     },
     "wrongEmailFormat": "This is not a valid email format."
   },
+  "verificationTokenForm": {
+    "createVerificationToken": "Verification code sent to {{target}}. Please check and enter the code.",
+    "sendRateLime": "in {{waitTime}} seconds",
+    "resend": "Resend",
+    "verificationCode": {
+      "label": "Verification Code",
+      "placeholder": "Enter Verification Code"
+    },
+    "noReceiveCode": "Didn't receive the code?",
+    "verify": "Verify",
+    "back": "Back"
+  },
+  "verificationTokenDialog": {
+    "title": "Didn’t receive the code",
+    "noReceiveCode": "If you don't receive the code, the reasons might be:",
+    "contentLine1": "1. The email hasn't come yet.",
+    "contentLine2": "2. The received email has been treated as junk email.",
+    "contentLine3": "3. Either the email address or the password you entered is incorrect.",
+    "close": "Close"
+  },
   "miniLogin": {
     "userGreeting": "Hi, {{name}}",
     "signInRegister": "Sign In / Register"

feature-libs/user/account/assets/translations/translations.ts

@@ -12,5 +12,11 @@ export const userAccountTranslations: TranslationResources = {
 };
 
 export const userAccountTranslationChunksConfig: TranslationChunksConfig = {
-  userAccount: ['loginForm', 'miniLogin', 'myAccountV2User'],
+  userAccount: [
+    'loginForm',
+    'verificationTokenForm',
+    'verificationTokenDialog',
+    'miniLogin',
+    'myAccountV2User',
+  ],
 };

feature-libs/user/account/components/otp-login-form/index.ts

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './otp-login-form.component';
+export * from './otp-login-form.module';

feature-libs/user/account/components/otp-login-form/otp-login-form.component.html

@@ -0,0 +1,60 @@
+<cx-spinner class="overlay" *ngIf="isUpdating$ | async"></cx-spinner>
+
+<form (ngSubmit)="onSubmit()" [formGroup]="form">
+  <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
+  <p *cxFeature="'a11yRequiredAsterisks'" class="form-legend">
+    {{ 'formLegend.required' | cxTranslate }}
+  </p>
+  <label>
+    <span class="label-content">
+      {{ 'loginForm.emailAddress.label' | cxTranslate }}
+      <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
+    </span>
+    <input
+      required="true"
+      type="email"
+      class="form-control"
+      formControlName="userId"
+      placeholder="{{ 'loginForm.emailAddress.placeholder' | cxTranslate }}"
+    />
+    <cx-form-errors [control]="form.get('userId')"></cx-form-errors>
+  </label>
+
+  <label>
+    <span class="label-content">
+      {{ 'loginForm.password.label' | cxTranslate }}
+      <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
+    </span>
+    <input
+      required="true"
+      type="password"
+      class="form-control"
+      placeholder="{{ 'loginForm.password.placeholder' | cxTranslate }}"
+      formControlName="password"
+      [attr.aria-label]="'loginForm.password.placeholder' | cxTranslate"
+      cxPasswordVisibilitySwitch
+    />
+    <cx-form-errors [control]="form.get('password')"></cx-form-errors>
+  </label>
+
+  <a [routerLink]="{ cxRoute: 'forgotPassword' } | cxUrl" class="btn-link">
+    {{ 'loginForm.forgotPassword' | cxTranslate }}
+  </a>
+
+  <button
+    type="submit"
+    class="btn btn-block btn-primary"
+    [disabled]="form.disabled"
+  >
+    {{ 'loginForm.signIn' | cxTranslate }}
+  </button>
+</form>
+
+<ng-template #requiredAsterisk>
+  <abbr
+    *cxFeature="'a11yRequiredAsterisks'"
+    class="text-decoration-none"
+    title="{{ 'common.required' | cxTranslate }}"
+    >*</abbr
+  >
+</ng-template>

feature-libs/user/account/components/otp-login-form/otp-login-form.component.spec.ts

@@ -0,0 +1,207 @@
+import { DebugElement, Pipe, PipeTransform } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { I18nTestingModule, RoutingService, WindowRef } from '@spartacus/core';
+import { FormErrorsModule, SpinnerModule } from '@spartacus/storefront';
+import { VerificationTokenService } from '@spartacus/user/account/core';
+import {
+  VerificationToken,
+  VerificationTokenCreation,
+  VerificationTokenFacade,
+} from '@spartacus/user/account/root';
+import { of } from 'rxjs';
+import { OneTimePasswordLoginFormComponent } from './otp-login-form.component';
+import createSpy = jasmine.createSpy;
+
+const verificationTokenCreation: VerificationTokenCreation = {
+  purpose: 'LOGIN',
+  loginId: '[email protected]',
+  password: '1234',
+};
+
+const verificationToken: VerificationToken = {
+  expiresIn: '300',
+  tokenId: 'mockTokenId',
+};
+
+class MockWinRef {
+  get nativeWindow(): Window {
+    return {} as Window;
+  }
+}
+
+class MockVerificationTokenService
+  implements Partial<VerificationTokenService>
+{
+  createVerificationToken = createSpy().and.callFake(() =>
+    of(verificationToken)
+  );
+}
+
+class MockRoutingService implements Partial<RoutingService> {
+  go = () => Promise.resolve(true);
+}
+
+@Pipe({
+  name: 'cxUrl',
+})
+class MockUrlPipe implements PipeTransform {
+  transform() {}
+}
+
+describe('OneTimePasswordLoginFormComponent', () => {
+  let component: OneTimePasswordLoginFormComponent;
+  let fixture: ComponentFixture<OneTimePasswordLoginFormComponent>;
+  let el: DebugElement;
+  let service: VerificationTokenFacade;
+  let winRef: WindowRef;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          ReactiveFormsModule,
+          RouterTestingModule,
+          I18nTestingModule,
+          FormErrorsModule,
+          SpinnerModule,
+        ],
+        declarations: [OneTimePasswordLoginFormComponent, MockUrlPipe],
+        providers: [
+          {
+            provide: VerificationTokenFacade,
+            useClass: MockVerificationTokenService,
+          },
+          { provide: WindowRef, useClass: MockWinRef },
+          { provide: RoutingService, useClass: MockRoutingService },
+        ],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    winRef = TestBed.inject(WindowRef);
+    fixture = TestBed.createComponent(OneTimePasswordLoginFormComponent);
+    service = TestBed.inject(VerificationTokenFacade);
+    component = fixture.componentInstance;
+    el = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('create OTP', () => {
+    it('should not patch user id', () => {
+      component.isUpdating$.subscribe().unsubscribe();
+      expect(component.form.value.userId).toEqual('');
+    });
+
+    it('should patch user id', () => {
+      spyOnProperty(winRef, 'nativeWindow', 'get').and.returnValue({
+        history: { state: { newUid: verificationTokenCreation.loginId } },
+      } as Window);
+      component.isUpdating$.subscribe().unsubscribe();
+      expect(component.form.value.userId).toEqual(
+        verificationTokenCreation.loginId
+      );
+    });
+
+    describe('success', () => {
+      beforeEach(() => {
+        component.form.setValue({
+          userId: verificationTokenCreation.loginId,
+          password: verificationTokenCreation.password,
+        });
+      });
+
+      it('should request email', () => {
+        component.onSubmit();
+        expect(service.createVerificationToken).toHaveBeenCalledWith(
+          verificationTokenCreation
+        );
+      });
+
+      it('should reset the form', () => {
+        spyOn(component.form, 'reset').and.stub();
+        component.onSubmit();
+        expect(component.form.reset).toHaveBeenCalled();
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        component.form.setValue({
+          userId: 'invalid',
+          password: '123',
+        });
+      });
+
+      it('should not create OTP', () => {
+        component.onSubmit();
+        expect(service.createVerificationToken).not.toHaveBeenCalled();
+      });
+
+      it('should not reset the form', () => {
+        spyOn(component.form, 'reset').and.stub();
+        component.onSubmit();
+        expect(component.form.reset).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('busy', () => {
+    it('should disable the submit button when form is disabled', () => {
+      component.form.disable();
+      fixture.detectChanges();
+      const submitBtn: HTMLButtonElement = el.query(
+        By.css('button')
+      ).nativeElement;
+      expect(submitBtn.disabled).toBeTruthy();
+    });
+
+    it('should show the spinner', () => {
+      // @ts-ignore
+      component.busy$.next(true);
+      fixture.detectChanges();
+      expect(el.query(By.css('cx-spinner'))).toBeTruthy();
+    });
+  });
+
+  describe('idle', () => {
+    it('should enable the submit button', () => {
+      component.form.enable();
+      fixture.detectChanges();
+      const submitBtn = el.query(By.css('button'));
+      expect(submitBtn.nativeElement.disabled).toBeFalsy();
+    });
+
+    it('should not show the spinner', () => {
+      // @ts-ignore
+      component.isUpdating$.next(false);
+      fixture.detectChanges();
+      expect(el.query(By.css('cx-spinner'))).toBeNull();
+    });
+  });
+
+  describe('Form Interactions', () => {
+    it('should call onSubmit() method on submit', () => {
+      const request = spyOn(component, 'onSubmit');
+      const form = el.query(By.css('form'));
+      form.triggerEventHandler('submit', null);
+      expect(request).toHaveBeenCalled();
+    });
+
+    it('should call the service method on submit', () => {
+      component.form.setValue({
+        userId: verificationTokenCreation.loginId,
+        password: verificationTokenCreation.password,
+      });
+      component.onSubmit();
+      expect(service.createVerificationToken).toHaveBeenCalled();
+    });
+  });
+});