PER-9892 Add opt in option to the sign up page

src/app/auth/components/signup/signup.component.html

@@ -79,20 +79,30 @@ <h1 class="page-title" *ngIf="isForShareInvite">
     ></pr-form-input-glam>
   </div>
   <div class="auth-options">
-    <pr-checkbox
-      [isChecked]="agreedTerms"
-      (isCheckedChange)="agreedTerms = $event"
-      [variant]="'secondary'"
-    ></pr-checkbox>
-    <label class="form-check-label" for="terms">
-      I agree to the &nbsp;
-      <a
-        href="https://www.permanent.org/terms/"
-        target="_blank"
-        aria-label="Permanent.org Terms of Service"
-        >Terms of Service</a
-      >
-    </label>
+    <div class="checkbox-container">
+      <label class="form-check-label">
+        I agree to receive updates via email
+      </label>
+      <pr-toggle
+        [isChecked]="receiveUpdatesViaEmail"
+        (isCheckedChange)="receiveUpdatesViaEmail = $event"
+      ></pr-toggle>
+    </div>
+    <div class="checkbox-container">
+      <label class="form-check-label" for="terms">
+        I agree to the &nbsp;
+        <a
+          href="https://www.permanent.org/terms/"
+          target="_blank"
+          aria-label="Permanent.org Terms of Service"
+          >Terms of Service</a
+        >
+      </label>
+      <pr-toggle
+        [isChecked]="agreedTerms"
+        (isCheckedChange)="agreedTerms = $event"
+      ></pr-toggle>
+    </div>
   </div>
   <div class="buttons">
     <pr-button

src/app/auth/components/signup/signup.component.scss

@@ -21,15 +21,20 @@
 
 .auth-options {
   display: flex;
-  align-items: center;
-
-  & > label,
-  label > a {
-    color: white;
-    font-family: 'UsualRegular', sans-serif;
-    font-size: 14px;
+  flex-direction: column;
+
+  & > .checkbox-container {
+    margin-bottom: 32px;
+    justify-content: space-between;
+
+    display: flex;
+    > label,
+    label > a {
+      color: white;
+      font-family: 'UsualRegular', sans-serif;
+      font-size: 14px;
+    }
   }
-  margin-bottom: 32px;
 }
 
 form {

src/app/auth/components/signup/signup.component.spec.ts

@@ -19,10 +19,16 @@ import { TEST_DATA } from '@core/core.module.spec';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FORM_ERROR_MESSAGES } from '@shared/utilities/forms';
 import { ApiService } from '@shared/services/api/api.service';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { CheckboxComponent } from '@root/app/component-library/components/checkbox/checkbox.component';
+import { AccountVO } from '@models/account-vo';
+import { AccountService } from '@shared/services/account/account.service';
 
 describe('SignupComponent', () => {
   let component: SignupComponent;
   let fixture: ComponentFixture<SignupComponent>;
+  let accountService: AccountService;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -37,6 +43,7 @@ describe('SignupComponent', () => {
         CookieService,
         MessageService,
         ApiService,
+        AccountService,
         {
           provide: ActivatedRoute,
           useValue: {
@@ -57,6 +64,7 @@ describe('SignupComponent', () => {
     fixture = TestBed.createComponent(SignupComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    accountService = TestBed.inject(AccountService);
   });
 
   it('should create', () => {
@@ -179,4 +187,35 @@ describe('SignupComponent', () => {
 
     expect(loadingSpinner).toBeTruthy();
   });
+
+  it('should pass receiveUpdatesViaEmail to signUp correctly', () => {
+    const formValue = {
+      email: '[email protected]',
+      name: 'Test User',
+      password: 'password123',
+      confirm: 'password123',
+      invitation: 'inviteCode',
+    };
+
+    component.receiveUpdatesViaEmail = true;
+    component.agreedTerms = true; // assuming agreedTerms is needed
+
+    spyOn(accountService, 'signUp').and.returnValue(
+      Promise.resolve(new AccountVO({})),
+    );
+
+    component.onSubmit(formValue);
+
+    expect(accountService.signUp).toHaveBeenCalledWith(
+      formValue.email,
+      formValue.name,
+      formValue.password,
+      formValue.confirm,
+      component.agreedTerms,
+      true, // checks receiveUpdatesViaEmail is true
+      null,
+      formValue.invitation,
+      component.shouldCreateDefaultArchive(),
+    );
+  });
 });

src/app/auth/components/signup/signup.component.ts

@@ -47,6 +47,7 @@ export class SignupComponent {
   shareFromName: string;
   shareItemIsRecord = false;
   agreedTerms = false;
+  receiveUpdatesViaEmail = false;
 
   constructor(
     fb: UntypedFormBuilder,
@@ -108,7 +109,6 @@ export class SignupComponent {
         '',
         [Validators.required, Validators.minLength(MIN_PASSWORD_LENGTH)],
       ],
-      optIn: [true],
     });
 
     const confirmPasswordControl = new UntypedFormControl('', [
@@ -141,7 +141,7 @@ export class SignupComponent {
         formValue.password,
         formValue.confirm,
         this.agreedTerms,
-        formValue.optIn,
+        this.receiveUpdatesViaEmail,
         null,
         formValue.invitation,
         this.shouldCreateDefaultArchive(),

src/app/component-library/components/toggle/toggle.component.scss

@@ -22,7 +22,7 @@
     height: 20px;
     border-radius: 25px;
     position: relative;
-    background-color: $toggle;
+    background-color: rgba(255, 255, 255, 0.32);
     transition: background-color 0.2s;
 
     & > .toggle-knob {