diff --git a/apps/web/src/app/tools/send/send-access/send-access-email.component.html b/apps/web/src/app/tools/send/send-access/send-access-email.component.html
index ee5a03670bb..82ef9a397c5 100644
--- a/apps/web/src/app/tools/send/send-access/send-access-email.component.html
+++ b/apps/web/src/app/tools/send/send-access/send-access-email.component.html
@@ -20,16 +20,18 @@
{{ "verificationCode" | i18n }}
-
-
-
+
+
}
diff --git a/apps/web/src/app/tools/send/send-access/send-access-email.component.ts b/apps/web/src/app/tools/send/send-access/send-access-email.component.ts
index b1374cd6c66..0915a47e4ad 100644
--- a/apps/web/src/app/tools/send/send-access/send-access-email.component.ts
+++ b/apps/web/src/app/tools/send/send-access/send-access-email.component.ts
@@ -1,6 +1,14 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { ChangeDetectionStrategy, Component, input, OnDestroy, OnInit } from "@angular/core";
+import {
+ ChangeDetectionStrategy,
+ Component,
+ effect,
+ input,
+ OnDestroy,
+ OnInit,
+ output,
+} from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { SharedModule } from "../../../shared";
@@ -18,18 +26,45 @@ export class SendAccessEmailComponent implements OnInit, OnDestroy {
protected otp: FormControl;
readonly loading = input.required();
+ readonly backToEmail = output();
constructor() {}
ngOnInit() {
this.email = new FormControl("", Validators.required);
- this.otp = new FormControl("", Validators.required);
+ this.otp = new FormControl("");
this.formGroup().addControl("email", this.email);
this.formGroup().addControl("otp", this.otp);
- }
+ // Update validators when enterOtp changes
+ effect(() => {
+ const isOtpMode = this.enterOtp();
+ if (isOtpMode) {
+ // In OTP mode: email is not required (already entered), otp is required
+ this.email.clearValidators();
+ this.otp.setValidators([Validators.required]);
+ } else {
+ // In email mode: email is required, otp is not required
+ this.email.setValidators([Validators.required]);
+ this.otp.clearValidators();
+ }
+ this.email.updateValueAndValidity();
+ this.otp.updateValueAndValidity();
+ });
+ }
ngOnDestroy() {
this.formGroup().removeControl("email");
this.formGroup().removeControl("otp");
}
+
+ onBackClick() {
+ this.backToEmail.emit();
+ if (this.otp) {
+ this.otp.clearValidators();
+ this.otp.setValue("");
+ this.otp.setErrors(null);
+ this.otp.markAsUntouched();
+ this.otp.markAsPristine();
+ }
+ }
}
diff --git a/apps/web/src/app/tools/send/send-access/send-auth.component.html b/apps/web/src/app/tools/send/send-access/send-auth.component.html
index c3e90cea4ea..fa5bef77274 100644
--- a/apps/web/src/app/tools/send/send-access/send-auth.component.html
+++ b/apps/web/src/app/tools/send/send-access/send-auth.component.html
@@ -31,6 +31,7 @@
[formGroup]="sendAccessForm"
[enterOtp]="enterOtp()"
[loading]="loading()"
+ (backToEmail)="onBackToEmail()"
>
}
}
diff --git a/apps/web/src/app/tools/send/send-access/send-auth.component.ts b/apps/web/src/app/tools/send/send-access/send-auth.component.ts
index 994bd7f3ee3..97b71778539 100644
--- a/apps/web/src/app/tools/send/send-access/send-auth.component.ts
+++ b/apps/web/src/app/tools/send/send-access/send-auth.component.ts
@@ -90,6 +90,11 @@ export class SendAuthComponent implements OnInit {
this.loading.set(false);
}
+ onBackToEmail() {
+ this.enterOtp.set(false);
+ this.updatePageTitle();
+ }
+
private async attemptV1Access() {
try {
const accessRequest = new SendAccessRequest();
@@ -247,10 +252,12 @@ export class SendAuthComponent implements OnInit {
if (this.enterOtp()) {
this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
pageTitle: { key: "enterTheCodeSentToYourEmail" },
+ pageSubtitle: this.sendAccessForm.value.email ?? null,
});
} else {
this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
pageTitle: { key: "verifyYourEmailToViewThisSend" },
+ pageSubtitle: null,
});
}
} else if (authType === AuthType.Password) {