Register.vue

<template>
  <v-container>
    <v-dialog width="500" :value="opened" persistent>
      <v-card>
        <v-card-title>Registrieren</v-card-title>
        <v-card-text>
          <v-form ref="form">
            <v-text-field
              label="Accountname"
              v-model="accountname"
              :rules="accountnameRules"
              autofocus
            ></v-text-field>
            <v-text-field
              label="Passwort"
              v-model="password"
              type="password"
              :rules="passwordRules"
            ></v-text-field>
            <v-text-field
              label="Passwort wiederholen"
              v-model="passwordconfirm"
              type="password"
              :rules="[passwordconfirmRule]"
            ></v-text-field>
            <v-text-field
              label="Nickname"
              v-model="nickname"
              :rules="nicknameRules"
              @keyup.enter="register()"
            ></v-text-field>
            <v-text-field
              label="E-Mail (optional)"
              v-model="email"
              :rules="emailRules"
              @keyup.enter="register()"
            ></v-text-field>
            <v-textarea
              label="Status (optional)"
              outlined
              v-model="status"
            ></v-textarea>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn outlined @click="abort()">Abbrechen</v-btn>
          <v-btn outlined @click="register()">Registrieren</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-snackbar
      v-model="snackbar.opened"
      :timeout="snackbar.timeout"
      :color="snackbarColor"
      >{{ snackbar.text }}</v-snackbar
    >
  </v-container>
</template>

<script>
import client from "../../services/Client";

export default {
  /* eslint-disable no-debugger, no-console */
  name: "Register",
  data: () => ({
    opened: false,
    accountname: "",
    accountnameRules: [
      v => !!v || "Accountname benötigt",
      v => (!!v && /^[0-9a-zA-Z_-]+$/.test(v)) || "Dateiname ungültig"
    ],
    password: "",
    passwordRules: [v => !!v || "Passwort benötigt"],
    passwordconfirm: "",
    nickname: "",
    nicknameRules: [
      v => !!v || "Nickname benötigt",
      v => (!!v && /^[0-9a-zA-Z_- ]+$/.test(v)) || "Dateiname ungültig"
    ],
    email: "",
    emailRules: [
      v => !v || /.+@.+/.test(v) || "Eingabe ist keine gültige E-Mail Adresse"
    ],
    status: "",
    snackbar: {
      opened: false,
      timeout: 3000,
      success: false,
      text: ""
    }
  }),
  computed: {
    snackbarColor: function() {
      return this.snackbar.success ? "success" : "error";
    }
  },
  methods: {
    showDialog() {
      this.opened = true;
    },
    passwordconfirmRule: function(v) {
      return v === this.password || "Passwort stimmt nicht überein";
    },
    abort: function() {
      this.$refs.form.reset();
      this.opened = false;
    },
    register: function() {
      if (this.$refs.form.validate()) {
        let payload = new FormData();
        payload.append("accountname", this.accountname);
        payload.append("password", this.password);
        payload.append("nickname", this.nickname);
        payload.append("email", this.email);
        payload.append("status", this.status);
        client.post(client.URLs.register, payload).then(result => {
          this.snackbar.success = result.success;
          this.snackbar.text = result.message;
          this.snackbar.opened = true;
          if (result.success) {
            this.abort();
          }
        });
      }
    }
  }
};
</script>