<template>
  <div class="register">
    <h2>Registrieren</h2>
    <form @submit.prevent="register">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="name" required>
      
      <label for="email">Email-Adresse:</label>
      <input type="email" id="email" v-model="email" required>
      
      <label for="password">Passwort:</label>
      <input type="password" id="password" v-model="password" required>
      
      <button type="submit">Registrieren</button>
    </form>
    <p>
      <router-link to="/login">Login</router-link>
    </p>
    <p>
      <router-link to="/forgot-password">Passwort vergessen?</router-link>
    </p>
  </div>
</template>

<script>

export default {
  name: 'RegisterComponent',
  components: {
  },
  data() {
    return {
      name: '',
      email: '',
      password: '',
      dialogTitle: '',
      dialogMessage: '',
      dialogVisible: false
    };
  },
  methods: {
    async register() {
      try {
        const response = await fetch('/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            name: this.name,
            email: this.email,
            password: this.password
          })
        });
        if (response.ok) {
          await response.json();
          this.showDialog('Registrierung erfolgreich', 'Ihr Konto wurde erfolgreich erstellt.');
        } else {
          const error = await response.json();
          this.showDialog('Fehler', error.message);
        }
      } catch (err) {
        this.showDialog('Ein Fehler ist aufgetreten', err.message);
      }
    },
    showDialog(title, message) {
      this.dialogTitle = title;
      this.dialogMessage = message;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
.register {
  max-width: 400px;
  margin: auto;
}
form {
  display: flex;
  flex-direction: column;
}
label {
  margin-top: 10px;
}
button {
  margin-top: 20px;
}
</style>
