McPringle/sportchef

<!--
    SportChef – Sports Competition Management Software
    Copyright (C) 2016 Marcus Fihlon

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html" />
<link rel="import" href="../../bower_components/paper-button/paper-button.html" />
<link rel="import" href="../../bower_components/paper-input/paper-input.html" />
<link rel="import" href="../../bower_components/gold-email-input/gold-email-input.html" />
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html" />
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html" />
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html" />
<link rel="import" href="../sportchef-jquery/sportchef-jquery.html" />

<dom-module id="sportchef-login-password">
    <template>
        <style>
            paper-input, gold-email-input {
                display: inline-block;
                margin-left: 1em;
                width: 20em;
                position: relative;
            }

            paper-input::before, gold-email-input::before {
                content: '';
                width: 1px;
                background-color: rgb(115, 115, 115);
                height: 10px;
                left: 0;
                bottom: 7px;
                position: absolute;
            }

            paper-input::after, gold-email-input::after {
                content: '';
                width: 1px;
                background-color: rgb(115, 115, 115);
                height: 10px;
                right: 0;
                bottom: 7px;
                position: absolute;
            }

            paper-button {
                background-color: #ee8802;
                border-radius: 0;
                color: white;
                width: 10em;
                height: 2em;
            }

            .action {
                text-align: center;
                margin-top: 2em;
            }

        </style>

        <div>
            <iron-icon icon="icons:mail"></iron-icon>
            <paper-input label="{{localize('email')}}"></paper-input>
        </div>
        <div>
            <iron-icon icon="communication:vpn-key"></iron-icon>
            <gold-email-input label="{{localize('password')}}"></gold-email-input>
        </div>
        <div class="action">
            <paper-button>{{localize('login')}}</paper-button>
        </div>
    </template>

    <script>
        Polymer({
            is: "sportchef-login-password",
            behaviors: [
                Polymer.AppLocalizeBehavior
            ],
            properties: {
                language: {
                    value: 'en'
                },
                resources: {
                    value: function () {
                        return {
                            'en': {
                                'email': 'Your email (what else?)',
                                'password': 'Your password (as usual…)',
                                'login': 'Login'
                            }
                        }
                    }
                }
            }
        });
    </script>
</dom-module>