Merge pull request #436 from communitybridge/consent

amolsontakke3576 · web-flow · commit 1005f4d1cb2c · 2024-12-16T11:11:24.000+05:30
Consent
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,30 +4,6 @@
 
 <div class="fix-header-margin">
   <app-alert></app-alert>
-  <div *ngIf="!showDashboard" class="wrapper vcenter-item">
-      <div class="box">
-        <div class="consent-title">Consent</div>
-
-        <app-checkbox [checked]="hasTermAccepted" text="I hereby certify that I am not, and/or the organization I am representing is not"
-            (checkboxEmitter)="onClickTermAccepted($event)" fontSize="16px" topMargin="5px" bold="true" [required]="true">
-        </app-checkbox>
-        <ul class="mt-2" style="width: 800px;">
-            <li>located in Cuba, Iran, North Korea, Syria, the Crimea Region of Ukraine, or the Russian-controlled areas of the Donetsk or Luhansk regions of Ukraine;
-            </li>
-            <li>owned or controlled by, acting for or on behalf of, or an individual or entity that has in the past acted for or on behalf of the Government of Cuba, 
-                Iran, North Korea, Syria, or Venezuela; or</li>
-            <li>listed as a blocked person by the U.S. Department of the Treasury’s 
-              <a style="color: #0099cc;" href="https://ofac.treasury.gov/sanctions-programs-and-country-information" target="_blank">Office of Foreign Assets Control (OFAC)</a> 
-                or directly or indirectly owned 50 percent or more by such a listed person
-            </li>
-          </ul>
-          <div class="d-flex flex-column">
-            <button type="button" class="button  align-self-center" [ngClass]="{'gray': !hasTermAccepted}" (click)="onClickContinue()">Continue</button>
-          </div>
-      </div>
-    </div>
-  <div *ngIf="showDashboard">
     <router-outlet></router-outlet>
-  </div>
 </div>
 <lfx-footer></lfx-footer>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -4,38 +4,4 @@
   margin-top: 35px;
   padding: 25px 0 0 0;
   min-height: calc(100vh - 125px);
