let m = require('mithril')
let _ = require('lodash')
let user = require('../models/user')
let fadeOutEffect = require('../others/fadeOutEffect')

var login = {
    view: function() {
        return m('section', m('form', {
            onsubmit: function(e) {
                e.preventDefault()
                user.login()
            }
        }, [
            m('h1', 'Masuk'),
            m('.flex.four.grow', [
                m('.fourth-600.full', m('input', {
                    type: 'text',
                    name: 'username',
                    placeholder: 'Username',
                    maxlength: '25',
                    autocomplete: 'off',
                    oninput: m.withAttr('value', function(value) {user.current.username = value}),
                    value: user.current.username,
                    required: 'required'
                })),
                m('.fourth-600.full', m('input', {
                    type: 'password',
                    name: 'password',
                    placeholder: 'Password',
                    oninput: m.withAttr('value', function(value) {
                        user.current.password = value
                    }),
                    value: user.current.password,
                    required: 'required'
                })),
                m('.fourth-600.none'),
                m('.fourth-600.none'),
                m('.half-600.full', m('button.full.pseudo', {
                    type: 'submit'
                }, [
                    m('i.fa.fa-check.fa-fw'),
                    m('span', {
                        style: 'font-size:smaller;'
                    }, 'Masuk')
                ])),
                m('.fourth-600.none'),
                m('.fourth-600.none'),
                _.isNil(window.message) == false ? [
                    m('.half-600.full.label.error', {
                        style: 'margin: 0; font-size: smaller;',
                        onclick: function() {
                            window.message = null
                        }
                    }, window.message),
                    m('.fourth-600.none'),
                    m('.fourth-600.none')
                ]
                : null
            ])
        ]))
    }
}

module.exports = login