438 lines
16 KiB
HTML
438 lines
16 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%;
|
|
|
|
--input-line-height: 24px;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
.centered {
|
|
width: 300px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
paper-card {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-actions {
|
|
text-align: right;
|
|
}
|
|
|
|
paper-input {
|
|
--paper-input-container-input: {
|
|
height: var(--input-line-height);
|
|
line-height: var(--input-line-height);
|
|
};
|
|
}
|
|
|
|
</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="usernameInput"
|
|
value="{{username}}"
|
|
label="{{localize('username')}}"
|
|
required
|
|
autofocus="true"
|
|
auto-validate></paper-input>
|
|
|
|
<paper-input id="passwordInput"
|
|
value="{{password}}"
|
|
label="{{localize('password')}}"
|
|
required
|
|
type="password"
|
|
on-focus="onFocus"
|
|
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="usernameResetInput"
|
|
value="{{username}}"
|
|
label="{{localize('username')}}"
|
|
required
|
|
autofocus="true"
|
|
auto-validate></paper-input>
|
|
</div>
|
|
<div class="card-actions">
|
|
<paper-button on-tap="_cancelReset">{{localize('cancel')}}</paper-button>
|
|
<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="codeInput"
|
|
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="password1Input"
|
|
bind-value="{{password1}}"
|
|
label="{{localize('password')}}"
|
|
required
|
|
type="password"
|
|
on-focus="onFocus"
|
|
auto-validate></paper-input>
|
|
<paper-input id="password2Input"
|
|
bind-value="{{password2}}"
|
|
label="{{localize('repeat')}}"
|
|
required
|
|
type="password"
|
|
on-focus="onFocus"
|
|
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>
|
|
|
|
<paper-dialog id="dlg" modal on-iron-overlay-closed="onCloseDlg">
|
|
<h2>[[dlgTitle]]</h2>
|
|
<p>[[dlgText]]</p>
|
|
<div class="buttons">
|
|
<paper-button dialog-confirm autofocus>[[localize('close')]]</paper-button>
|
|
</div>
|
|
</paper-dialog>
|
|
|
|
<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: {
|
|
basePath: {
|
|
type: String,
|
|
value: function () {
|
|
return './';
|
|
}
|
|
},
|
|
localesPath: {
|
|
type: String,
|
|
value: './locales.json'
|
|
},
|
|
passwordEncoding: {
|
|
type: String
|
|
},
|
|
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
|
|
},
|
|
|
|
onFocus: function (evt) {
|
|
evt.target.$.input.select();
|
|
},
|
|
|
|
onCloseDlg: function (evt) {
|
|
this.$.passwordInput.inputElement.select();
|
|
},
|
|
|
|
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...");
|
|
}
|
|
|
|
var that = this;
|
|
setTimeout(function () {
|
|
that.$.usernameInput.focus();
|
|
}, 100);
|
|
},
|
|
|
|
sessionValidated: function () {
|
|
console.log("Session validated.");
|
|
Strolch.sessionVerified = true;
|
|
this.fire('strolch-session-valid', {
|
|
sessionVerified: true
|
|
});
|
|
},
|
|
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.showError(this.dlgTitle, dlgText);
|
|
},
|
|
|
|
logout: function () {
|
|
console.log('Logging out...');
|
|
|
|
this._ajaxResponse = function (data) {
|
|
console.log('Logged out.');
|
|
Strolch.clearStorageData();
|
|
};
|
|
this.dlgTitle = this.localize('logoutFailed');
|
|
this.$.ajaxAuth.url = this.basePath + 'rest/strolch/authentication/' + Strolch.getAuthToken();
|
|
this.$.ajaxAuth.method = 'DELETE';
|
|
this.$.ajaxAuth.generateRequest();
|
|
},
|
|
|
|
_submitForm: function () {
|
|
|
|
if (!this.$.usernameInput.validate() || !this.$.passwordInput.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 = this.localize('authenticationFailed');
|
|
this.$.ajaxAuth.body = {
|
|
username: this.username,
|
|
password: btoa(unescape(encodeURIComponent(this.password))),
|
|
encoding: this.passwordEncoding
|
|
};
|
|
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;
|
|
},
|
|
|
|
_cancelReset: function () {
|
|
this._hideAll();
|
|
this.$.authForm.hidden = false;
|
|
},
|
|
|
|
_initiateReset: function () {
|
|
|
|
if (!this.$.usernameResetInput.validate()) return;
|
|
|
|
console.log('Initiating reset...');
|
|
|
|
var that = this;
|
|
this._ajaxResponse = function (data) {
|
|
that._hideAll();
|
|
that.$.resetInitiated.hidden = false;
|
|
that.$.codeInput.focus();
|
|
};
|
|
this.dlgTitle = this.localize('resetFailed');
|
|
|
|
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.$.codeInput.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.$.password1Input.focus();
|
|
};
|
|
this.dlgTitle = this.localize('resetFailed');
|
|
|
|
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.$.password1Input.validate() || !this.$.password2Input.validate()) return;
|
|
|
|
if (this.password1 !== this.password2) {
|
|
this.$.password1Input.invalid = true;
|
|
this.$.password2Input.invalid = true;
|
|
var dlgTitle = this.localize('resetFailed');
|
|
var dlgText = this.localize('passwordsDontMatch');
|
|
this.showError(dlgTitle, dlgText);
|
|
}
|
|
|
|
console.log('Doing reset...');
|
|
|
|
var that = this;
|
|
this._ajaxResponse = function (data) {
|
|
that._hideAll();
|
|
that.$.passwordResetDone.hidden = false;
|
|
};
|
|
this.dlgTitle = this.localize('resetFailed');
|
|
|
|
this.$.ajaxAuth.url = this.basePath + 'rest/strolch/privilege/users/' + this.username + '/password';
|
|
this.$.ajaxAuth.method = 'PUT';
|
|
this.$.ajaxAuth.body = {
|
|
password: btoa(unescape(encodeURIComponent(this.password1))),
|
|
encoding: this.passwordEncoding
|
|
};
|
|
this.$.ajaxAuth.generateRequest();
|
|
},
|
|
|
|
showError: function (title, text) {
|
|
this.dlgTitle = title;
|
|
this.dlgText = text;
|
|
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
|
|
this.$.dlg.open();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|