// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>
  <a-form
    id="formLogin"
    class="user-layout-login"
    :ref="formRef"
    :model="form"
    :rules="rules"
    @finish="handleSubmit"
    v-ctrl-enter="handleSubmit"
  >
    <a-tabs
      class="tab-center"
      :activeKey="customActiveKey"
      size="large"
      :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
      @change="handleTabClick"
      :animated="false"
    >
      <a-tab-pane key="cs">
        <template #tab>
          <span>
            <safety-outlined />
            {{ $t('label.login.portal') }}
          </span>
        </template>
        <a-form-item v-if="$config.multipleServer" name="server" ref="server">
          <a-select
            size="large"
            :placeholder="$t('server')"
            v-model:value="form.server"
            @change="onChangeServer"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }">
            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase" :label="item.name">
              <template #prefix>
                <database-outlined />
              </template>
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item ref="username" name="username">
          <a-input
            size="large"
            type="text"
            v-focus="true"
            :placeholder="$t('label.username')"
            v-model:value="form.username"
          >
            <template #prefix>
              <user-outlined />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item ref="password" name="password">
          <a-input-password
            size="large"
            type="password"
            autocomplete="false"
            :placeholder="$t('label.password')"
            v-model:value="form.password"
          >
            <template #prefix>
              <lock-outlined />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item ref="domain" name="domain">
          <a-input
            size="large"
            type="text"
            :placeholder="$t('label.domain')"
            v-model:value="form.domain"
          >
            <template #prefix>
              <block-outlined />
            </template>
          </a-input>
        </a-form-item>
      </a-tab-pane>
      <a-tab-pane key="saml" :disabled="idps.length === 0">
        <template #tab>
          <span>
            <audit-outlined />
            {{ $t('label.login.single.signon') }}
          </span>
        </template>
        <a-form-item v-if="$config.multipleServer" name="server" ref="server">
          <a-select
            size="large"
            :placeholder="$t('server')"
            v-model:value="form.server"
            @change="onChangeServer"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }" >
            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase" :label="item.name">
              <template #prefix>
                <database-outlined />
              </template>
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="idp" ref="idp">
          <a-select
            v-model:value="form.idp"
            showSearch
            optionFilterProp="label"
            :filterOption="(input, option) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }" >
            <a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id" :label="idp.orgName">
              {{ idp.orgName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-tab-pane>
    </a-tabs>

    <a-form-item>
      <a-button
        size="large"
        type="primary"
        html-type="submit"
        class="login-button"
        :loading="state.loginBtn"
        :disabled="state.loginBtn"
        ref="submit"
        @click="handleSubmit"
      >{{ $t('label.login') }}</a-button>
    </a-form-item>
    <translation-menu/>
    <div class="content" v-if="socialLogin">
      <p class="or">or</p>
    </div>
    <div class="center">
      <div class="social-auth" v-if="githubprovider">
        <a-button
          @click="handleGithubProviderAndDomain"
          tag="a"
          color="primary"
          :href="getGitHubUrl(from)"
          class="auth-btn github-auth"
          style="height: 38px; width: 185px; padding: 0; margin-bottom: 5px;" >
          <img src="/assets/github.svg" style="width: 32px; padding: 5px" />
          <a-text>Sign in with Github</a-text>
        </a-button>
      </div>
      <div class="social-auth" v-if="googleprovider">
        <a-button
          @click="handleGoogleProviderAndDomain"
          tag="a"
          color="primary"
          :href="getGoogleUrl(from)"
          class="auth-btn google-auth"
          style="height: 38px; width: 185px; padding: 0" >
          <img src="/assets/google.svg" style="width: 32px; padding: 5px" />
          <a-text>Sign in with Google</a-text>
        </a-button>
      </div>
    </div>
  </a-form>
</template>

<script>
import { ref, reactive, toRaw } from 'vue'
import { api } from '@/api'
import store from '@/store'
import { mapActions } from 'vuex'
import { sourceToken } from '@/utils/request'
import { SERVER_MANAGER } from '@/store/mutation-types'
import TranslationMenu from '@/components/header/TranslationMenu'

export default {
  components: {
    TranslationMenu
  },
  data () {
    return {
      idps: [],
      customActiveKey: 'cs',
      customActiveKeyOauth: false,
      loginBtn: false,
      email: '',
      secretcode: '',
      oauthexclude: '',
      socialLogin: false,
      googleprovider: false,
      githubprovider: false,
      googleredirecturi: '',
      githubredirecturi: '',
      googleclientid: '',
      githubclientid: '',
      loginType: 0,
      state: {
        time: 60,
        loginBtn: false,
        loginType: 0
      },
      server: ''
    }
  },
  created () {
    if (this.$config.multipleServer) {
      this.server = this.$localStorage.get(SERVER_MANAGER) || this.$config.servers[0]
    }
    this.initForm()
    if (store.getters.logoutFlag) {
      if (store.getters.readyForShutdownPollingJob !== '' || store.getters.readyForShutdownPollingJob !== undefined) {
        clearInterval(store.getters.readyForShutdownPollingJob)
      }
      sourceToken.init()
      this.fetchData()
    } else {
      this.fetchData()
    }
  },
  methods: {
    ...mapActions(['Login', 'Logout', 'OauthLogin']),
    initForm () {
      this.formRef = ref()
      this.form = reactive({
        server: (this.server.apiHost || '') + this.server.apiBase
      })
      this.rules = reactive({})
      this.setRules()
    },
    setRules () {
      if (this.customActiveKey === 'cs' && this.customActiveKeyOauth === false) {
        this.rules.username = [
          {
            required: true,
            message: this.$t('message.error.username'),
            trigger: 'change'
          },
          {
            validator: this.handleUsernameOrEmail,
            trigger: 'change'
          }
        ]
        this.rules.password = [
          {
            required: true,
            message: this.$t('message.error.password'),
            trigger: 'change'
          }
        ]
      } else {
        this.rules.username = []
        this.rules.password = []
      }
    },
    fetchData () {
      api('listIdps').then(response => {
        if (response) {
          this.idps = response.listidpsresponse.idp || []
          this.idps.sort(function (a, b) {
            if (a.orgName < b.orgName) { return -1 }
            if (a.orgName > b.orgName) { return 1 }
            return 0
          })
          this.form.idp = this.idps[0].id || ''
        }
      })
      api('listOauthProvider', {}).then(response => {
        if (response) {
          const oauthproviders = response.listoauthproviderresponse.oauthprovider || []
          oauthproviders.forEach(item => {
            this.socialLogin = true
            if (item.provider === 'google') {
              this.googleprovider = item.enabled
              this.googleclientid = item.clientid
              this.googleredirecturi = item.redirecturi
            }
            if (item.provider === 'github') {
              this.githubprovider = item.enabled
              this.githubclientid = item.clientid
              this.githubredirecturi = item.redirecturi
            }
          })
        }
      })
    },
    // handler
    async handleUsernameOrEmail (rule, value) {
      const { state } = this
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (regex.test(value)) {
        state.loginType = 0
      } else {
        state.loginType = 1
      }
      return Promise.resolve()
    },
    handleTabClick (key) {
      this.customActiveKey = key
      this.setRules()
    },
    handleGithubProviderAndDomain () {
      this.handleDomain()
      this.$store.commit('SET_OAUTH_PROVIDER_USED_TO_LOGIN', 'github')
    },
    handleGoogleProviderAndDomain () {
      this.handleDomain()
      this.$store.commit('SET_OAUTH_PROVIDER_USED_TO_LOGIN', 'google')
    },
    handleDomain () {
      const values = toRaw(this.form)
      if (!values.domain) {
        this.$store.commit('SET_DOMAIN_USED_TO_LOGIN', '/')
      } else {
        this.$store.commit('SET_DOMAIN_USED_TO_LOGIN', values.domain)
      }
    },
    getGitHubUrl (from) {
      const rootURl = 'https://github.com/login/oauth/authorize'
      const options = {
        client_id: this.githubclientid,
        scope: 'user:email',
        state: 'cloudstack'
      }

      const qs = new URLSearchParams(options)

      return `${rootURl}?${qs.toString()}`
    },
    getGoogleUrl (from) {
      const rootUrl = 'https://accounts.google.com/o/oauth2/v2/auth'
      const options = {
        redirect_uri: this.googleredirecturi,
        client_id: this.googleclientid,
        access_type: 'offline',
        response_type: 'code',
        prompt: 'consent',
        scope: [
          'https://www.googleapis.com/auth/userinfo.profile',
          'https://www.googleapis.com/auth/userinfo.email'
        ].join(' '),
        state: from
      }

      const qs = new URLSearchParams(options)

      return `${rootUrl}?${qs.toString()}`
    },
    handleSubmit (e) {
      e.preventDefault()
      if (this.state.loginBtn) return
      this.formRef.value.validate().then(() => {
        this.state.loginBtn = true

        const values = toRaw(this.form)
        if (this.$config.multipleServer) {
          this.axios.defaults.baseURL = (this.server.apiHost || '') + this.server.apiBase
          store.dispatch('SetServer', this.server)
        }
        if (this.customActiveKey === 'cs') {
          const loginParams = { ...values }
          delete loginParams.username
          loginParams[!this.state.loginType ? 'email' : 'username'] = values.username
          loginParams.password = values.password
          loginParams.domain = values.domain
          if (!loginParams.domain) {
            loginParams.domain = '/'
          }
          this.Login(loginParams)
            .then((res) => this.loginSuccess(res))
            .catch(err => {
              this.requestFailed(err)
              this.state.loginBtn = false
            })
        } else if (this.customActiveKey === 'saml') {
          this.state.loginBtn = false
          var samlUrl = this.$config.apiBase + '?command=samlSso'
          if (values.idp) {
            samlUrl += ('&idpid=' + values.idp)
          }
          window.location.href = samlUrl
        }
      }).catch(error => {
        this.formRef.value.scrollToField(error.errorFields[0].name)
      })
    },
    handleSubmitOauth (provider) {
      this.customActiveKeyOauth = true
      this.setRules()
      this.formRef.value.validate().then(() => {
        const values = toRaw(this.form)
        const loginParams = { ...values }
        delete loginParams.username
        loginParams.email = this.email
        loginParams.provider = provider
        loginParams.secretcode = this.secretcode
        loginParams.domain = values.domain
        if (!loginParams.domain) {
          loginParams.domain = '/'
        }
        this.OauthLogin(loginParams)
          .then((res) => this.loginSuccess(res))
          .catch(err => {
            this.requestFailed(err)
            this.state.loginBtn = false
          })
      })
    },
    loginSuccess (res) {
      this.$notification.destroy()
      this.$store.commit('SET_COUNT_NOTIFY', 0)
      if (store.getters.twoFaEnabled === true && store.getters.twoFaProvider !== '' && store.getters.twoFaProvider !== undefined) {
        this.$router.push({ path: '/verify2FA' }).catch(() => {})
      } else if (store.getters.twoFaEnabled === true && (store.getters.twoFaProvider === '' || store.getters.twoFaProvider === undefined)) {
        this.$router.push({ path: '/setup2FA' }).catch(() => {})
      } else {
        this.$store.commit('SET_LOGIN_FLAG', true)
        this.$router.push({ path: '/dashboard' }).catch(() => {})
      }
    },
    requestFailed (err) {
      if (err && err.response && err.response.data && err.response.data.loginresponse) {
        const error = err.response.data.loginresponse.errorcode + ': ' + err.response.data.loginresponse.errortext
        this.$message.error(`${this.$t('label.error')} ${error}`)
      } else if (err && err.response && err.response.data && err.response.data.oauthloginresponse) {
        const error = err.response.data.oauthloginresponse.errorcode + ': ' + err.response.data.oauthloginresponse.errortext
        this.$message.error(`${this.$t('label.error')} ${error}`)
      } else {
        this.$message.error(this.$t('message.login.failed'))
      }
    },
    onChangeServer (server) {
      const servers = this.$config.servers || []
      const serverFilter = servers.filter(ser => (ser.apiHost || '') + ser.apiBase === server)
      this.server = serverFilter[0] || {}
    }
  }
}
</script>

<style lang="less" scoped>
.user-layout-login {
  min-width: 260px;
  width: 368px;
  margin: 0 auto;

  .mobile & {
    max-width: 368px;
    width: 98%;
  }

  label {
    font-size: 14px;
  }

  button.login-button {
    margin-top: 8px;
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }

    .g-btn-wrapper {
      background-color: rgb(221, 75, 57);
      height: 40px;
      width: 80px;
    }
  }
    .center {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100px;
    }

    .content {
      margin: 10px auto;
      width: 300px;
    }

    .or {
      text-align: center;
      font-size: 16px;
      background:
        linear-gradient(#CCC 0 0) left,
        linear-gradient(#CCC 0 0) right;
      background-size: 40% 1px;
      background-repeat: no-repeat;
    }
}
</style>