<template>
  <login-layout>
    <div class="q-pa-md">
      <div class="q-gutter-y-md column" style="width: 240px">
        <Logo class="logo"/>
        <q-input class="login-name login_screen" bg-color="white" standout="bg-yellow-2" outlined dense v-model="login"
                 :placeholder="$t('COREWEBCLIENT.LABEL_LOGIN')" @keyup.enter="proceedLogin">
          <template v-slot:prepend>
            <q-icon name="person"/>
          </template>
        </q-input>

        <q-input class="q-mt-none login-password login_screen"  bg-color="white" standout="bg-yellow-2" outlined dense v-model="password"
                 type="password" :placeholder="$t('COREWEBCLIENT.LABEL_PASSWORD')" @keyup.enter="proceedLogin">
          <template v-slot:prepend>
            <q-icon name="lock"/>
          </template>
        </q-input>

        <q-btn unelevated no-caps outline bg-color="primary" color="white" class="q-px-sm bg-primary" :ripple="false"
                :loading="loading" @click="proceedLogin">
          {{ $t('COREWEBCLIENT.ACTION_SIGN_IN') }}
          <template v-slot:loading>
            {{ $t('COREWEBCLIENT.ACTION_SIGN_IN_IN_PROGRESS') }}
          </template>
        </q-btn>
      </div>
    </div>
  </login-layout>
</template>

<script>
import core from 'src/core'
import modulesManager from 'src/modules-manager'

import errors from 'src/utils/errors'
import notification from 'src/utils/notification'
import webApi from 'src/utils/web-api'

import Logo from 'assets/icons/Logo'
import LoginLayout from 'src/layouts/LoginLayout'

export default {
  name: 'Login',

  components: {
    Logo,
    LoginLayout
  },

  data() {
    return {
      loading: false,
      login: '',
      password: '',
    }
  },
  methods: {
    finishLogin () {
      return core.requestAppData().then(() => {
        if (this.$store.getters['user/isUserSuperAdminOrTenantAdmin']) {
          const defaultRoute = modulesManager.getDefaultRouteForUser()
          return this.$router.push(defaultRoute?.path || '/system')
        }
        return Promise.reject()
      })
    },

    proceedLogin () {
      if (!this.loading) {
        this.loading = true
        webApi.sendRequest({
          moduleName: 'AdminAuth',
          methodName: 'LoginAsSuperadmin',
          parameters: {
            Login: this.login,
            Password: this.password,
          },
        }).then(() => {
          return this.finishLogin()
        }).catch(() => {
          // Session cookie may be set even when API returns AuthError (superadmin quirk).
          return this.finishLogin()
        }).then(() => {
          this.loading = false
        }, (response) => {
          this.loading = false
          notification.showError(errors.getTextFromResponse(response, this.$t('COREWEBCLIENT.ERROR_PASS_INCORRECT')))
        })
      }
    },
  }
}
</script>

<style scoped>
.logo {
  margin: 0 auto;
}
</style>
