<template>
  <v-app id="inspire">
    <auth-header btnToProp="signin" btnLabel="Register.loginBtn" btnIconName="mdi-login"></auth-header>
    <v-content>
      <v-container
        style="background-color:rgb(94, 181, 177,.85)"
        fluid
        class="align-center fill-height backgroundImg"
      >
        <v-row justify="center" class="loginCard">
          <v-col xs="8" sm="6" md="4" lg="3">
            <v-card class="elevation-12 roundedCard" light elevation="24">
              <v-toolbar color="rgb(94, 181, 177,.85)" dark>
                <v-icon class="ma-3">mdi-lock-reset</v-icon>
                <v-toolbar-title>{{$t('ChangePassword.formHeader')}}</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-container fluid class="flex-wrap">
                    <v-row>
                      <v-col cols="12">
                        <v-text-field
                          :label="$t('ChangePassword.username')"
                          prepend-icon="mdi-account-circle"
                          :rules="[rules.required]"
                          v-model="username"
                          ref="usernameTextField"
                          persistent-hint
                          :hint="this.usernameAlert?`${$t('ChangePassword.usernameAlert')}`:''"
                          @keyup.enter="changePassword()"
                        />
                      </v-col>

                      <v-col cols="12">
                        <v-text-field
                          :type="!showPassword1?'password' :'text'"
                          :label="$t('ChangePassword.oldPassword')"
                          prepend-icon="mdi-lock"
                          @click:append="showPassword1 = !showPassword1"
                          :append-icon="showPassword1 ? 'mdi-eye': 'mdi-eye-off'"
                          v-model="oldPass"
                          :rules="[rules.required, rules.min]"
                          ref="oldPassTextField"
                          persistent-hint
                          :hint="this.oldPassAlert?`${$t('ChangePassword.oldPasswordAlert')}`:''"
                          @keyup.enter="changePassword()"
                        />
                      </v-col>

                      <v-col cols="12">
                        <v-text-field
                          :type="!showPassword2?'password' :'text'"
                          :label="$t('ChangePassword.newPassword')"
                          prepend-icon="mdi-lock"
                          @click:append="showPassword2 = !showPassword2"
                          :append-icon="showPassword2 ? 'mdi-eye': 'mdi-eye-off'"
                          v-model="newPass"
                          :rules="[rules.required, rules.matchPass]"
                          ref="newPassTextField"
                          persistent-hint
                          :hint="this.newPassAlert?`${$t('ChangePassword.newPasswordAlert')}`:''"
                          @keyup.enter="changePassword()"
                        />
                      </v-col>
                    </v-row>
                  </v-container>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                  style="width:100%"
                  class="white--text"
                  color="rgb(94, 181, 177,.85)"
                  rounded
                  :loading="loading"
                  :disabled="loading"
                  @click="changePassword()"
                >
                  <v-icon left>mdi-lock-question</v-icon>
                  <small>{{$t('ChangePassword.changePasswordBtn')}}</small>
                  <template v-slot:loader>
                    <span>{{$t('ChangePassword.loadingText')}}</span>
                  </template>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
        <ul class="bubble-boxes">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="2000">{{ snackbarText }}</v-snackbar>
      </v-container>
    </v-content>
    <app-footer></app-footer>
  </v-app>
</template>


<script>
import AppFooter from "../components/AppFooter.vue";
import AuthHeader from "../components/AuthHeader.vue";
import { Accounts } from "meteor/accounts-base";
import { Meteor } from "meteor/meteor";
export default {
  components: {
    "app-footer": AppFooter,
    "auth-header": AuthHeader
  },
  data() {
    return {
      snackbar: false,
      snackbarText: "",
      snackbarColor: "red",
      loading: false,
      username: null,
      usernameAlert: false,
      oldPass: null,
      oldPassAlert: false,
      newPass: null,
      newPassAlert: false,
      showPassword1: false,
      showPassword2: false,
      rules: {
        required: value => !!value || this.$t("ChangePassword.required"),
        min: v => {
          if (v == undefined) return true;
          return v.length >= 8 || this.$t("ChangePassword.min8Character");
        },
        matchPass: v => {
          return (
            this.oldPass !== this.newPass || this.$t("ChangePassword.matchPass")
          );
        }
      }
    };
  },
  methods: {
    changePassword() {
      const that = this;
      if (this.username == null || this.username.length == 0) {
        this.$refs.usernameTextField.focus();
        this.usernameAlert = true;
        return;
      }

      if (this.oldPass == null || this.oldPass.length == 0) {
        this.$refs.oldPassTextField.focus();
        this.oldPassAlert = true;
        return;
      }

      if (this.newPass == null || this.newPass.length == 0) {
        this.$refs.newPassTextField.focus();
        this.newPassAlert = true;
        return;
      }

      if (this.oldPass == this.newPass) {
        return;
      }

      this.loading = true;
      Meteor.call(
        "changePass",
        this.username,
        this.oldPass,
        this.newPass,
        function(error, result) {
          if (error) {
            that.loading = false;
            if (error.error == "NotFoundUser") {
              that.snackbarColor = "red";
              that.snackbarText = that.$t("ChangePassword.NotFoundUser");
              that.snackbar = true;
              return;
            }

            if (error.error == "CheckPassError") {
              that.snackbarColor = "red";
              that.snackbarText = that.$t("ChangePassword.CheckPassError");
              that.snackbar = true;
              return;
            }

            that.snackbarColor = "red";
            that.snackbarText = that.$t("ChangePassword.internalServerError");
            that.snackbar = true;

            return;
          }

          Meteor.setTimeout(() => {
            that.loading = false;
            that.snackbarColor = "rgb(94, 181, 177,.85)";
            that.snackbarText = that.$t("ChangePassword.SuccessChangePass");
            that.snackbar = true;
          }, 1000);
        }
      );
    }
  }
};
</script>

<style scoped>
.backgroundImg {
  background-color: #abdae4ad;
  background-image: linear-gradient(
    141deg,
    #9fb8ad 0%,
    #1fc8db 51%,
    #2ce8ceb0 75%
  );
}

img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  opacity: 0.6;
  filter: grayscale(0.5) blur(2px);
  z-index: 0;
}

.loginCard {
  z-index: 1;
}

.backgroundImg {
  overflow-y: hidden;
}

.roundedCard {
  border-radius: 20px;
}

/* loader */

@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>