-}
-
-.consent-title{
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-.vcenter-item{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-/* Some custom styles to beautify this example */
-.wrapper{
-  font-size: 16px;
-  min-height: calc(100vh - 250px);
-}
-
-.button {
-  width: 120px;
-  padding: 5px;
-  margin-top: 15px;
-  border-radius: 25px;
-  color: #fff;
-  background-color: #0099cc;
-  font-family: "SourceSansPro";
-  font-weight: bold;
-  border: none;
-
-  &.gray {
-    background-color: gray !important;
-  }
-}
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -6,39 +6,18 @@
 
 import { Component } from '@angular/core';
 import { environment } from 'src/environments/environment';
-import { StorageService } from './shared/services/storage.service';
-import { AppSettings } from './config/app-settings';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  hasTermAccepted: boolean;
-  showDashboard: boolean;
-
-  constructor(private storageService: StorageService) {
-    this.showDashboard = false;
-    this.hasTermAccepted = false;
-  }
 
   ngOnInit() {
     this.mountHeader();
   }
 
-  onClickTermAccepted(event:boolean) {
-    this.hasTermAccepted = event
-    this.storageService.setItem(AppSettings.ACCEPTED_TERMS, this.hasTermAccepted);
-  }
-
-  onClickContinue() {
-    if(this.hasTermAccepted) {
-      this.storageService.setItem(AppSettings.ACCEPTED_TERMS, true);
-      this.showDashboard = true;
-    }
-  }
-
   private mountHeader(): void {
     const script = document.createElement('script');
     script.setAttribute('src', environment.lfxHeader + '/lfx-header-v2.js');
diff --git a/src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.html b/src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.html
@@ -102,8 +102,14 @@
               </div>
             </div>
           </div>
+        
+          <div class="row justify-content-center" style="margin: 30px 0 30px 0;">
+            <div class="col-12">
+              <app-consent (termAccepted)="hasTermAccepted = $event"></app-consent>
+            </div>
+          </div>
 
-          <div class="col-12 buttons" [ngClass]="{ 'mt-30': selectedCompany }">
+          <div class="col-12 buttons">
             <div class="row justify-content-center align-items-center">
               <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
                 <button
@@ -119,9 +125,9 @@
                 <button
                   tabindex="-1"
                   type="button"
-                  [disabled]="selectedCompany === ''"
+                  [disabled]="selectedCompany === '' || !hasTermAccepted"
                   class="btn inactive"
-                  [ngClass]="{ active: selectedCompany !== '' }"
+                  [ngClass]="{ active: selectedCompany !== '' && hasTermAccepted }"
                   (click)="onClickProceed()"
                 >
                   Proceed
diff --git a/src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.scss b/src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.scss
@@ -37,10 +37,6 @@
       position: relative;
     }
 
-    .mt-30 {
-      margin-top: 30px !important;
-    }
-
     .building-icon {
       float: right;
       margin-top: -32px;
@@ -109,7 +105,6 @@
     }
 
     .buttons {
-      margin-top: 100px;
       .btn {
         text-align: center;
         background: #ffffff;
diff --git a/src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.ts b/src/app/modules/corporate-contributor/container/corporate-dashboard/corporate-dashboard.component.ts
@@ -58,6 +58,7 @@ export class CorporateDashboardComponent implements OnInit, OnDestroy {
   mySubscription: Subscription;
   proccedWithExistingOrganization: Subscription;
   attempt: boolean;
+  hasTermAccepted = false;
 
   constructor(
     private route: ActivatedRoute,
diff --git a/src/app/modules/dashboard/container/cla-dashboard/cla-dashboard.component.html b/src/app/modules/dashboard/container/cla-dashboard/cla-dashboard.component.html
@@ -49,7 +49,6 @@
                     </div>
                 </div>
             </div>
-
             <div class="deskop-view">
                 <div class="row">
                     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
diff --git a/src/app/modules/individual-contributor/component/docusign-signature-model/docusign-signature-model.component.html b/src/app/modules/individual-contributor/component/docusign-signature-model/docusign-signature-model.component.html
@@ -33,15 +33,21 @@
                     </div>
                 </div>
 
+                <div class="row justify-content-center" style="margin: 30px 0 30px 0;">
+                    <div class="col-12">
+                      <app-consent (termAccepted)="hasTermAccepted = $event"></app-consent>
+                    </div>
+                  </div>
+
                 <div class="row buttons justify-content-center align-items-center">
                     <div class="col-xs-6 col-sm-6 col-md-5 col-lg-5">
                         <button tabindex="-1" type="button" class="btn" (click)="onClickBack()">
                             GO BACK
                         </button>
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-5 col-lg-5">
-                        <button tabindex="-1" type="button" [disabled]="status!=='Completed'"
-                            [ngClass]="{'blue':status==='Completed'}" class="btn gray" (click)="onClickSignCLA()">
+                        <button tabindex="-1" type="button" [disabled]="status!=='Completed' || !hasTermAccepted"
+                            [ngClass]="{'blue':status==='Completed' && hasTermAccepted}" class="btn gray" (click)="onClickSignCLA()">
                             SIGN CLA</button>
                     </div>
                 </div>
diff --git a/src/app/modules/individual-contributor/component/docusign-signature-model/docusign-signature-model.component.ts b/src/app/modules/individual-contributor/component/docusign-signature-model/docusign-signature-model.component.ts
@@ -19,6 +19,7 @@ export class DocusignSignatureModelComponent {
 
   title: string;
   message: string;
+  hasTermAccepted = false;
 
   constructor(
     private storageService: StorageService,
diff --git a/src/app/shared/components/consent/consent.component.html b/src/app/shared/components/consent/consent.component.html
@@ -0,0 +1,21 @@
+<!-- Copyright The Linux Foundation and each contributor to CommunityBridge.
+ SPDX-License-Identifier: MIT -->
+ 
+<div class="wrapper">
+    <div class="box">
+      <div class="consent-title">Consent </div>
+      <app-checkbox [checked]="hasTermAccepted" text="I hereby certify that I am not, and/or the organization I am representing is not"
+          (checkboxEmitter)="onClickTermAccepted($event)" fontSize="16px" topMargin="5px" bold="true" [required]="true">
+      </app-checkbox>
+      <ul class="mt-2">
+          <li>located in Cuba, Iran, North Korea, Syria, the Crimea Region of Ukraine, or the Russian-controlled areas of the Donetsk or Luhansk regions of Ukraine;
+          </li>
+          <li>owned or controlled by, acting for or on behalf of, or an individual or entity that has in the past acted for or on behalf of the Government of Cuba, 
+              Iran, North Korea, Syria, or Venezuela; or</li>
+          <li>listed as a blocked person by the U.S. Department of the Treasury’s 
+            <a style="color: #0099cc;" href="https://ofac.treasury.gov/sanctions-programs-and-country-information" target="_blank">Office of Foreign Assets Control (OFAC)</a> 
+              or directly or indirectly owned 50 percent or more by such a listed person
+          </li>
+        </ul>
+    </div>
+  </div>
diff --git a/src/app/shared/components/consent/consent.component.scss b/src/app/shared/components/consent/consent.component.scss
@@ -0,0 +1,13 @@
+/* Copyright The Linux Foundation and each contributor to CommunityBridge.
+ SPDX-License-Identifier: MIT */
+ 
+.consent-title{
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    text-align: center;
+  }
+  /* Some custom styles to beautify this example */
+  .wrapper{
+    font-size: 16px;
+  }
diff --git a/src/app/shared/components/consent/consent.component.spec.ts b/src/app/shared/components/consent/consent.component.spec.ts
@@ -0,0 +1,29 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConsentComponent } from './consent.component';
+
+describe('ConsentComponent', () => {
+  let component: ConsentComponent;
+  let fixture: ComponentFixture<ConsentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConsentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConsentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/consent/consent.component.ts b/src/app/shared/components/consent/consent.component.ts
@@ -0,0 +1,25 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+
+
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-consent',
+  templateUrl: './consent.component.html',
+  styleUrls: ['./consent.component.scss']
+})
+export class ConsentComponent implements OnInit {
+
+  @Input() hasTermAccepted = false;
+  @Output() termAccepted: EventEmitter<boolean> = new EventEmitter<boolean>();
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onClickTermAccepted(event:boolean) {
+    this.hasTermAccepted = event
+    this.termAccepted.emit(event)
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -18,6 +18,7 @@ import { InterceptorService } from './services/interceptor.service';
 import { AuthComponent } from './components/auth/auth.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { CommonModule } from '@angular/common';
+import { ConsentComponent } from './components/consent/consent.component';
 
 @NgModule({
     declarations: [
@@ -31,7 +32,8 @@ import { CommonModule } from '@angular/common';
         TrimCharactersPipe,
         CheckboxComponent,
         AuthComponent,
-        FooterComponent
+        FooterComponent,
+        ConsentComponent
     ],
     imports: [
         CommonModule
@@ -46,7 +48,8 @@ import { CommonModule } from '@angular/common';
         ProjectTitleComponent,
         TrimCharactersPipe,
         CheckboxComponent,
-        FooterComponent
+        FooterComponent,
+        ConsentComponent
     ],
     providers: [StorageService, AuthService, LfxHeaderService, InterceptorService]
 })
