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-code">
    <template>
        <style>
            p {
                text-align: center;
                width: 23em;
                margin-bottom: 0;
            }

            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: 15em;
                height: 2em;
            }

            .action {
                text-align: center;
                margin-top: 0.5em;
                margin-bottom: 1em;
            }

        </style>

        <p>
            {{localize('infoJoining')}}<br/>
            {{localize('infoFirstStep')}}
        </p>
        <div>
            <iron-icon icon="icons:mail"></iron-icon>
            <paper-input label="{{localize('email')}}"></paper-input>
        </div>
        <div class="action">
            <paper-button>{{localize('requestCode')}}</paper-button>
        </div>
        <p>
            {{localize('infoSecondStep')}}
        </p>
        <div>
            <iron-icon icon="communication:vpn-key"></iron-icon>
            <gold-email-input label="{{localize('code')}}"></gold-email-input>
        </div>
        <div class="action">
            <paper-button>{{localize('login')}}</paper-button>
        </div>
    </template>

    <script>
        Polymer({
            is: "sportchef-login-code",
            behaviors: [
                Polymer.AppLocalizeBehavior
            ],
            properties: {
                language: {
                    value: 'en'
                },
                resources: {
                    value: function () {
                        return {
                            'en': {
                                'infoJoining': 'Joining SportChef without password is easy:',
                                'infoFirstStep': 'First: provide your email to get a single-use code',
                                'infoSecondStep': 'Second: check your mailbox and insert the single-use code below.',
                                'email': 'Your email here',
                                'requestCode': 'Yeah. Get me the code',
                                'code': 'Your single-use code here',
                                'login': 'Login and rock'
                            }
                        }
                    }
                }
            }
        });
    </script>
</dom-module>