396 lines
15 KiB
HTML
396 lines
15 KiB
HTML
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
|
|
|
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
|
|
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
|
|
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
|
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
|
|
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
|
|
<link rel="import" href="../../bower_components/iron-a11y-keys/iron-a11y-keys.html">
|
|
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
|
|
<link rel="import" href="../../bower_components/strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
|
|
|
|
<dom-module id="strolch-wc-auth">
|
|
|
|
<template>
|
|
|
|
<style>
|
|
|
|
:host {
|
|
display: block;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
.centered {
|
|
width: 300px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
paper-card {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-actions {
|
|
text-align: end;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="container">
|
|
|
|
<div id="authForm" class="centered">
|
|
<iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_submitForm"></iron-a11y-keys>
|
|
<paper-card heading="{{localize('login')}}">
|
|
<div class="card-content">
|
|
<p>{{localize('pleaseLogin', 'appTitle', appTitle)}}</p>
|
|
<paper-input id="username"
|
|
bind-value="{{username}}"
|
|
label="{{localize('username')}}"
|
|
required
|
|
autofocus="true"
|
|
auto-validate></paper-input>
|
|
|
|
<paper-input id="password"
|
|
bind-value="{{password}}"
|
|
label="{{localize('password')}}"
|
|
required
|
|
type="password"
|
|
auto-validate></paper-input>
|
|
</div>
|
|
<div class="card-actions">
|
|
<paper-button on-tap="_showResetForm">{{localize('reset')}}</paper-button>
|
|
<paper-button on-tap="_submitForm">{{localize('login')}}</paper-button>
|
|
</div>
|
|
</paper-card>
|
|
</div>
|
|
|
|
<div id="initiateResetForm" class="centered" hidden>
|
|
<iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_initiateReset"></iron-a11y-keys>
|
|
<paper-card heading="{{localize('passwordReset')}}">
|
|
<div class="card-content">
|
|
<p>{{localize('passwordResetDesc')}}</p>
|
|
<paper-input id="usernameReset"
|
|
bind-value="{{username}}"
|
|
label="{{localize('username')}}"
|
|
required
|
|
autofocus="true"
|
|
auto-validate></paper-input>
|
|
</div>
|
|
<div class="card-actions">
|
|
<paper-button on-tap="_initiateReset">{{localize('reset')}}</paper-button>
|
|
</div>
|
|
</paper-card>
|
|
</div>
|
|
|
|
<div id="resetInitiated" class="centered" hidden>
|
|
<iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_validateChallenge"></iron-a11y-keys>
|
|
<paper-card heading="{{localize('passwordReset')}}">
|
|
<div class="card-content">
|
|
<p>{{localize('passwordResetInitiated')}}</p>
|
|
<p>{{localize('passwordResetCode')}}</p>
|
|
<paper-input id="code"
|
|
bind-value="{{code}}"
|
|
label="{{localize('code')}}"
|
|
required
|
|
autofocus="true"
|
|
auto-validate></paper-input>
|
|
</div>
|
|
<div class="card-actions">
|
|
<paper-button on-tap="_validateChallenge">{{localize('send')}}</paper-button>
|
|
</div>
|
|
</paper-card>
|
|
</div>
|
|
|
|
<div id="resetForm" class="centered" hidden>
|
|
<iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_doReset"></iron-a11y-keys>
|
|
<paper-card heading="{{localize('passwordReset')}}">
|
|
<div class="card-content">
|
|
<p>{{localize('passwordResetNew')}}</p>
|
|
<paper-input id="password1"
|
|
bind-value="{{password1}}"
|
|
label="{{localize('password')}}"
|
|
required
|
|
type="password"
|
|
auto-validate></paper-input>
|
|
<paper-input id="password2"
|
|
bind-value="{{password2}}"
|
|
label="{{localize('repeat')}}"
|
|
required
|
|
type="password"
|
|
auto-validate></paper-input>
|
|
</div>
|
|
<div class="card-actions">
|
|
<paper-button on-tap="_doReset">{{localize('reset')}}</paper-button>
|
|
</div>
|
|
</paper-card>
|
|
</div>
|
|
|
|
<div id="passwordResetDone" class="centered" hidden>
|
|
<iron-a11y-keys id="a11y" keys="enter" on-keys-pressed="_toLogin"></iron-a11y-keys>
|
|
<paper-card heading="{{localize('passwordReset')}}">
|
|
<div class="card-content">
|
|
<p>{{localize('passwordResetDone')}}</p>
|
|
</div>
|
|
<div class="card-actions">
|
|
<paper-button on-tap="_showLoginForm">{{localize('login')}}</paper-button>
|
|
</div>
|
|
</paper-card>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<iron-ajax id="ajaxAuthCheck"
|
|
handle-as="json"
|
|
method="HEAD"
|
|
on-response="sessionValidated"
|
|
on-error="sessionInvalid"></iron-ajax>
|
|
<iron-ajax id="ajaxAuth"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
method="POST"
|
|
on-response="_ajaxResponse"
|
|
on-error="_handleAjaxError"></iron-ajax>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
is: 'strolch-wc-auth',
|
|
|
|
behaviors: [
|
|
StrolchLocalizeBehavior
|
|
],
|
|
|
|
properties: {
|
|
app: {
|
|
type: Object
|
|
},
|
|
basePath: {
|
|
type: String,
|
|
value: function () {
|
|
return './';
|
|
}
|
|
},
|
|
appTitle: {
|
|
type: String
|
|
},
|
|
username: {
|
|
type: String
|
|
},
|
|
password: {
|
|
type: String
|
|
},
|
|
password1: {
|
|
type: String
|
|
},
|
|
password2: {
|
|
type: String
|
|
},
|
|
code: {
|
|
type: String
|
|
},
|
|
dlgTitle : {
|
|
type:String
|
|
}
|
|
},
|
|
|
|
ready: function () {
|
|
// do nothing
|
|
},
|
|
|
|
attached: function () {
|
|
// this component has its own locales resources to load
|
|
this.loadResources(this.resolveUrl("./locales.json"));
|
|
|
|
// default the language to english, if there is none given by the app
|
|
if(!this.language) this.language = "en";
|
|
},
|
|
|
|
reload: function () {
|
|
|
|
this.username = '';
|
|
this.password = '';
|
|
this.password1 = '';
|
|
this.password2 = '';
|
|
this.code = '';
|
|
|
|
this._hideAll();
|
|
this.$.authForm.hidden = false;
|
|
|
|
if (Strolch.hasAuthToken()) {
|
|
this.$.ajaxAuthCheck.url = this.basePath + 'rest/strolch/authentication/' + localStorage.authToken;
|
|
this.$.ajaxAuthCheck.generateRequest();
|
|
console.log("Validating session...");
|
|
}
|
|
},
|
|
|
|
sessionValidated: function () {
|
|
console.log("Session validated.");
|
|
Strolch.sessionVerified = true;
|
|
this.app.sessionValid();
|
|
},
|
|
sessionInvalid: function () {
|
|
console.log("Session invalid.");
|
|
Strolch.sessionVerified = false;
|
|
Strolch.clearStorageData();
|
|
},
|
|
|
|
_ajaxResponse: function () {
|
|
console.log('No response handler defined!');
|
|
},
|
|
|
|
_handleAjaxError: function (data) {
|
|
var dlgText;
|
|
if (data.detail.request.response) {
|
|
dlgText = data.detail.request.response.msg;
|
|
} else {
|
|
dlgText = data.detail.error;
|
|
}
|
|
|
|
this.app.showError(this.dlgTitle, dlgText);
|
|
},
|
|
|
|
logout: function () {
|
|
console.log('Logging out...');
|
|
|
|
this._ajaxResponse = function (data) {
|
|
console.log('Logged out.');
|
|
Strolch.clearStorageData();
|
|
};
|
|
this.dlgTitle = "Logout failed";
|
|
this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/' + Strolch.getAuthToken();
|
|
this.$.ajaxAuth.method = 'DELETE';
|
|
this.$.ajaxAuth.generateRequest();
|
|
},
|
|
|
|
_submitForm: function () {
|
|
|
|
if (!this.$.username.validate() || !this.$.password.validate())
|
|
return;
|
|
|
|
console.log('Authenticating...');
|
|
this._ajaxResponse = function (data) {
|
|
console.log('Logged in.');
|
|
Strolch.setAuthToken(data.detail.response.authToken);
|
|
Strolch.setUserConfig(data.detail.response);
|
|
location.reload();
|
|
};
|
|
this.dlgTitle = "Authentication failed";
|
|
this.$.ajaxAuth.body = {
|
|
'username': this.username,
|
|
'password': btoa(this.password)
|
|
};
|
|
this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication';
|
|
this.$.ajaxAuth.method = 'POST';
|
|
this.$.ajaxAuth.generateRequest();
|
|
},
|
|
|
|
_hideAll: function () {
|
|
this.$.authForm.hidden = true;
|
|
this.$.initiateResetForm.hidden = true;
|
|
this.$.resetInitiated.hidden = true;
|
|
this.$.resetForm.hidden = true;
|
|
this.$.passwordResetDone.hidden = true;
|
|
},
|
|
|
|
_showResetForm: function () {
|
|
this._hideAll();
|
|
this.$.initiateResetForm.hidden = false;
|
|
},
|
|
|
|
_showLoginForm: function () {
|
|
this._hideAll();
|
|
this.$.authForm.hidden = false;
|
|
},
|
|
|
|
_initiateReset: function () {
|
|
|
|
if (!this.$.usernameReset.validate())
|
|
return;
|
|
|
|
console.log('Initiating reset...');
|
|
|
|
var that = this;
|
|
this._ajaxResponse = function (data) {
|
|
that._hideAll();
|
|
that.$.resetInitiated.hidden = false;
|
|
that.$.code.focus();
|
|
};
|
|
this.dlgTitle = "Reset failed";
|
|
|
|
this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/challenge';
|
|
this.$.ajaxAuth.method = 'POST';
|
|
this.$.ajaxAuth.body = {
|
|
'username': this.username,
|
|
'usage': 'set-password'
|
|
};
|
|
this.$.ajaxAuth.generateRequest();
|
|
},
|
|
|
|
_validateChallenge: function () {
|
|
|
|
if (!this.$.code.validate())
|
|
return;
|
|
|
|
console.log('Validating challenge...');
|
|
|
|
var that = this;
|
|
this._ajaxResponse = function (data) {
|
|
that.authToken = data.detail.response.authToken;
|
|
that._hideAll();
|
|
that.$.resetForm.hidden = false;
|
|
that.$.password1.focus();
|
|
};
|
|
this.dlgTitle = "Reset failed";
|
|
|
|
this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/challenge';
|
|
this.$.ajaxAuth.method = 'PUT';
|
|
this.$.ajaxAuth.body = {
|
|
'username': this.username,
|
|
'challenge': this.code
|
|
};
|
|
this.$.ajaxAuth.generateRequest();
|
|
},
|
|
|
|
_doReset: function () {
|
|
|
|
if (!this.$.password1.validate() || !this.$.password2.validate())
|
|
return;
|
|
|
|
if (this.password1 !== this.password2) {
|
|
this.$.password1.invalid = true;
|
|
this.$.password2.invalid = true;
|
|
var dlgTitle = "Reset failed";
|
|
var dlgText = 'Passwords do not match.';
|
|
this.app.showError(dlgTitle, dlgText);
|
|
}
|
|
|
|
console.log('Doing reset...');
|
|
|
|
var that = this;
|
|
this._ajaxResponse = function (data) {
|
|
that._hideAll();
|
|
that.$.passwordResetDone.hidden = false;
|
|
};
|
|
this.dlgTitle = "Reset failed";
|
|
|
|
this.$.ajaxAuth.url = this.basePath + 'rest/strolch/privilege/users/' + this.username + '/password';
|
|
this.$.ajaxAuth.method = 'PUT';
|
|
this.$.ajaxAuth.body = {
|
|
'password': btoa(this.password1)
|
|
};
|
|
this.$.ajaxAuth.generateRequest();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|