Merge pull request #433 from communitybridge/terms-conditions

Added embargo checkbox

Author: amolsontakke3576

README.md

@@ -26,7 +26,7 @@ Once the CLA is signed, the GitHub pull request status is updated.
 
 ## Documentation
 
-Please see our [online product documentation](https://docs.linuxfoundation.org/lfx/v/v2/easycla) for a complete product
+Please see our [online product documentation](https://docs.linuxfoundation.org/lfx/easycla) for a complete product
 overview.
 
 ## License

src/app/app.component.html

@@ -4,6 +4,27 @@
 
 <div class="fix-header-margin">
   <app-alert></app-alert>
-  <router-outlet></router-outlet>
+  <div *ngIf="!showDashboard" class="wrapper vcenter-item">
+      <div class="box">
+        <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">
+        </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 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>

src/app/app.component.scss

@@ -5,3 +5,30 @@
   padding: 25px 0 0 0;
   min-height: calc(100vh - 125px);
 }
+
+.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;
+  }
+}

src/app/app.component.ts

@@ -1,29 +1,42 @@
 // Copyright The Linux Foundation and each contributor to CommunityBridge.
 // SPDX-License-Identifier: MIT
 
+
+// To run this project you required node version 12.0.0 or higher, yarn 1.13.0 or higher.
+
 import { Component } from '@angular/core';
-import { LfxHeaderService } from './shared/services/lfx-header.service';
 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 {
-  title = 'easycla-contributor-console';
-  hasExpanded: boolean;
-  links: any[];
+  hasTermAccepted: boolean;
+  showDashboard: boolean;
 
-  constructor(private lfxHeaderService: LfxHeaderService) {}
-
-  onToggled() {
-    this.hasExpanded = !this.hasExpanded;
+  constructor(private storageService: StorageService) {
+    this.showDashboard = false;
+    this.hasTermAccepted = false;
   }
 
   ngOnInit() {
     this.mountHeader();
-    this.hasExpanded = true;
+  }
+
+  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 {

src/app/config/app-settings.ts

@@ -49,4 +49,5 @@ export class AppSettings {
     public static GITLAB_DOMAIN = "gitlab.com";
     public static GITLAB = "Gitlab";
     public static SUPPORT_TICKET_LINK = 'https://jira.linuxfoundation.org/plugins/servlet/theme/portal/4/create/143';
+    public static ACCEPTED_TERMS = 'acceptedTerms';
 }

src/app/modules/individual-contributor/container/individual-dashboard/individual-dashboard.component.ts

@@ -38,7 +38,7 @@ export class IndividualDashboardComponent implements OnInit {
     this.hasGerrit = JSON.parse(this.storageService.getItem(AppSettings.HAS_GERRIT));
     this.status = 'Pending';
     if (this.hasGerrit) {
-      this.postIndivdualRequestSignature();
+      this.postIndividualRequestSignature();
     } else {
       this.findActiveSignature();
     }
@@ -49,7 +49,7 @@ export class IndividualDashboardComponent implements OnInit {
       (response) => {
         if (response) {
           this.activeSignatureModel = response;
-          this.postIndivdualRequestSignature();
+          this.postIndividualRequestSignature();
         } else {
           this.status = 'Failed';
           const error = 'Whoops, It looks like you don\'t have any signatures in progress.' +
@@ -63,12 +63,13 @@ export class IndividualDashboardComponent implements OnInit {
     );
   }
 
-  postIndivdualRequestSignature() {
+  postIndividualRequestSignature() {
+    const redirectUrl = this.storageService.getItem(AppSettings.REDIRECT);
     const data = {
       project_id: this.projectId,
       user_id: this.userId,
       return_url_type: this.hasGerrit ? AppSettings.GERRIT :this.claContributorService.getTypeByUrl(),
-      return_url: this.hasGerrit ? '' : this.activeSignatureModel.return_url
+      return_url: this.hasGerrit ? redirectUrl || '' : this.activeSignatureModel.return_url
     };
     this.claContributorService.postIndividualSignatureRequest(data).subscribe(
       (response) => {

src/app/shared/components/checkbox/checkbox.component.html

@@ -2,7 +2,7 @@
  SPDX-License-Identifier: MIT -->
 
 <label class="container">
-    <span>{{text}}</span>
+    <span [ngStyle]="{'font-size': fontSize, 'font-weight': bold ? 'bold' : 'normal'}">{{text}}</span>
     <input type="checkbox" [checked]="checked" (click)="onCheckboxClick()">
-    <span class="checkmark"></span>
-</label>
+    <span class="checkmark" [ngStyle]="{'top': topMargin}"></span>
+</label>

src/app/shared/components/checkbox/checkbox.component.ts

@@ -11,6 +11,9 @@ import { Component, Input, EventEmitter, Output } from '@angular/core';
 export class CheckboxComponent {
   @Input() checked: boolean;
   @Input() text: string;
+  @Input() fontSize: string;
+  @Input() topMargin: string;
+  @Input() bold: boolean;
   @Output() checkboxEmitter: EventEmitter<any> = new EventEmitter<any>();
 
   constructor() {}

src/app/shared/shared.module.ts

@@ -17,6 +17,7 @@ import { LfxHeaderService } from './services/lfx-header.service';
 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';
 
 @NgModule({
     declarations: [
@@ -33,7 +34,7 @@ import { FooterComponent } from './components/footer/footer.component';
         FooterComponent
     ],
     imports: [
-
+        CommonModule
     ],
     exports: [
         HeaderComponent,