Skip to content

Commit

Permalink
Standardized notifications (#17)
Browse files Browse the repository at this point in the history 
Enhanced placeholder UI for dashboard
  • Loading branch information
@jcrowthe
jcrowthe committed Jul 25, 2017
1 parent 3625b42 commit 1e0edb8
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 61 deletions.
86 changes: 86 additions & 0 deletions app/elements/dash-board.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!--
Copyright 2017 Adobe. All rights reserved.
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.
-->

<dom-module id="dash-board">
<style>
.flex {
@apply(--layout-flex);
}
.center {
height: calc(100vh - 64px);
@apply(--layout-horizontal);
@apply(--layout-center-center);
}
.vertical {
@apply(--layout-vertical);
}
.shaded {
color: rgba(56, 67, 81, 0.65);
}
#dashboard {
color: rgba(56, 67, 81, 0.14);
width: 250px;
height: 250px;
}
.rightToast {
right: 10px;
left: auto !important;
min-width: 95px;
}
.success {
background-color: #4CAF50;
}
</style>
<template>
<div class="flex">
<div class="center">
<div class="vertical center">
<iron-icon id="dashboard" icon="dashboard"></iron-icon>
<div>
<div class="shaded">Dashboard</div>
</div>
<div>
<div class="shaded">Coming Soon!</div>
</div>
</div>
</div>
</div>


<paper-toast id="deleted" class="success fit-bottom" duration="1500">
<iron-icon prefix icon="check" style="padding-right: 7px;"></iron-icon>
Deleted
</paper-toast>
<paper-toast id="move" class="success fit-bottom" duration="1500">
<iron-icon prefix icon="check" style="padding-right: 7px;"></iron-icon>
Move Complete
</paper-toast>
</template>

<script>
(function() {
'use strict';
Polymer({
is: 'dash-board',
properties: {

},
attached: function() {
this.$.deleted.fitInto = headerPanelMain;
this.$.move.fitInto = headerPanelMain;
},
});
})();
</script>
</dom-module>
1 change: 1 addition & 0 deletions app/elements/elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
<link rel="import" href="button-actions.html">
<link rel="import" href="secret-create.html">
<link rel="import" href="secret-structure.html">
<link rel="import" href="dash-board.html">

<!-- Third Party Elements -->
<link rel="import" href="../bower_components/granite-file-reader/granite-file-reader.html">
Expand Down
41 changes: 22 additions & 19 deletions app/elements/login-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
color: white;
};
}
#errortoast {
background-color: #EF5350;
paper-toast.error {
background-color: #F44336;
}
#userfield, #passfield {
margin: 0;
Expand Down Expand Up @@ -131,7 +131,10 @@
<paper-progress class="bottombar" indeterminate disabled="{{!loading}}"></paper-progress>
</paper-dialog>

<paper-toast id="errortoast" class="fit-bottom" duration="5000" text""></paper-toast>
<paper-toast id="errortoast" class="fit-bottom error" duration="5000">
<iron-icon prefix icon="error-outline" style="padding-right: 7px;"></iron-icon>
{{errorText}}
</paper-toast>
</template>

