[WIP] Restore process

Co-Authored-By: Harvey Kandola <harvey@documize.com>

gui/app/components/customize/backup-restore.js

@@ -9,6 +9,7 @@
 //
 // https://documize.com
 
+import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import Notifier from '../../mixins/notifier';
 import Component from '@ember/component';
@@ -16,20 +17,40 @@ import Component from '@ember/component';
 export default Component.extend(Notifier, {
 	appMeta: service(),
 	browserSvc: service('browser'),
-	buttonLabel: 'Run Backup',
+	buttonLabel: 'Start Backup',
     backupSpec: null,
     backupFilename: '',
     backupError: false,
-    backupSuccess: false,
+	backupSuccess: false,
+    restoreSpec: null,
+	restoreButtonLabel: 'Perform Restore',
+	restoreUploading: false,
+	restoreUploadReady: false,
 
     didReceiveAttrs() {
-        this._super(...arguments);
+		this._super(...arguments);
+
         this.set('backupSpec', {
-            retain: false,
-            // org: '*'
+            retain: true,
             org: this.get('appMeta.orgId')
         });
-    },
+
+        this.set('restoreSpec', {
+            overwriteOrg: true,
+            recreateUsers: true
+		});
+
+		this.set('restoreFile', null);
+	},
+
+	didInsertElement() {
+		this._super(...arguments);
+
+		this.$('#restore-file').on('change', function(){
+			var fileName = document.getElementById("restore-file").files[0].name;
+			$(this).next('.custom-file-label').html(fileName);
+		});
+	},
 
 	actions: {
 		onBackup() {
@@ -37,17 +58,91 @@ export default Component.extend(Notifier, {
 			this.set('buttonLabel', 'Please wait, backup running...');
             this.set('backupFilename', '');
             this.set('backupSuccess', false);
-            this.set('backupFailed', false);
+			this.set('backupFailed', false);
 
-			this.get('onBackup')(this.get('backupSpec')).then((filename) => {
-				this.set('buttonLabel', 'Run Backup');
+			// If Documize Global Admin we perform system-level backup.
+			// Otherwise it is current tenant backup.
+			let spec = this.get('backupSpec');
+			if (this.get('session.isGlobalAdmin')) {
+				spec.org = "*";
+			}
+
+			this.get('onBackup')(spec).then((filename) => {
 				this.showDone();
+				this.set('buttonLabel', 'Start Backup');
                 this.set('backupSuccess', true);
                 this.set('backupFilename', filename);
 			}, ()=> {
+				this.showDone();
 				this.set('buttonLabel', 'Run Backup');
                 this.set('backupFailed', true);
 			});
+		},
+
+		onRestore() {
+			// do we have upload file?
+			// let files = document.getElementById("restore-file").files;
+			// if (is.undefined(files) || is.null(files)) {
+			// 	return;
+			// }
+
+			// let file = document.getElementById("restore-file").files[0];
+			// if (is.undefined(file) || is.null(file)) {
+			// 	return;
+			// }
+
+			let filedata = this.get('restoreFile');
+			if (is.null(filedata)) {
+				return;
+			}
+
+			// start restore process
+			this.showWait();
+			this.set('restoreButtonLabel', 'Please wait, restore running...');
+            this.set('restoreSuccess', false);
+			this.set('restoreFailed', false);
+
+			// If Documize Global Admin we perform system-level restore.
+			// Otherwise it is current tenant backup.
+			let spec = this.get('restoreSpec');
+			if (this.get('session.isGlobalAdmin')) {
+				spec.org = "*";
+			}
+
+			this.get('onRestore')(spec, filedata).then(() => {
+				this.showDone();
+				this.set('buttonLabel', 'Perform Restore');
+                this.set('restoreSuccess', true);
+			}, ()=> {
+				this.showDone();
+				this.set('restorButtonLabel', 'Perform Restore');
+                this.set('restoreFailed', true);
+			});
+		},
+
+		upload(event) {
+			this.set('restoreUploading', true);
+			this.set('restoreUploadReady', false);
+			this.set('restoreFile', null);
+
+			// const reader = new FileReader();
+			const file = event.target.files[0];
+
+			this.set('restoreFile', file);
+			this.set('restoreUploadReady', true);
+			this.set('restoreUploading', false);
+
+			// let imageData;
+			// reader.onload = () => {
+			// 	imageData = reader.result;
+			// 	this.set('restoreFile', imageData);
+			// 	this.set('restoreUploadReady', true);
+			// 	this.set('restoreUploading', false);
+			// };
+
+			// if (file) {
+			// 	reader.readAsDataURL(file);
+			// }
 		}
 	}
 });

gui/app/services/global.js

@@ -18,6 +18,7 @@ export default Service.extend({
 	appMeta: service(),
 	browserSvc: service('browser'),
 	store: service(),
+	router: service(),
 
 	// Returns SMTP configuration.
 	getSMTPConfig() {
@@ -141,8 +142,12 @@ export default Service.extend({
 		}
 	},
 
-	// Run tenant level backup.
+	// Run backup.
 	backup(spec) {
+		if (!this.get('sessionService.isGlobalAdmin') || this.get('sessionService.isAdmin')) {
+			return;
+		}
+
 		return new EmberPromise((resolve, reject) => {
 			let url = this.get('appMeta.endpoint');
 			let token = this.get('sessionService.session.content.authenticated.token');
@@ -184,5 +189,33 @@ export default Service.extend({
 
 			xhr.send(JSON.stringify(spec));
 		});
+	},
+
+	restore(spec, file) {
+		var data = new FormData();
+		data.set('restore-file', file);
+
+		return new EmberPromise((resolve, reject) => {
+			let url = this.get('appMeta.endpoint');
+			let token = this.get('sessionService.session.content.authenticated.token');
+			let uploadUrl = `${url}/global/restore?token=${token}&org=${spec.overwriteOrg}&users=${spec.recreateUsers}`;
+
+			var xhr = new XMLHttpRequest();
+			xhr.open('POST', uploadUrl);
+
+			xhr.onload = function() {
+				if (this.status == 200) {
+					resolve();
+				} else {
+					reject();
+				}
+			}
+
+			xhr.onerror= function() {
+				reject();
+			}
+
+			xhr.send(data);
+		});
 	}
 });

gui/app/styles/bootstrap.scss

@@ -112,6 +112,7 @@ $link-hover-decoration:     none;
 @import "node_modules/bootstrap/scss/button-group";
 @import "node_modules/bootstrap/scss/dropdown";
 @import "node_modules/bootstrap/scss/forms";
+@import "node_modules/bootstrap/scss/custom-forms";
 @import "node_modules/bootstrap/scss/input-group";
 @import "node_modules/bootstrap/scss/modal";
 @import "node_modules/bootstrap/scss/utilities";

gui/app/styles/view/customize.scss

@@ -152,4 +152,78 @@
 	> .max-results {
 		float: right;
 	}
+
+	> .backup-restore {
+		margin: 20px 0;
+		font-size: 1.1rem;
+
+		> .backup-zone {
+			@include border-radius(3px);
+			border: 1px solid $color-border;
+			padding: 20px 20px;
+			background-color: lighten($color-green, 60%);
+
+			> .explain {
+				color: $color-gray;
+				font-size: 1rem;
+				font-style: italic;
+			}
+
+			> .backup-fail {
+				margin: 10px 0;
+				color: $color-red;
+			}
+
+			> .backup-success {
+				margin: 10px 0;
+				color: $color-green;
+			}
+		}
+
+		> .restore-zone {
+			@include border-radius(3px);
+			border: 1px solid $color-border;
+			margin: 50px 0;
+			padding: 20px 20px;
+			background-color: lighten($color-red, 60%);
+
+			> .restore-fail {
+				margin: 10px 0;
+				color: $color-red;
+			}
+
+			> .restore-success {
+				margin: 10px 0;
+				color: $color-green;
+			}
+
+			> .upload-backup-file {
+				@include ease-in();
+				margin: 50px 0 10px 0;
+
+				> .dz-preview, .dz-processing {
+					display: none !important;
+				}
+			}
+
+			.restore-upload-busy {
+				text-align: center;
+
+				> img {
+					height: 50px;
+					width: 50px;
+				}
+
+				> .wait {
+					color: $color-gray;
+					margin: 10px 0;
+				}
+
+				 > .ready {
+					 color: $color-green;
+					 margin: 10px 0;
+				 }
+			}
+		}
+	}
 }

gui/app/styles/widget/widget-checkbox.scss

@@ -7,33 +7,33 @@
 	margin: 0 0 5px 0;
 
 	> .material-icons {
-		font-size: 1rem;
+		font-size: 1.5rem;
 		color: $color-gray;
 		vertical-align: top;
 	}
 
 	> .selected {
-		color: $color-link;
+		color: $color-blue;
 	}
 
 	&:hover {
-		color: $color-link;
+		color: $color-blue;
 	}
 
 	> .text {
 		display: inline-block;
-		font-size: 0.9rem;
-		vertical-align: text-top;
+		font-size: 1.1rem;
+		vertical-align: sub;
 		color: $color-off-black;
 	}
 }
 
 .ui-checkbox-selected {
-	color: $color-link;
+	color: $color-blue;
 }
 
 .widget-checkbox {
-	color: $color-link;
+	color: $color-blue;
 	cursor: pointer;
 }