strolch-wc-auth.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="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>