[SM-265] Add eslint rule forbidding get().value (#3671)

.eslintrc.json

@@ -73,6 +73,10 @@
       {
         "message": "Calling `svgIcon` directly is not allowed",
         "selector": "CallExpression[callee.name='svgIcon']"
+      },
+      {
+        "message": "Accessing FormGroup using `get` is not allowed, use `.value` instead",
+        "selector": "ChainExpression[expression.object.callee.property.name='get'][expression.property.name='value']"
       }
     ],
     "curly": ["error", "all"],

apps/web/src/app/accounts/login/login.component.ts

@@ -135,7 +135,7 @@ export class LoginComponent extends BaseLoginComponent {
   }
 
   async goAfterLogIn() {
-    const masterPassword = this.formGroup.get("masterPassword")?.value;
+    const masterPassword = this.formGroup.value.masterPassword;
 
     // Check master password against policy
     if (this.enforcedPasswordPolicyOptions != null) {
@@ -170,7 +170,7 @@ export class LoginComponent extends BaseLoginComponent {
   }
 
   async submit() {
-    const rememberEmail = this.formGroup.get("rememberEmail")?.value;
+    const rememberEmail = this.formGroup.value.rememberEmail;
 
     await this.stateService.setRememberEmail(rememberEmail);
     if (!rememberEmail) {
@@ -192,7 +192,7 @@ export class LoginComponent extends BaseLoginComponent {
   }
 
   private getPasswordStrengthUserInput() {
-    const email = this.formGroup.get("email")?.value;
+    const email = this.formGroup.value.email;
     let userInput: string[] = [];
     const atPosition = email.indexOf("@");
     if (atPosition > -1) {

apps/web/src/app/accounts/register-form/register-form.component.ts

@@ -73,7 +73,7 @@ export class RegisterFormComponent extends BaseRegisterComponent {
       this.enforcedPolicyOptions != null &&
       !this.policyService.evaluateMasterPassword(
         this.passwordStrengthResult.score,
-        this.formGroup.get("masterPassword")?.value,
+        this.formGroup.value.masterPassword,
         this.enforcedPolicyOptions
       )
     ) {

apps/web/src/app/accounts/trial-initiation/billing.component.ts

@@ -57,8 +57,8 @@ export class BillingComponent extends OrganizationPlansComponent {
   async ngOnInit() {
     const additionalSeats = this.product == ProductType.Families ? 0 : 1;
     this.formGroup.patchValue({
-      name: this.orgInfoForm.get("name")?.value,
-      billingEmail: this.orgInfoForm.get("email")?.value,
+      name: this.orgInfoForm.value.name,
+      billingEmail: this.orgInfoForm.value.email,
       additionalSeats: additionalSeats,
       plan: this.plan,
       product: this.product,

libs/angular/src/components/login.component.ts

@@ -65,7 +65,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
   }
 
   async ngOnInit() {
-    let email = this.formGroup.get("email")?.value;
+    let email = this.formGroup.value.email;
     if (email == null || email === "") {
       email = await this.stateService.getRememberedEmail();
       this.formGroup.get("email")?.setValue(email);
@@ -81,9 +81,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
   }
 
   async submit(showToast = true) {
-    const email = this.formGroup.get("email")?.value;
-    const masterPassword = this.formGroup.get("masterPassword")?.value;
-    const rememberEmail = this.formGroup.get("rememberEmail")?.value;
+    const data = this.formGroup.value;
 
     await this.setupCaptcha();
 
@@ -103,15 +101,15 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
 
     try {
       const credentials = new PasswordLogInCredentials(
-        email,
-        masterPassword,
+        data.email,
+        data.masterPassword,
         this.captchaToken,
         null
       );
       this.formPromise = this.authService.logIn(credentials);
       const response = await this.formPromise;
-      if (rememberEmail || this.alwaysRememberEmail) {
-        await this.stateService.setRememberedEmail(email);
+      if (data.rememberEmail || this.alwaysRememberEmail) {
+        await this.stateService.setRememberedEmail(data.email);
       } else {
         await this.stateService.setRememberedEmail(null);
       }
@@ -216,7 +214,7 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit
   }
 
   protected focusInput() {
-    const email = this.formGroup.get("email")?.value;
+    const email = this.formGroup.value.email;
     document.getElementById(email == null || email === "" ? "email" : "masterPassword").focus();
   }
 }

libs/angular/src/components/register.component.ts

@@ -96,11 +96,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
   }
 
   async submit(showToast = true) {
-    let email = this.formGroup.get("email")?.value;
+    let email = this.formGroup.value.email;
     email = email.trim().toLowerCase();
-    let name = this.formGroup.get("name")?.value;
+    let name = this.formGroup.value.name;
     name = name === "" ? null : name; // Why do we do this?
-    const masterPassword = this.formGroup.get("masterPassword")?.value;
+    const masterPassword = this.formGroup.value.masterPassword;
     try {
       if (!this.accountCreated) {
         const registerResponse = await this.registerAccount(
@@ -125,7 +125,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
         if (loginResponse.captchaRequired) {
           return;
         }
-        this.createdAccount.emit(this.formGroup.get("email")?.value);
+        this.createdAccount.emit(this.formGroup.value.email);
       } else {
         this.platformUtilsService.showToast(
           "success",
@@ -232,7 +232,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
     masterPassword: string,
     name: string
   ): Promise<RegisterRequest> {
-    const hint = this.formGroup.get("hint")?.value;
+    const hint = this.formGroup.value.hint;
     const kdf = DEFAULT_KDF_TYPE;
     const kdfIterations = DEFAULT_KDF_ITERATIONS;
     const key = await this.cryptoService.makeKey(masterPassword, email, kdf, kdfIterations);

libs/angular/src/components/settings/vault-timeout-input.component.ts

@@ -2,7 +2,7 @@ import { Directive, Input, OnInit } from "@angular/core";
 import {
   AbstractControl,
   ControlValueAccessor,
-  UntypedFormBuilder,
+  FormBuilder,
   ValidationErrors,
   Validator,
 } from "@angular/forms";
@@ -44,7 +44,7 @@ export class VaultTimeoutInputComponent implements ControlValueAccessor, Validat
   private validatorChange: () => void;
 
   constructor(
-    private formBuilder: UntypedFormBuilder,
+    private formBuilder: FormBuilder,
     private policyService: PolicyService,
     private i18nService: I18nService
   ) {}
@@ -152,6 +152,6 @@ export class VaultTimeoutInputComponent implements ControlValueAccessor, Validat
   }
 
   private customTimeInMinutes() {
-    return this.form.get("custom.hours")?.value * 60 + this.form.get("custom.minutes")?.value;
+    return this.form.value.custom.hours * 60 + this.form.value.custom.minutes;
   }
 }