DBLabs/abitur_list_client/src/components/Auth.vue

<template lang="">
    <div class='text-center mx-auto'>
      <form onsubmit="return false">
        <p class='h3 m-3'>Авторизация</p>
        <p class='h6 m-3'> Имя:</p>
        <input v-model='firstName' id="firstNameTF" required>
        <p class='h6 m-3'> Фамилия:</p>
        <input v-model='lastName' id="lastNameTF" required>
        <p class='h6 m-3'> Отчество:</p>
        <input v-model='middleName' id="middleNameTF">
        <p class='h6 m-3'> Эл. почта:</p>
        <input v-model='email' id="emailTF" required>
        <p class='h6 m-3'> Пароль:</p>
        <input v-model='password' id="passwordTF" required>

        <p class="h6 m-3">{{message}}</p>
    
        <p class='mt-5'>
          <button v-on:click="enterButtonClick" type='button' class='btn btn-primary'>Войти</button>
        </p>
        <p>
          <button v-on:click="registerButtonClick" type='submit' class='btn btn-success'>Регистрация</button>
        </p>
        <p>
          <button v-on:click="testButtonClick" type='button' class='btn btn-light'>Войти как тестировщик</button>
        </p>
      </form>
        
      </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      firstName: '',
      lastName: '',
      middleName: '',
      email: '',
      password: '',
      abiturId: -1,
      message: ''
    }
  },
  methods: {
    enterButtonClick() {
      this.$router.push(
        {
            name: "Enter"
        }
      );
    },

    testButtonClick(){
      this.$router.push(
        {
            name: "Test"
        }
      );
    },

    registerButtonClick() {
      let data = JSON.stringify({
        "first_name": this.firstName,
        "last_name": this.lastName,
        "middle_name": this.middleName,
        "email": this.email,
        "password": this.password
      });

      let config = {
        method: 'post',
        maxBodyLength: Infinity,
        url: 'http://127.0.0.1:8080/api/abitur',
        headers: { 
          'Content-Type': 'application/json'
        },
        data : data
      };

      axios.request(config)
      .then((response) => {
        this.abiturId =response.data['id']
        console.log(this.abiturId)
        if (this.abiturId>0) {
          this.message = 'Успешная регистрация'
          this.$router.push(
          {
              name: "Enter"
          }
      );
        }
        else this.message = 'Ошибка при регистрации'
      })

      if (this.message == "") this.message = 'Ошибка при регистрации'
    }


  }
}
</script>
<style lang="">
    
</style>