<template>
    <div id="login-page">
        <div class="col-sm-3 col-sm-offset-4">
            <div class="card card-block m-y-2">
                <div class="text-xs-center">
                    <img class="m-t-1 m-b-2" src="../images/logo.png" alt="logo">
                </div>
                <form @submit="login()">
                    <fieldset class="form-group">
                        <label for="email" class="sr-only">{{ $t('login.email') }}</label>

                        <input type="text" class="form-control" id="email"
                               placeholder="{{ $t('login.EmailPlaceholder') }}"
                               v-model="user.email" autofocus>
                    </fieldset>
                    <fieldset class="form-group">
                        <label for="password" class="sr-only">{{ $t('login.Password') }}</label>

                        <input type="password" class="form-control" id="password"
                               v-model="user.password"
                               placeholder="{{ $t('login.PasswordPlaceholder') }}">
                    </fieldset>
                    <button type="submit" class="btn btn-primary btn-block">{{ $t('login.SignIn') }}</button>
<!--                    <fieldset class="form-group row m-t-2">
                        <div class="col-xs-12">
                            <a v-link="{ path: '/reset/'}"><u>{{ $t('login.forgotPassword') }}</u></a>
                        </div>
                    </fieldset>-->
                </form>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import auth from '../services/auth';
    import logging from '../services/logging';

    export default {
        data() {
            return {
                user: {
                    email: '',
                    password: ''
                }
            };
        },
        methods: {
            login(){
                auth.login(this.user)
                        .then(()=> {
                            logging.success(this.$t('login.welcome'));
                            this.$router.go('/entries/');
                        })
                        .catch(() => {
                            logging.error(this.$t('login.credentialsInvalids'));
                        });
            }
        }
    }
</script>

