<template>
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui blue image header">
                <div class="content">
                    Login
                </div>
            </h2>
            <form class="ui large form" id="loginform">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="username" placeholder="Username" v-model="credentials.username">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="Password" v-model="credentials.password">
                        </div>
                    </div>
                    <div class="ui fluid large blue submit button" @click="submit()">Login</div>
                </div>

                <div class="ui error message" v-if="error">
                    {{ error }}
                </div>

            </form>
        </div>
    </div>
</template>

<script>
    import auth from '../auth'

    export default {

        data() {
            return {
                credentials: {
                    username: '',
                    password: ''
                },
                error: ''
            }
        },

        methods: {

            submit() {

                var credentials = {
                    username: this.credentials.username,
                    password: this.credentials.password
                }

                auth.login(this, credentials, 'home')

            }
        }

    }
</script>