{{extend "iview/layout/full.html"}}

{{block title}}User login{{end}}

{{block body_class}}skin-blue-light login-page{{end}}

{{block pagecss}}
<style>
  #maincontent {
    min-height: calc(100vh);
  }
</style>
{{end}}

{{block container}}
{{block flash}}
{{include "iview/layout/inc/flash.html"}}
{{end flash}}

<div id="mainapp" style="padding: 0px;" v-cloak>
  <div>
    <layout>
      {{block content_wrapper}}
      <layout id="maincontent">
        {{block content}}
        <i-col span="8" offset="8">
          <div style="margin:20px" class="ivu-card-body">
            <Card style="min-width: 170px; margin-top: 100px;">
              <div style="text-align:center; margin-bottom: 8px;">
                <h1>{{= settings.LAYOUT.logo_lg}}</h1>
              </div>
              <i-form ref="login_form" :model="login_form" :rules="rules">
                <form-item prop="username">
                  <i-input type="text" v-model="login_form.username" placeholder="Username">
                    <icon type="ios-person-outline" slot="prepend"></icon>
                  </i-input>
                </form-item>
                <form-item prop="password" ref="lpass">
                  <i-input type="password" v-model="login_form.password" @keyup.enter.native="login"
                    placeholder="Password">
                    <icon type="ios-lock-outline" slot="prepend"></icon>
                  </i-input>
                </form-item>
                <form-item>
                  <i-switch v-model="login_form.rememberme" style="margin-right: 5px;">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                  </i-switch>
                  Remember Me
                </form-item>
                <form-item>
                  <i-button type="success" icon="md-log-in" @click="login" :loading="loading_form" long>Login
                  </i-button>
                </form-item>
              </i-form>
            </Card>
          </div>
        </i-col>
        {{end content}}
      </layout>
      {{end content_wrapper}}
    </layout>
  </div>
</div>
{{block mainjs}}{{end mainjs}}
{{block mainapp_vue}}
<script>
  var vueObj = new Vue({
    el: '#mainapp',
    data: {
      login_form: {
        username: "",
        password: "",
        rememberme: false
      },
      loading_form: false,
      rules: {
        username: [
          { required: true, message: "Username cannot be empty", trigger: 'blur' }
        ],
        password: [
          { required: true, message: "Password cannot be empty", trigger: 'blur' }
        ]
      },
    },
    methods: {
      login: function () {
        var thisp = this
        this.$refs["login_form"].validate(
          function (valid) {
            if (valid) {
              thisp.loading_form = true
              $.ajax({
                type: "POST",
                url: "{{=url_for('uliweb_comapps.auth.login.views.api_login')}}",
                data: {
                  username: thisp.login_form.username,
                  password: thisp.login_form.password,
                  rememberme: thisp.login_form.rememberme
                },
                dataType: "json",
                success: function (data) {
                  if(!data.success){
                    setTimeout(function(){ vueObj.$refs.lpass.error = data.msg }, 0)
                    thisp.loading_form = false
                  }else{
                    thisp.$Message.success(data.msg)
                    window.location.href = "{{=functions.get_request_next()}}" + window.location.hash
                  }
                }
              })
            }
          }
        )
      },
    }
  })
</script>
{{end mainapp_vue}}
{{end container}}