[reclaim-ui] 106/459: changed authentication ui and gnunet offline information, added modals

[gnunet]

This is an automated email from the git hooks/post-receive script.

martin-schanzenbach pushed a commit to branch master
in repository reclaim-ui.

commit 6531757e57b9740efec57116f7b165a02a966bfd
Author: Alexia Pagkopoulou <a.pagkopoulou@tum.de>
AuthorDate: Mon Jul 8 13:24:32 2019 +0200

    changed authentication ui and gnunet offline information, added modals
---
 src/app/app.module.ts                              |  4 ++
 src/app/identity-list/identity-list.component.html | 72 +++++++++++++++-------
 src/app/identity-list/identity-list.component.ts   | 62 ++++++++++++++-----
 src/app/modal.component.ts                         | 60 ++++++++++++++++++
 src/app/modal.scss                                 | 49 +++++++++++++++
 src/app/modal.service.ts                           | 36 +++++++++++
 src/styles.scss                                    |  1 +
 7 files changed, 247 insertions(+), 37 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3e988e5..0191112 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,6 +11,8 @@ import { ReclaimService } from './reclaim.service';
 import { NamestoreService } from './namestore.service';
 import { GnsService } from './gns.service';
 import { ConfigService } from './config.service';
+import { ModalComponent } from './modal.component';
+import { ModalService } from './modal.service';
 
 import './rxjs';
 import { OpenIdService } from './open-id.service';
@@ -19,6 +21,7 @@ import { OpenIdService } from './open-id.service';
   declarations: [
     AppComponent,
     IdentityListComponent,
+    ModalComponent
   ],
   imports: [
     BrowserModule,
@@ -28,6 +31,7 @@ import { OpenIdService } from './open-id.service';
   ],
   providers: [
     IdentityService,
+    ModalService,
     ReclaimService,
     NamestoreService,
     GnsService,
diff --git a/src/app/identity-list/identity-list.component.html 
b/src/app/identity-list/identity-list.component.html
index 1e45db9..d550836 100644
--- a/src/app/identity-list/identity-list.component.html
+++ b/src/app/identity-list/identity-list.component.html
@@ -1,6 +1,19 @@
-<div *ngIf="inOpenIdFlow()" class="alert alert-primary alert-dismissible fade 
show" role="alert">
-  <span *ngIf="clientNameFound()"><i class="fa fa-2x fa-openid"></i> <b 
class="fa-2x"> Authorization Request</b></span><br/>
-  <span *ngIf="!clientNameFound()"><i class="fa fa-2x fa-circle-o-notch 
fa-spin fa-fw"></i> <b class="fa-2x"> Verifying request, please stand 
by...</b></span><br/>
+<!-- TODO: GNUnet -> modal -->
+
+<!-- OpenId Authorization Screen -->
+<!-- Modal -->
+<oid-modal id="OpenIdInfo">
+  <div style="text-align: center;">
+    <span *ngIf="clientNameFound()">
+    <i class="fa fa-2x fa-openid"></i> 
+    <b class="fa-2x"> Authorization Request </b>
+    </span>
+    <span *ngIf="!clientNameFound()">
+      <i class="fa fa-2x fa-circle-o-notch fa-spin fa-fw"></i> 
+      <b class="fa-2x"> Verifying request, please stand by...</b>
+    </span>
+    <br/> 
+  </div>
   <div *ngIf="clientNameFound()"><strong>"{{ clientName }}"</strong>
     asks you to share personal information.<br/>
     Choose an identity to let it access the following information:
@@ -8,24 +21,29 @@
   <ul *ngIf="clientNameFound()">
     <li *ngFor="let attribute of getScopes()"><strong>{{attribute}}</strong>
   </ul>
-  <button class="btn btn-danger mt-4" (click)="cancelRequest()">
-    <span class="fa fa-ban"></span> Decline and return to website
-  </button>
-</div>
-
-<div *ngIf="!isConnected(); else emptyIdList" 
-          style="text-align: center; font-size: 1.75em;" class="alert 
alert-danger alert-dismissible fade show" role="alert">
-  <strong>GNUnet is not running.</strong>
-</div>
-
-<ng-template #emptyIdList>
-  <div *ngIf="0 == identities.length && !isAddIdentity()" style="text-align: 
center;" class="alert alert-secondary alert-dismissible fade show" role="alert">
-    You don't have any identities yet.<br/><br/>
-    <button class="btn btn-primary" (click)="addIdentity()">
-      <span class="fa fa-plus"></span> Add your first identity!
+  <div style="text-align: right">
+    <button class="btn btn-danger mt-4" (click)="cancelRequest(); 
closeModal('OpenIdInfo');">
+      <span class="fa fa-ban"></span> Decline and return to website 
     </button>
+    &nbsp;
+    <button class="btn btn-primary mt-4" 
(click)="closeModal('OpenIdInfo');">Continue</button>
+  </div>
+</oid-modal>
+
+<!-- GNUnet not running -->
+<!-- Modal -->
+<oid-modal id="GnunetInfo">
+  <div style="text-align: center;">
+    <b class="fa-2x"> GNUnet is not running. </b>
   </div>
-</ng-template>
+</oid-modal>
+
+<div *ngIf="isConnected() && 0 == identities.length && !isAddIdentity()" 
style="text-align: center;" class="alert alert-secondary alert-dismissible fade 
show" role="alert">
+  You don't have any identities yet.<br/><br/>
+  <button class="btn btn-primary" (click)="addIdentity()">
+    <span class="fa fa-plus"></span> Add your first identity!
+  </button>
+</div>
 
 <div class="m-2 card" *ngIf="(null != identityInEdit) && !isAddIdentity()">
   <div class="card-avatar card-img-top">
@@ -228,14 +246,14 @@
     </div>
   </div>
 </div>
+
+<!-- Identity creation -->
 <div *ngIf="isAddIdentity()" class="m-2 card" style="text-align:center;">
   <div class="card-avatar card-img-top">
     <div class="card-avatar-character text-dark">
-      Add Identity        </div>
+      Add Identity        
+    </div>
   </div>
-  
-  <!-- Identity creation -->
-  
   <!-- Invalid input -->
   <div *ngIf="'' !== newIdentity.name && !canSave()" class="alert alert-danger 
alert-dismissible fade show" role="alert">
     Only Alphanumeric input. No spaces or special characters allowed.
@@ -261,10 +279,18 @@
   </div>
 </div>
 
+<!-- Buttons -->
+<!-- Add identity -->
 <div *ngIf="0 != identities.length && !isAddIdentity() && (null == 
identityInEdit)"  style="margin-top: 1em; text-align: center;">
   <button class="btn btn-primary" (click)="addIdentity()">
     <span class="fa fa-plus"></span> Add identity
   </button>
 </div>
