Hassio password protected snapshots (#936)

* Hassio password protected snapshots

* Remove space

* Travis

* Add checkmark to password

* Improve empty password detection

* Update

* Improvement for snapshot name

* Update

* Update hassio-snapshot.html

* Feedback

* Remove autofocus from password

* hidden -> dom-if

hassio/snapshots/hassio-snapshot.html

@@ -2,6 +2,7 @@
 <link rel='import' href='../../bower_components/paper-dialog/paper-dialog.html'>
 <link rel='import' href='../../bower_components/paper-checkbox/paper-checkbox.html'>
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+<link rel="import" href='../../bower_components/paper-input/paper-input.html'>
 
 <dom-module id='hassio-snapshot'>
   <template>
@@ -63,6 +64,9 @@
             </template>
           </div>
         </template>
+        <template is='dom-if' if='[[snapshot.protected]]'>
+          <paper-input autofocus label='Password' type='password' value='{{snapshotPassword}}'></paper-input>
+        </template>
         <template is='dom-if' if='[[error]]'>
           <p class='error'>Error: [[error]]</p>
         </template>
@@ -99,6 +103,7 @@ class HassioSnapshot extends Polymer.Element {
         type: Boolean,
         value: true,
       },
+      snapshotPassword: String,
       error: String,
     };
   }
@@ -142,11 +147,14 @@ class HassioSnapshot extends Polymer.Element {
     const folders =
       this.snapshot.folders.filter(folder => folder.checked).map(folder => folder.slug);
 
-    this.hass.callApi('post', `hassio/snapshots/${this.snapshotSlug}/restore/partial`, {
+    const data = {
       homeassistant: this.restoreHass,
       addons: addons,
       folders: folders
-    }).then(() => {
+    };
+    if (this.snapshot.protected) data.password = this.snapshotPassword;
+
+    this.hass.callApi('post', `hassio/snapshots/${this.snapshotSlug}/restore/partial`, data).then(() => {
       alert('Snapshot restored!');
       this.$.dialog.close();
     }, (error) => {
@@ -158,7 +166,8 @@ class HassioSnapshot extends Polymer.Element {
     if (!confirm('Are you sure you want to restore this snapshot?')) {
       return;
     }
-    this.hass.callApi('post', `hassio/snapshots/${this.snapshotSlug}/restore/full`)
+    const data = this.snapshot.protected ? { password: this.snapshotPassword } : null;
+    this.hass.callApi('post', `hassio/snapshots/${this.snapshotSlug}/restore/full`, data)
       .then(() => {
         alert('Snapshot restored!');
         this.$.dialog.close();

hassio/snapshots/hassio-snapshots.html

@@ -14,7 +14,8 @@
 <dom-module id="hassio-snapshots">
   <template>
     <style include="ha-style hassio-style">
-      paper-checkbox {
+      paper-checkbox,
+      paper-input[type="password"] {
         display: block;
         margin: 4px 0 4px 48px;
       }
@@ -36,8 +37,7 @@
         </div>
         <paper-card>
           <div class='card-content'>
-            <paper-input autofocus label='Name' value='{{snapshotName}}'>
-            </paper-input>
+            <paper-input autofocus label='Name' value='{{snapshotName}}'></paper-input>
             <label id='lbltype'>Type:</label>
             <paper-radio-group selected='{{snapshotType}}' aria-labelledby='lbltype' on-paper-radio-group-changed='typeChanged'>
               <paper-radio-button name='full'>
@@ -63,13 +63,20 @@
                 </paper-checkbox>
               </template>
             </div>
-          </div>
-          <div class='card-actions'>
-            <paper-button disabled='[[creatingSnapshot]]' on-click='createSnapshot'>Create</paper-button>
+            <div>
+              Password:
+              <paper-checkbox checked='{{snapshotHasPassword}}'>Password protected</paper-checkbox>
+              <template is='dom-if' if='[[snapshotHasPassword]]'>
+                <paper-input label='Password' type='password' value='{{snapshotPassword}}'></paper-input>
+              </template>
+            </div>
             <template is='dom-if' if='[[error]]'>
               <p class='error'>[[error]]</p>
             </template>
           </div>
+          <div class='card-actions'>
+            <paper-button disabled='[[creatingSnapshot]]' on-click='createSnapshot'>Create</paper-button>
+          </div>
         </paper-card>
       </div>
 
@@ -85,7 +92,7 @@
             <div class='card-content'>
               <hassio-card-content
                 title='[[computeName(snapshot)]]'
-                description='[[computeType(snapshot.type)]]'
+                description='[[computeDetails(snapshot)]]'
                 datetime='[[snapshot.date]]'
                 icon='[[computeIcon(snapshot.type)]]'
                 icon-class='snapshot'
@@ -105,7 +112,15 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
   static get properties() {
     return {
       hass: Object,
-      snapshotName: String,
+      snapshotName: {
+        type: String,
+        value: '',
+      },
+      snapshotPassword: {
+        type: String,
+        value: '',
+      },
+      snapshotHasPassword: Boolean,
       snapshotType: {
         type: String,
         value: 'full',
@@ -165,9 +180,14 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   createSnapshot() {
+    this.error = '';
+    if (this.snapshotHasPassword && !this.snapshotPassword.length) {
+      this.error = 'Please enter a password.';
+      return;
+    }
     this.creatingSnapshot = true;
     let name = this.snapshotName;
-    if (!name || name.length === 0) {
+    if (!name.length) {
       name = new Date().toLocaleDateString(navigator.language, {
         weekday: 'long',
         year: 'numeric',
@@ -186,6 +206,9 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
       data = { name: name, folders: folders, addons: addons };
       path = 'hassio/snapshots/new/partial';
     }
+    if (this.snapshotHasPassword) {
+      data.password = this.snapshotPassword;
+    }
 
     this.hass.callApi('post', path, data)
       .then(() => {
@@ -213,8 +236,9 @@ class HassioSnapshots extends window.hassMixins.EventsMixin(Polymer.Element) {
     return snapshot.name || snapshot.slug;
   }
 
-  computeType(type) {
-    return type === 'full' ? 'Full snapshot' : 'Partial snapshot';
+  computeDetails(snapshot) {
+    const type = snapshot.type === 'full' ? 'Full snapshot' : 'Partial snapshot';
+    return snapshot.protected ? `${type}, password protected` : type;
   }
 
   computeIcon(type) {