69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col-6">
|
|
<div class="row">
|
|
<label>Имя пользователя: <input type="text" id="username" required /></label>
|
|
</div>
|
|
<div class="row">
|
|
<label>Пароль: <input v-on:change="check()" type="password" id="password" required /></label>
|
|
</div>
|
|
<div class="row">
|
|
<label>Пароль повторно: <input v-on:change="check()" type="password" id="confirm-password" required /></label>
|
|
</div>
|
|
<div class="row mb-3 alert alert-danger" v-if="error !== null" role="alert">
|
|
{{ error }}
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-4"></div>
|
|
<button v-on:click="register()" class="button primary col" id="enter" disabled>Регистрация</button>
|
|
<div class="col-4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
error: null
|
|
}
|
|
},
|
|
methods: {
|
|
check() {
|
|
if ($("#password").val() === $("#confirm-password").val()) {
|
|
$("#enter").removeAttr("disabled")
|
|
} else {
|
|
$("#enter").attr("disabled", "disabled")
|
|
}
|
|
},
|
|
async register() {
|
|
const response = await fetch(
|
|
"http://localhost:8080/api/1.0/customer",
|
|
{
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
"username": $("#username").val(),
|
|
"password": $("#password").val()
|
|
}),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
}
|
|
)
|
|
|
|
if (response.status !== 200) {
|
|
this.error = await response.text()
|
|
} else {
|
|
this.$router.push("login")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |