Merge pull request #29 from nishchayp/frontend

Added background sync

angular-src/src/admin-styles.css

@@ -20,4 +20,8 @@ button, table {
 
 button {
 	cursor: pointer;
+}
+
+h2 {
+	margin: 0;
 }

angular-src/src/app/admin/components/indicator/indicator.component.ts

@@ -19,7 +19,13 @@ export class IndicatorComponent implements OnInit {
 
   ngOnInit() {
     this.online = navigator.onLine;
-    window.addEventListener('online',  () => {this.networkStatusService.setStatus(true)});
+    window.addEventListener('online',  () => {
+      this.networkStatusService.setStatus(true)
+      if(navigator.serviceWorker.controller)
+        navigator.serviceWorker.controller.postMessage({
+            command: 'online'
+        });
+    });
     window.addEventListener('offline', () => {this.networkStatusService.setStatus(false)});
     this.subscription = this.networkStatusService.getStatus().subscribe(() => {
       this.online = this.networkStatusService.online;

angular-src/src/app/admin/services/admin-data.service.ts

@@ -135,6 +135,8 @@ export class AdminDataService {
   }
 
   acceptAdminRequests(id, index) {
+    if(!navigator.onLine)
+      this.sendAlert('Request will be accepted');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     this.http.get('/admin/acceptAdminRequest/' + id, { headers: headers, withCredentials: true })
@@ -148,6 +150,8 @@ export class AdminDataService {
   }
 
   rejectAdminRequests(id, index) {
+    if(!navigator.onLine)
+      this.sendAlert('Request will be rejected');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     this.http.get('/admin/rejectAdminRequest/' + id, { headers: headers, withCredentials: true })
@@ -161,6 +165,8 @@ export class AdminDataService {
   }
 
   revokeAdminPrivilege(id, index) {
+    if(!navigator.onLine)
+      this.sendAlert('Privileges will be revoked');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     this.http.get('/admin/revokeAdminPrivilege/' + id, { headers: headers, withCredentials: true })
@@ -174,6 +180,8 @@ export class AdminDataService {
   }
 
   revokeAccessPrivilege(id, index) {
+    if(!navigator.onLine)
+      this.sendAlert('Access will be revoked');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     this.http.get('/admin/revokeAccessPrivilege/' + id, { headers: headers, withCredentials: true })
@@ -188,6 +196,8 @@ export class AdminDataService {
   }
 
   rejectAccessRequest(id, index) {
+    if(!navigator.onLine)
+      this.sendAlert('Request will be rejected');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     this.http.get('/admin/rejectAccessRequest/' + id, { headers: headers, withCredentials: true })
@@ -201,6 +211,8 @@ export class AdminDataService {
   }
 
   acceptAccessRequest(ip, id, index) {
+    if(!navigator.onLine)
+      this.sendAlert('Request will be accepted');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     this.http.post('/admin/acceptAccessRequest/' + id, ip, { headers: headers, withCredentials: true })

angular-src/src/app/user/components/damn/damn.component.css

@@ -57,7 +57,7 @@
 }
 
 .admin-btn-no-network {
-	top: 50px !important;
+	top: 60px !important;
 }
 
 @media only screen and (max-width: 700px) {

angular-src/src/app/user/components/indicator/indicator.component.ts

@@ -19,7 +19,13 @@ export class IndicatorComponent implements OnInit {
 
   ngOnInit() {
     this.online = navigator.onLine;
-    window.addEventListener('online',  () => {this.networkStatusService.setStatus(true)});
+    window.addEventListener('online',  () => {
+      this.networkStatusService.setStatus(true);
+      if(navigator.serviceWorker.controller)
+        navigator.serviceWorker.controller.postMessage({
+            command: 'online'
+        });
+    });
     window.addEventListener('offline', () => {this.networkStatusService.setStatus(false)});
     this.subscription = this.networkStatusService.getStatus().subscribe(() => {
       this.online = this.networkStatusService.online;

angular-src/src/app/user/services/user-data.service.ts

@@ -15,6 +15,8 @@ export class UserDataService {
   constructor(private http: Http) { }
 
   makeAdminRequest() {
+    if(!navigator.onLine)
+      this.sendAlert('Request will be sent');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     return this.http.get('/makeAdminRequest', { headers: headers, withCredentials: true })
@@ -27,6 +29,8 @@ export class UserDataService {
   }
 
   makeAccessRequest(requestData) {
+    if(!navigator.onLine)
+      this.sendAlert('Request will be sent');
     let headers = new Headers();
     headers.append('Content-type', 'application/json');
     return this.http.post('/makeAccessRequest/', requestData, { headers: headers, withCredentials: true })

angular-src/src/main-user.ts

@@ -14,12 +14,14 @@ platformBrowserDynamic().bootstrapModule(AppModule)
   })
   .catch(err => console.log(err));
 
+declare const Notification: any;
 function registerServiceWorker(swName: string) {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker
       .register(`/${swName}.js`)
       .then(reg => {
-        // console.log('SW registered: ', reg)
+        if ('Notification' in window && Notification.permission !== 'granted' && Notification.permission !== 'denied')
+            Notification.requestPermission()
       })
       .catch(err =>
         console.error('[App] Service worker registration failed', err)

angular-src/src/service-worker.js

@@ -1,9 +1,8 @@
 importScripts('workbox-sw.prod.v2.1.2.js');
-// importScripts('workbox-background-sync.prod.v2.0.3.js');
+importScripts('workbox-background-sync.prod.v2.0.3.js');
 
 const workboxSW = new WorkboxSW();
 workboxSW.precache([]);
-
 workboxSW.router.registerRoute('/', workboxSW.strategies.cacheFirst());
 workboxSW.router.registerRoute('/login', workboxSW.strategies.cacheFirst());
 workboxSW.router.registerRoute('/admin', workboxSW.strategies.cacheFirst());
@@ -34,6 +33,7 @@ workboxSW.router.registerRoute(new RegExp('^https://fonts\\.googleapis\\.com'),
     cacheableResponse: {statuses: [0, 200]}
   })
 );
+
 workboxSW.router.registerRoute(new RegExp('^https://cdnjs\\.cloudflare\\.com/ajax/libs/font-awesome'),
   workboxSW.strategies.cacheFirst({
     cacheName: 'iconfonts',
@@ -43,6 +43,7 @@ workboxSW.router.registerRoute(new RegExp('^https://cdnjs\\.cloudflare\\.com/aja
     cacheableResponse: {statuses: [0, 200]}
   })
 );
+
 workboxSW.router.registerRoute(new RegExp('^https://fonts\\.gstatic\\.com'),
   workboxSW.strategies.cacheFirst({
     cacheName: 'googleapis',
@@ -53,42 +54,70 @@ workboxSW.router.registerRoute(new RegExp('^https://fonts\\.gstatic\\.com'),
   })
 );
 
-// let bgQueue = new workbox.backgroundSync.Queue();
+let bgQueue = new workbox.backgroundSync.QueuePlugin({
+  callbacks: {
+    replayDidSucceed: async(hash, res) => {
+      console.log(res);
+      if(res.url.indexOf('/makeAdminRequest') !== -1)
+        message = 'Administrative privileges request sent'
+      if(res.url.indexOf('/makeAccessRequest') !== -1)
+        message = 'Access request sent'
+      if(res.url.indexOf('/admin/acceptAdminRequest') !== -1)
+        message = 'You have accepted the admin request'
+      if(res.url.indexOf('/admin/rejectAdminRequest') !== -1)
+        message = 'You have rejected the admin request'
+      if(res.url.indexOf('/admin/revokeAdminPrivilege') !== -1)
+        message = 'You have revoked the admin privilege'
+      if(res.url.indexOf('/admin/acceptAccessRequest') !== -1)
+        message = 'You have accepted the access request'
+      if(res.url.indexOf('/admin/rejectAccessRequest') !== -1)
+        message = 'You have rejected the access request'
+      if(res.url.indexOf('/admin/revokeAccessPrivilege') !== -1)
+        message = 'You have revoked the access privileges'
+      if(Notification.permission === 'granted')
+        self.registration.showNotification('DAMN', {
+          body: message,
+          icon: './images/icons/icon-128x128.png',
+          vibrate: [100, 50, 100]
+        });
+    }
+  }
+});
 
-// self.addEventListener('fetch', function(event){
-//   if (event.request.url.indexOf('/makeAdminRequest') !== -1)
-//     queueReqAndSync(event, 'admin-request');
-//   else if(event.request.url.indexOf('/makeAccessRequest' !== -1)
-//     queueReqAndSync(event, 'access-request');
-// });
+workboxSW.router.registerRoute('/makeAdminRequest',
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'GET'
+);
 
-// function queueReqAndSync(e, regname) {
-//   const clone = e.request.clone();
-//   e.respondWith(fetch(e.request).catch((err) => {
-//     bgQueue.pushIntoQueue({
-//       request: clone,
-//     }).then((a) => {
-//       self.registration.sync.register(regname)
-//     });
-//   }));
-// }
+workboxSW.router.registerRoute('/makeAccessRequest',
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'POST'
+);
+
+workboxSW.router.registerRoute(new RegExp('/admin/acceptAdminRequest*'),
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'GET'
+);
+
+workboxSW.router.registerRoute(new RegExp('/admin/rejectAdminRequest*'),
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'GET'
+);
+
+workboxSW.router.registerRoute(new RegExp('/admin/revokeAdminPrivilege*'),
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'GET'
+);
+
+workboxSW.router.registerRoute(new RegExp('/admin/acceptAccessRequest*'),
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'POST'
+);
+
+workboxSW.router.registerRoute(new RegExp('/admin/rejectAccessRequest*'),
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'GET'
+);
+
+workboxSW.router.registerRoute(new RegExp('/admin/revokeAccessPrivilege*'),
+  workboxSW.strategies.networkOnly({plugins: [bgQueue]}), 'GET'
+);
 
-// self.addEventListener('sync', function (event) {
-//   if(event.tag === 'admin-request') {
-//     console.log('adminreq')
-//     event.waitUntil(bgQueue.replayRequests().then((a) => {
-//       console.log('Admin request sent');
-//     })
-//     .catch((err) => {
-//       console.log('Could not send admin request');
-//     }));
-//   } else if(event.tag === 'access-request') {
-//     console.log('accessreq')
-//     event.waitUntil(bgQueue.replayRequests().then((a) => {
-//       console.log('Access request sent');
-//     })
-//     .catch((err) => {
-//       console.log('Could not send access request');
-//     }));
-//   }
-// });
+self.addEventListener('message', function(event) {
+  let data = event.data;
+  if(data.command == 'online')
+    bgQueue.replayRequests()
+});

angular-src/src/styles.css

@@ -20,4 +20,8 @@ button, table {
 
 button {
 	cursor: pointer;
+}
+
+h4 {
+	margin: 10px 0;
 }

dist/admin-static/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><meta name="theme-color" content="#222"><meta name="description" content="App for distribution and management of SSH keys"/><title>DAMN</title><base href="/"><link rel="manifest" href="/manifest.json"><link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"><link rel="icon" type="image/x-icon" href="user-static/favicon.ico"><noscript>Your browser does not support JavaScript!</noscript><link href="/user-static/styles.48e72670b09a2857da07.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="/user-static/inline.9554ad9e5222aeba5ee7.bundle.js"></script><script type="text/javascript" src="/user-static/polyfills.10df7e33d13f0f4e4ea3.bundle.js"></script><script type="text/javascript" src="/user-static/vendor.ac94eee836a6cf48c626.bundle.js"></script><script type="text/javascript" src="/user-static/main.ea52b42c5a4ee6dc8eee.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><meta name="theme-color" content="#222"><meta name="description" content="App for distribution and management of SSH keys"/><title>DAMN</title><base href="/"><link rel="manifest" href="/manifest.json"><link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"><link rel="icon" type="image/x-icon" href="user-static/favicon.ico"><noscript>Your browser does not support JavaScript!</noscript><link href="/user-static/styles.118713447dd8619ffaf5.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script type="text/javascript" src="/user-static/inline.d7e2f46eba80f01103f6.bundle.js"></script><script type="text/javascript" src="/user-static/polyfills.10df7e33d13f0f4e4ea3.bundle.js"></script><script type="text/javascript" src="/user-static/vendor.ac94eee836a6cf48c626.bundle.js"></script><script type="text/javascript" src="/user-static/main.58f4cfb7ec6f2706ac32.bundle.js"></script></body></html>