<!--
  Program: Change Password Popup
  Author: SDL
  Brief: Password Change Popup
-->
<template>
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content" style="height:450px;">
      <div class="modal-header">
        <h5 class="modal-title">{{ $t('sdl.identity.label.pwdChange') }}</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body">
        <form @submit.prevent>
        <table class="table table-bordered ui--table-form ui--table-form-view">
          <colgroup>
            <col style="width:30%" />
            <col style="width:70%" />
          </colgroup>
          <tbody>
            <tr>
              <th class="text-nowrap" scope="row">ID</th>
              <td><input type="text" class="form-control" readonly v-model="userInfo.loginId" /></td>
            </tr>
            <tr v-if="!this.isPasswordNull">
              <th class="text-nowrap" scope="row">
                {{ $t('sdl.identity.label.oldPwd') }}<span class="ui--text-required">*</span>
              </th>
              <td><input type="password" class="form-control" v-model="userInfo.oldPwd" v-validation="{ groupId: 'changePassword'}" errorMessage="sdl.identity.message.emptyOldPasswd" />
              </td>
            </tr>
            <tr>
              <th class="text-nowrap" scope="row">
                {{ $t('sdl.identity.label.newPwd') }}<span class="ui--text-required">*</span>
              </th>
              <td>
                <input type="password" class="form-control" v-model="userInfo.pwd" v-validation="{groupId: 'changePassword'}" errorMessage="sdl.identity.message.emptyPasswd" /></td>
            </tr>
            <tr>
              <th class="text-nowrap" scope="row">
                {{ $t('sdl.identity.label.confirmPwd') }}<span class="ui--text-required">*</span>
              </th>
              <td><input type="password" class="form-control" v-model="userInfo.pwd2" v-validation="{groupId: 'changePassword'}" errorMessage="sdl.identity.message.emptyConfirmPasswd" /></td>
            </tr>
          </tbody>
        </table>
        {{ $t('sdl.identity.label.policy') }}
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.cancel') }}
        </button>
        <button type="button" class="btn btn-primary" @click="confirm()">{{ $t('sdl.identity.label.change') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import SDLUtil from '@/utils/SDLUtil';

export default {
  props: {},
  data() {
    return {
      userInfo: {},
      isPasswordNull: false,
    };
  },
  methods: {
    confirm() {
      // validation
      if (SDLUtil.onSubmitValidation()) return;

      if (this.userInfo.pwd !== this.userInfo.pwd2) {
        SDLUtil.alert('sdl.identity.message.invalidPassword.notMatch');
        return;
      }

      SDLUtil.showLoadingBar(true);

      const formData = new FormData();
      formData.append('id', this.userInfo.loginId);
      formData.append('password1', this.userInfo.pwd);

      // 비밀번호 체크
      axios
        .post(`${SDLUtil.API_URL}/auth/noauth/passwd/rule-check`, formData)
        .then(() => {
          this.passwordChange();
        })
        .catch(err => {
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(err);
        });
    },
    passwordChange() {
      const params = {
        ...this.userInfo,
      };

      axios
        .put(`${SDLUtil.API_URL}/auth/user/passwd`, params)
        .then(() => {
          SDLUtil.showLoadingBar(false);

          SDLUtil.alert({
            msg: 'sdl.identity.message.passwdChangeSuccess',
            onOkEvt: () => {
              this.$emit('close');
            },
          });
        })
        .catch(err => {
          console.error(err);
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(err);
        });
    },
  },
  created() {
    this.userInfo.loginId = SDLUtil.getLoginedUserInfo().knoxId;
    axios
      .get(`${SDLUtil.API_URL}/auth/user/password/init-check`)
      .then(({ data }) => {
        this.isPasswordNull = data;
      });
  },
};
</script>
