Merge pull request #1842 from habitat-sh/Aadesh/Chef-13951

Eula popup added

components/builder-web/app/shared/dialog/eula-confirm/eula-confirm.dialog.html

@@ -0,0 +1,61 @@
+<div class="dialog">
+  <section class="eula-heading">
+    <h1>{{ heading }}</h1>
+    <a class="close-button" (click)="cancel()">
+      <h1>
+        <hab-icon symbol="close"></hab-icon>
+      </h1>
+    </a>
+  </section>
+  <section class="body">
+    <span class="inner-body">
+      <div class="checkbox">
+        <mat-checkbox (change)="checkbox()" [(ngModel)]="checked"></mat-checkbox>
+      </div>
+      <div class="message">
+        <p>
+          I acknowledge and agree that use of Progress Chef Habitat Builder is governed by and subject to the terms and conditions of the End User License Agreement for 
+          Progress Chef located at <a href="https://www.chef.io/end-user-license-agreement" target="_blank">Progress Chef EULA</a>
+        </p>
+      </div>
+    </span>
+  </section>
+  <section class="controls">
+    <button mat-raised-button color="primary" class="button continue-button" (click)="ok()" disabled={{isButtonDisabled}}>
+      {{ action }}
+    </button>
+  </section>
+</div>
+
+<style>
+  .eula-heading {
+    margin: -24px -24px 0px -24px;
+    border-bottom: #e7ebed 1px solid;
+    padding-left: 24px; 
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+
+  .close-button {
+    margin-right: 24px;
+  }
+
+  .continue-button {
+    width: 100%; 
+    height: 3rem;
+  }
+
+  .message {
+    margin-left: 24px;
+    margin-top: 3px;
+  }
+
+  .checkbox {
+    padding-top: 5px
+  }
+
+  .inner-body {
+    display: flex;
+  }
+</style>

components/builder-web/app/shared/dialog/eula-confirm/eula-confirm.dialog.ts

@@ -0,0 +1,53 @@
+// Copyright (c) 2016-2017 Chef Software Inc. and/or applicable contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  template: require('./eula-confirm.dialog.html'),
+})
+export class EulaConfirmDialog {
+  isButtonDisabled: boolean = true;
+  checked: boolean = false;
+
+  constructor(
+    private ref: MatDialogRef<EulaConfirmDialog>,
+    @Inject(MAT_DIALOG_DATA) private data: any
+  ) { }
+
+  get heading() {
+    return this.data.heading || 'Confirm';
+  }
+
+  get action() {
+    return this.data.action || 'do it';
+  }
+
+  get signupUrl() {
+    return this.data.signupUrl;
+  }
+
+  ok() {
+    this.ref.close(true);
+  }
+
+  checkbox() {
+    this.checked === true ? this.isButtonDisabled = false : this.isButtonDisabled = true;
+  }
+
+  cancel() {
+    this.ref.close(false);
+  }
+}

components/builder-web/app/shared/shared.module.ts

@@ -45,6 +45,7 @@ import { VisibilitySelectorComponent } from './visibility-selector/visibility-se
 import { KeysPipe } from './pipes/keys.pipe';
 import { SimpleConfirmDialog } from './dialog/simple-confirm/simple-confirm.dialog';
 import { PromoteConfirmDialog } from './dialog/promote-confirm/promote-confirm.dialog';
+import { EulaConfirmDialog } from './dialog/eula-confirm/eula-confirm.dialog';
 import { BuilderEnabledGuard } from './guards/builder-enabled.guard';
 import { VisibilityEnabledGuard } from './guards/visibility-enabled.guard';
 import { OriginMemberGuard } from './guards/origin-member.guard';
@@ -91,6 +92,7 @@ import { JobNoticeComponent } from './job-notice/job-notice.component';
     VisibilitySelectorComponent,
     SimpleConfirmDialog,
     PromoteConfirmDialog,
+    EulaConfirmDialog,
     JobNoticeComponent,
     KeysPipe
   ],
@@ -99,7 +101,8 @@ import { JobNoticeComponent } from './job-notice/job-notice.component';
     DockerExportSettingsDialog,
     JobCancelDialog,
     SimpleConfirmDialog,
-    PromoteConfirmDialog
+    PromoteConfirmDialog,
+    EulaConfirmDialog
   ],
   exports: [
     MatMenuModule,

components/builder-web/app/sign-in-page/sign-in-page.component.html

@@ -1,11 +1,11 @@
-<div class="sign-in-page-component">
+<div class="sign-in-page-component" id="sign-in-page-component">
   <a class="logo" href="{{ wwwUrl }}">
     <img src="assets/images/builder-habitat-logo.svg" alt="Habitat">
   </a>
   <div class="body">
     <div class="content">
       <section class="upper">
-        <a mat-raised-button color="primary" class="button" href="{{ loginUrl }}">
+        <a mat-raised-button color="primary" class="button" (click)="showEulaPopup(loginUrl)">
           <hab-icon [symbol]="providerType"></hab-icon>
           <span>Sign In with {{ providerName }}</span>
         </a>

components/builder-web/app/sign-in-page/sign-in-page.component.ts

@@ -17,13 +17,15 @@ import { Title } from '@angular/platform-browser';
 import { AppStore } from '../app.store';
 import { setLayout, signOut } from '../actions/index';
 import config from '../config';
+import { EulaConfirmDialog } from '../shared/dialog/eula-confirm/eula-confirm.dialog';
+import { MatDialog } from '@angular/material';
 
 @Component({
   template: require('./sign-in-page.component.html')
 })
 export class SignInPageComponent implements OnDestroy {
 
-  constructor(private store: AppStore, private title: Title) {
+  constructor(private store: AppStore, private title: Title, private confirmDialog: MatDialog) {
     store.dispatch(signOut(false));
     this.title.setTitle(`Sign In | ${store.getState().app.name}`);
     this.store.dispatch(setLayout('sign-in'));
@@ -58,4 +60,28 @@ export class SignInPageComponent implements OnDestroy {
   ngOnDestroy() {
     this.store.dispatch(setLayout('default'));
   }
+
+  showEulaPopup(URL) {
+    if (!localStorage.getItem('loginShowEulaPopup') && !localStorage.getItem('loginEulaAccept')) {
+      this.confirmDialog
+        .open(EulaConfirmDialog, {
+          width: '530px',
+          disableClose: true,
+          data: {
+            heading: 'End Users License Agreement',
+            action: 'Continue',
+            signupUrl: URL
+          }
+        }).afterClosed()
+        .subscribe((data) => {
+          if (data) {
+            localStorage.setItem('loginEulaAccept', 'true');
+            localStorage.setItem('loginShowEulaPopup', 'false');
+            window.open(this.loginUrl, '_self');
+          }
+        });
+    } else {
+      window.open(URL, '_self');
+    }
+  }
 }