import { body, div, form, input, p, parse, span} from './main.js'
import { login } from './api.js'

function render() {
    document.body.replaceWith(
        body({},
            div({id: 'login', class: 'fill'},
                span({id: 'logo'},
                    span({class: 'accent'}, parse('Wrapper'))
                ),
                form({autocomplete: "off"}, 
                    input({
                        type: 'text',
                        name: 'user',
                        id: 'user',
                        placeholder: 'Username',
                        autofocus: 1
                    }),
                    input({
                        type: 'password',
                        name: 'pass',
                        id: 'pass',
                        placeholder: 'Password',
                        onkeydown: async (event) => {
                            if (event.key == 'Enter') {
                                event.preventDefault() 
                                let user = document.getElementById('user').value
                                let pass = document.getElementById('pass').value

                                let res = await login(user, pass)

                                if (res.status === 200) {
                                    location.href = '/home'
                                }
                            }
                        }
                    })
                )
            )
        )
    )
}

render()