<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-account-plus</v-icon>
                <v-toolbar-title>{{$t('Register.registerHeader')}}</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-container fluid>
                    <v-row>
                      <v-col cols="12">
                        <v-text-field
                          :label="$t('Register.username')"
                          prepend-icon="mdi-account-circle"
                          :rules="[rules.required]"
                          v-model="username"
                          ref="usernameTextField"
                          :hint="this.usernameAlert?`${$t('Register.usernameAlert')}`:''"
                          @keyup.enter="createAccount()"
                        />
                      </v-col>
                      <v-col cols="12">
                        <v-text-field
                          :type="!showPassword1?'password' :'text'"
                          :label="$t('Register.password')"
                          prepend-icon="mdi-lock"
                          @click:append="showPassword1 = !showPassword1"
                          :append-icon="showPassword1 ? 'mdi-eye': 'mdi-eye-off'"
                          v-model="firstPass"
                          :rules="[rules.required, rules.min]"
                          ref="firstPassTextField"
                          :hint="this.firstPassAlert?`${$t('Register.firstPassAlert')}`:''"
                          @keyup.enter="createAccount()"
                        />
                      </v-col>
                      <v-col cols="12">
                        <v-text-field
                          :type="!showPassword2?'password' :'text'"
                          :label="$t('Register.repeatPassword')"
                          prepend-icon="mdi-lock"
                          @click:append="showPassword2 = !showPassword2"
                          :append-icon="showPassword2 ? 'mdi-eye': 'mdi-eye-off'"
                          v-model="secondPass"
                          :rules="[rules.required, rules.matchPass]"
                          ref="secondPassTextField"
                          :hint="this.secondPassAlert?`${$t('Register.secondPassAlert')}`:''"
                          @keyup.enter="createAccount()"
                        />
                      </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
                  @click="createAccount()"
                  :loading="loading"
                  :disabled="loading"
                >
                  <v-icon left>mdi-login</v-icon>
                  <small>{{$t('Register.registerBtn')}}</small>
                  <template v-slot:loader>
                    <span>{{$t('Register.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";
export default {
  components: {
    "app-footer": AppFooter,
    "auth-header": AuthHeader
  },
  data() {
    return {
      snackbar: false,
      snackbarText: "",
      snackbarColor: "red",
      loading: false,
      username: null,
      usernameAlert: false,
      firstPass: null,
      firstPassAlert: false,
      secondPass: null,
      secondPassAlert: false,
      showPassword1: false,
      showPassword2: false,
      rules: {
        required: value => !!value || this.$t("Register.required"),
        min: v => {
          if (v == undefined) return true;
          return v.length >= 8 || this.$t("Register.min8Character");
        },
        matchPass: v => {
          return (
            this.firstPass === this.secondPass || this.$t("Register.matchPass")
          );
        }
      }
    };
  },
  methods: {
    createAccount() {
      const username = this.username;
      const password = this.firstPass;
      const that = this;

      if (this.username == null || this.username.length == 0) {
        this.$refs.usernameTextField.focus();
        this.usernameAlert = true;
        return;
      }

      if (this.firstPass == null || this.firstPass.length == 0) {
        this.$refs.firstPassTextField.focus();
        this.firstPassAlert = true;
        return;
      }

      if (this.secondPass == null || this.secondPass.length == 0) {
        this.$refs.secondPassTextField.focus();
        this.secondPassAlert = true;
        return;
      }

      if (this.firstPass != this.secondPass) {
        return;
      }

      if (this.firstPass == this.secondPass && this.username != null) {
        this.loading = true;

        Accounts.createUser(
          {
            username: this.username,
            password: this.firstPass
          },
          function(error, result) {
            if (error) {
              that.loading = false;
              if (error.error == 403) {
                that.snackbarColor = "red";
                that.snackbarText = that.$t("Register.error403");
                that.snackbar = true;
              }
            } else {
              that.snackbarColor = "rgb(94, 181, 177,.85)";
              that.snackbarText = that.$t("Register.userCreated");
              that.snackbar = true;

              Meteor.setTimeout(() => {
                that.loading = false;
                that.$router.push("/main/worklist");
              }, 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>