+<!-- Cancel authorization -->
+<div *ngIf="inOpenIdFlow() && !isAddIdentity() && (null == identityInEdit)" 
style="margin-bottom: 1em; text-align: center;">
+  <button class="btn btn-danger mt-4" (click)="cancelRequest()">
+    <span class="fa fa-ban"></span> Decline and return to website
+  </button>
+</div>
 
 
diff --git a/src/app/identity-list/identity-list.component.ts 
b/src/app/identity-list/identity-list.component.ts
index 9241143..1f44217 100644
--- a/src/app/identity-list/identity-list.component.ts
+++ b/src/app/identity-list/identity-list.component.ts
@@ -12,6 +12,8 @@ import {NamestoreService} from '../namestore.service';
 import {OpenIdService} from '../open-id.service';
 import {ReclaimService} from '../reclaim.service';
 import {Ticket} from '../ticket';
+import {ModalService} from '../modal.service';
+import {ModalComponent} from '../modal.component';
 
 @Component ({
   selector : 'app-identity-list',
@@ -37,13 +39,16 @@ export class IdentityListComponent implements OnInit {
   showConfirmRevoke: any;
   connected: any;
   ticketAttributeMapper: any;
+  modalOpened: any;
+
 
   constructor(private route: ActivatedRoute, private router: Router,
               private oidcService: OpenIdService,
               private identityService: IdentityService,
               private reclaimService: ReclaimService,
               private namestoreService: NamestoreService,
-              private gnsService: GnsService)
+              private gnsService: GnsService,
+              private modalService: ModalService)
   {
   }
 
@@ -57,9 +62,10 @@ export class IdentityListComponent implements OnInit {
     this.newAttribute = new Attribute ('', '', '', 'STRING');
     this.requestedAttributes = {};
     this.missingAttributes = {};
-    this.clientName = "-";
+    this.clientName = '-';
     this.connected = false;
     this.ticketAttributeMapper = {};
+    this.modalOpened = false;
     this.oidcService.parseRouteParams(this.route.snapshot.queryParams);
     // On opening the options page, fetch stored settings and update the UI 
with
     // them.
@@ -89,10 +95,10 @@ export class IdentityListComponent implements OnInit {
     });*/
     this.getClientName();
     // this.newIdentity = new Identity('', '', {});
-    this.identityInEditName = "";
+    this.identityInEditName = '';
     this.identityNameMapper = {};
     this.updateIdentities();
-    console.log("processed nginit");
+    console.log('processed nginit');
     // browser.storage.onChanged.addListener(this.handleStorageChange);
   }
 
@@ -137,7 +143,7 @@ export class IdentityListComponent implements OnInit {
 
   clientNameFound()
   {
-    return this.clientName != this.oidcService.getClientId();
+    return this.clientName !== this.oidcService.getClientId();
   }
 
   intToRGB(i)
@@ -231,7 +237,7 @@ export class IdentityListComponent implements OnInit {
     }
   }
 
-  private mapAudience(ticket) 
+  private mapAudience(ticket)
   {
     this.gnsService.getClientName(ticket.audience).subscribe(records => {
       for (var i = 0; i < records.data.length; i++) {
@@ -383,6 +389,8 @@ export class IdentityListComponent implements OnInit {
 
   cancelRequest()
   {
+    this.closeModal('OpenIdInfo');
+    this.modalOpened = false;
     this.oidcService.cancelAuthorization().subscribe(data => {
       console.log('Request cancelled');
       this.authorize();
@@ -399,7 +407,27 @@ export class IdentityListComponent implements OnInit {
 
   authorize() { this.oidcService.authorize(); }
 
-  inOpenIdFlow() { return this.oidcService.inOpenIdFlow(); }
+  openModal(id: string)
+  {
+    this.modalService.open(id);
+    this.modalOpened = true;
+  }
+
+  closeModal(id: string)
+  { 
+    this.modalService.close(id);
+    if (!this.inOpenIdFlow())
+      this.modalOpened = false;
+  }
+  
+
+  inOpenIdFlow()
+  { 
+    if (this.oidcService.inOpenIdFlow() && !this.modalOpened) {
+      this.openModal('OpenIdInfo');
+    }
+    return this.oidcService.inOpenIdFlow();
+  }
 
   canAddAttribute(identity, attribute)
   {
@@ -468,6 +496,7 @@ export class IdentityListComponent implements OnInit {
   getScopes() { return this.oidcService.getScope(); }
 
   getScopesPretty() { return this.getScopes().join(", "); }
+  
   getMissing(identity)
   {
     var arr = [];
@@ -478,10 +507,12 @@ export class IdentityListComponent implements OnInit {
     return arr;
   }
   getMissingPretty(identity) { return this.getMissing(identity).join(", "); }
+  
   canAuthorize(identity)
   {
     return this.inOpenIdFlow() && !this.isInEdit(identity);
   }
+  
   isRequested(identity, attribute)
   {
     if (undefined === this.requestedAttributes[identity.pubkey]) {
@@ -529,16 +560,19 @@ export class IdentityListComponent implements OnInit {
 
       identities.forEach(identity => {
         this.updateAttributes(identity);
-                       });
-                       this.connected = true;
-               },
-                       error => {
-                               console.log(error);
-                               this.connected = false
+      });
+      this.closeModal('GnunetInfo');
+      this.connected = true;
+    },
+      error => {
+        console.log(error);
+        this.openModal('GnunetInfo');
+        this.connected = false;
                        });
        }
 
-       isConnected() {
+  isConnected() 
+  {
                return this.connected;
   }
 }
diff --git a/src/app/modal.component.ts b/src/app/modal.component.ts
new file mode 100644
index 0000000..188a8db
--- /dev/null
+++ b/src/app/modal.component.ts
@@ -0,0 +1,60 @@
+import { Component, ElementRef, Input, OnInit, OnDestroy } from 
'@angular/core';
+
+import { ModalService } from './modal.service';
+
+@Component({
+    selector: 'oid-modal',
+    template:
+        `<div class="oid-modal">
+            <div class="oid-modal-body">
+                <ng-content></ng-content>
+            </div>
+        </div>
+        <div class="oid-modal-background"></div>`
+})
+export class ModalComponent implements OnInit, OnDestroy {
+  @Input() id: string;
+  private element: any;
+  
+  constructor(private modalService: ModalService, private el: ElementRef) {
+    this.element = el.nativeElement;
+  }
+  
+  ngOnInit(): void {
+    if (!this.id) {
+      console.error('modal must have an id');
+      return;
+    }
+
+    // move element to bottom of page (just before </body>) so it can be 
displayed above everything else
+    document.body.appendChild(this.element);
+
+    // close modal on background click -- doesn't work
+    this.element.addEventListener('click', function (e: any) {
+      if (e.target.className === 'oid-modal') {
+        this.close();
+      }
+    });
+
+    // add self (this modal instance) to the modal service so it's accessible 
from controllers
+    this.modalService.add(this);
+  }
+
+  // remove self from modal service when component is destroyed
+  ngOnDestroy(): void {
+    this.modalService.remove(this.id);
+    this.element.remove();
+  }
+
+  open(): void
+  {
+    this.element.style.display = 'block';
+    document.body.classList.add('oid-modal-open');
+  }
+
+  close(): void
+  {
+    this.element.style.display = 'none';
+    document.body.classList.remove('oid-modal-open');
+  }
+}
diff --git a/src/app/modal.scss b/src/app/modal.scss
new file mode 100644
index 0000000..11eb21c
--- /dev/null
+++ b/src/app/modal.scss
@@ -0,0 +1,49 @@
+oid-modal {
+  /* modals are hidden by default */
+  display: none;
+  
+  .oid-modal { 
+    /* modal container on top of page */
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    /* z-index must be higher than .jw-modal-background */
+    z-index: 1000;
+    
+    /* enables scrolling for tall modals */
+    overflow: auto;
+
+    .oid-modal-body {
+      padding: 20px;
+      background: #fff;
+      border-radius: 1em;
+
+      /* margin exposes part of the modal background */
+      margin: 40px;
+    }
+  }
+
+  .oid-modal-background {
+    /* modal background fixed across whole screen */
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    
+    /* semi-transparent black  */
+    background-color: #000;
+    opacity: 0.75;
+
+    /* z-index must be below .jw-modal and above everything else  */
+    z-index: 900;
+  }
+}
+
+body.oid-modal-open {
+  /* body overflow is hidden to hide main scrollbar when modal window is open 
*/
+  overflow: hidden;
+}
+
diff --git a/src/app/modal.service.ts b/src/app/modal.service.ts
new file mode 100644
index 0000000..cde19fa
--- /dev/null
+++ b/src/app/modal.service.ts
@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+
+@Injectable(/*{ providedIn: 'root' }*/)
+
+export class ModalService {
+  private modals: any[] = [];
+  
+  add(modal: any)
+  {
+    // add modal to array of active modals
+    this.modals.push(modal);
+  }
+  
+  remove(id: string)
+  {
+    // remove modal from array of active modals
+    this.modals = this.modals.filter(x => x.id !== id);
+  }
+
+  open(id: string)
+  {
+    // open modal specified by id
+    let modal: any = this.modals.filter(x => x.id === id)[0];
+    modal.open();
+  }
+
+  close(id: string)
+  {
+    // close modal specified by id
+    let modal: any = this.modals.filter(x => x.id === id)[0];
+    modal.close();
+  }
+}
+
+
+
diff --git a/src/styles.scss b/src/styles.scss
index 1fce514..72f34ea 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,6 +1,7 @@
 @import "node_modules/bootstrap/scss/bootstrap";
 $fa-font-path: "../node_modules/font-awesome/fonts";
 @import "node_modules/font-awesome/scss/font-awesome.scss";
+@import "app/modal.scss";
 
 html {
   /*font-family: Roboto, Helvetica, Arial, sans-serif;*/

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.