<script>
Expand Down Expand Up @@ -231,7 +234,7 @@
// Switch for LDAP, Token, and UserPass auth backends
if (this.page == 0) {
if (!this.username && !this.password) { //Check fields have content
this.$.errortoast.text = 'Username and Password are required';
this.errorText = 'Username and Password are required';
this.$.errortoast.show();
this.loading = false;
return;
Expand All @@ -241,7 +244,7 @@
this.body = {"password": this.password };
} else if (this.page == 1) {
if (!this.token) { //Check field has content
this.$.errortoast.text = 'Token is required';
this.errorText = 'Token is required';
this.$.errortoast.show();
this.loading = false;
return;
Expand All @@ -252,7 +255,7 @@
this.body = '';
} else if (this.page == 2) {
if (!this.username && !this.password) { //Check fields have content
this.$.errortoast.text = 'Username and Password are required';
this.errorText = 'Username and Password are required';
this.$.errortoast.show();
this.loading = false;
return;
Expand All @@ -264,7 +267,7 @@
this.loading = true;
this.push('authRequests', this.$.testReq.generateRequest());
} else {
this.$.errortoast.text = 'An HTTPS based URL is required.';
this.errorText = 'An HTTPS based URL is required.';
this.$.errortoast.show();
this.loading = false;
}
Expand All @@ -290,15 +293,15 @@
},
_error: function(e) {
this.loading = false;
if (this.loginError.response.errors[0].includes('Invalid Credentials')) this.$.errortoast.text = 'Invalid Credentials';
else if (this.loginError.response.errors[0].includes('No Such Object')) this.$.errortoast.text = 'Invalid Username or Password';
else if (this.loginError.response.errors[0] == 'invalid username or password') this.$.errortoast.text = 'Invalid Username or Password';
else if (this.loginError.response.errors[0] == 'missing client token') this.$.errortoast.text = 'Permission Denied';
else if (this.loginError.response.errors[0] == 'Vault is sealed') this.$.errortoast.text = 'This vault is currently sealed';
else if (this.loginError.response.errors[0] == 'unsupported path') this.$.errortoast.text = 'This auth backend is not supported by the server';
else if (this.loginError.response.errors[0] == 'permission denied' && this.page == 1) this.$.errortoast.text = 'Invalid Token';
else if (this.loginError.response.errors[0] == 'permission denied') this.$.errortoast.text = 'Permission Denied';
else this.$.errortoast.text = 'Unknown Error: Please try again later.';
if (this.loginError.response.errors[0].includes('Invalid Credentials')) this.errorText = 'Invalid Credentials';
else if (this.loginError.response.errors[0].includes('No Such Object')) this.errorText = 'Invalid Username or Password';
else if (this.loginError.response.errors[0] == 'invalid username or password') this.errorText = 'Invalid Username or Password';
else if (this.loginError.response.errors[0] == 'missing client token') this.errorText = 'Permission Denied';
else if (this.loginError.response.errors[0] == 'Vault is sealed') this.errorText = 'This vault is currently sealed';
else if (this.loginError.response.errors[0] == 'unsupported path') this.errorText = 'This auth backend is not supported by the server';
else if (this.loginError.response.errors[0] == 'permission denied' && this.page == 1) this.errorText = 'Invalid Token';
else if (this.loginError.response.errors[0] == 'permission denied') this.errorText = 'Permission Denied';
else this.errorText = 'Unknown Error: Please try again later.';
this.$.errortoast.show();
},
_testSuccess: function() {
Expand All @@ -308,13 +311,13 @@
!this.testResponse.hasOwnProperty('version') ||
!this.testResponse.hasOwnProperty('cluster_id') ||
!this.testResponse.hasOwnProperty('cluster_name')) {
this.$.errortoast.text = 'No supported Vault instance found at the this URL';
this.errorText = 'No supported Vault instance found at the this URL';
this.$.errortoast.show();
this.approvedURL = false;
this.loading = false;
return;
} else if (this.testResponse.sealed) {
this.$.errortoast.text = 'Vault is sealed.';
this.errorText = 'Vault is sealed.';
this.$.errortoast.show();
this.approvedURL = false;
this.loading = false;
Expand All @@ -324,7 +327,7 @@
}
},
_testError: function() {
this.$.errortoast.text = 'No supported Vault instance found at the this URL';
this.errorText = 'No supported Vault instance found at the this URL';
this.$.errortoast.show();
this.approvedURL = false;
this.loading = false;
Expand Down
4 changes: 1 addition & 3 deletions app/elements/login-status.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@
<dom-module id="login-status">
<template>
<style>
#errortoast {
background-color: #EF5350;
}

</style>
<iron-ajax id="checkStatus"
url="{{statusURL}}"
Expand Down
52 changes: 31 additions & 21 deletions app/elements/secret-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,10 @@
@apply(--layout-end-justified);
}
paper-toast.success {
right: 10px;
left: auto !important;
background-color: var(--accent-color);
min-width: 95px;
background-color: #4CAF50;
}
paper-toast.err {
right: 10px;
left: auto !important;
background-color: red;
min-width: 95px;
paper-toast.error {
background-color: #F44336;
}
a {
color: black;
Expand Down Expand Up @@ -142,13 +136,22 @@
headers="{{header}}">
</iron-ajax>

<paper-toast id="updated" class="success" duration="1500" text="Updated"></paper-toast>
<paper-toast id="error" class="err" duration="5000" text="An unknown error occurred"></paper-toast>
<paper-toast id="updated" class="success fit-bottom" duration="1500">
<iron-icon prefix icon="info-outline" style="padding-right: 7px;"></iron-icon>
Updated
</paper-toast>
<paper-toast id="error" class="error fit-bottom" duration="5000">
<iron-icon prefix icon="error-outline" style="padding-right: 7px;"></iron-icon>
{{errorText}}
</paper-toast>
<paper-toast id="secretexists" class="fit-bottom" duration="0">
<iron-icon prefix icon="info-outline"></iron-icon>
<iron-icon prefix icon="info-outline" style="padding-right: 7px;"></iron-icon>
A secret already exists at this location! Continuing will overwrite it.
</paper-toast>

<paper-toast id="added" class="success fit-bottom" duration="1500">
<iron-icon prefix icon="check" style="padding-right: 7px;"></iron-icon>
Secret Added
</paper-toast>

<paper-dialog id="deleteModal" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<h2>Delete?</h2>
Expand Down Expand Up @@ -248,10 +251,17 @@ <h2>{{currentName}}</h2>
moveRequest: {
type: Object,
value: {}
},
errorText: {
type: String,
value: 'An unknown error occurred'
}
},
attached: function() {
this.$.secretexists.fitInto = headerPanelMain;
this.$.added.fitInto = headerPanelMain;
this.$.updated.fitInto = headerPanelMain;
this.$.error.fitInto = headerPanelMain;
},
// ---------- Other ----------
_fileUpload: function(e, file){
Expand Down Expand Up @@ -341,7 +351,7 @@ <h2>{{currentName}}</h2>
};
}
} else {
this.$.error.text = "You don't have the rights to move this secret. Check for 'Delete' and 'Create' capabilities failed.";
this.errorText = "You don't have the rights to move this secret. Check for 'Delete' and 'Create' capabilities failed.";
this.$.error.show();
this.loading = false;
}
Expand Down Expand Up @@ -377,7 +387,7 @@ <h2>{{currentName}}</h2>
} else if (Object.keys(this.moveRequest.delete).length && this.moveRequest.delete.status != 204) { // Delete failed
this.moveRequest = {}
this.loading = false;
this.$.error.text = "Move failed. You may want to check both old and new locations for duplicates";
this.errorText = "Move failed. You may want to check both old and new locations for duplicates";
this.$.error.show();
} else if (Object.keys(this.moveRequest.update).length && this.moveRequest.update.status == 204) { // Update complete, now delete
this._deleteKey();
Expand All @@ -387,7 +397,7 @@ <h2>{{currentName}}</h2>
} else { // Catch all error
this.moveRequest = {};
this.loading = false;
this.$.error.text = "Move: An unknown error occurred";
this.errorText = "Move: An unknown error occurred";
this.$.error.show();
}
return true;
Expand Down Expand Up @@ -415,12 +425,12 @@ <h2>{{currentName}}</h2>
},
_moveKey: function() {
if (this.newLocation.endsWith('/')) {
this.$.error.text = "Location must be a full path including the key name. It cannot end with '/' ";
this.errorText = "Location must be a full path including the key name. It cannot end with '/' ";
this.$.error.show();
} else {
// Move: 1. Check for Delete and Create capabilities on respective locations. 2. Create new secret, wait for success. 3. Delete old secret
if (this.location == this.newLocation) {
this.$.error.text = "You must specify a new location for this secret!";
this.errorText = "You must specify a new location for this secret!";
this.$.error.show();
} else {
this.body = {path: this.location};
Expand Down Expand Up @@ -469,17 +479,17 @@ <h2>{{currentName}}</h2>
// ---------- Error ----------
_getError: function(e) {
this.loading = false;
this.$.error.text = "An error occurred while retrieving this secret. Check permissions?";
this.errorText = "An error occurred while retrieving this secret. Check permissions?";
this.$.error.show();
},
_deleteError: function(e) {
this.loading = false;
this.$.error.text = "An error occurred while deleting this secret. Check permissions?";
this.errorText = "An error occurred while deleting this secret. Check permissions?";
this.$.error.show();
},
_updateError: function(e) {
this.loading = false;
this.$.error.text = "An error occurred while updating this secret. Check permissions?";
this.errorText = "An error occurred while updating this secret. Check permissions?";
this.$.error.show();
}
});
Expand Down
10 changes: 1 addition & 9 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,7 @@
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}" style="height: 100%">
<section data-route="home">
<paper-material elevation="1">
<h2 class="page-title">Dashboard</h2>
<p>Placeholder for future content. This may include keys nearing the end of their 90 day lifespan and recently modified keys. </p>
</paper-material>
<dash-board></dash-board>
</section>

<section data-route="create">
Expand All @@ -107,15 +104,10 @@ <h2 class="page-title">Dashboard</h2>
</paper-scroll-header-panel>
</paper-drawer-panel>

<paper-toast id="deleted" class="toast toastSuccess fit-bottom" duration="1500" text="Deleted"></paper-toast>
<paper-toast id="added" class="toast toastSuccess fit-bottom" duration="1500" text="Secret Added"></paper-toast>
<paper-toast id="move" class="toast toastSuccess fit-bottom" duration="1500" text="Move Complete"></paper-toast>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>

<paper-progress indeterminate class="bottombar" disabled="{{!loading}}"></paper-progress>

</template>

<script src="scripts/app.js"></script>
Expand Down
9 changes: 0 additions & 9 deletions app/styles/app-theme.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,15 +144,6 @@
border-bottom: none;
}

.toast {
right: 10px;
left: auto !important;
min-width: 95px;
}
.toastSuccess {
background-color: rgba(28, 189, 28, 0.76);
}

.menu-name {
color: white;
}
Expand Down

0 comments on commit 1e0edb8

Please sign in to comment.