121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<v-img
|
|
class="mx-auto my-6"
|
|
max-width="228"
|
|
src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"
|
|
></v-img>
|
|
|
|
<v-card
|
|
class="mx-auto pa-12 pb-8"
|
|
elevation="8"
|
|
max-width="448"
|
|
rounded="lg"
|
|
>
|
|
|
|
<v-text-field
|
|
v-model="user_name"
|
|
density="compact"
|
|
placeholder="User Name"
|
|
prepend-inner-icon="mdi-account-key-outline"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="name"
|
|
density="compact"
|
|
placeholder="User Name"
|
|
prepend-inner-icon="mdi-account-circle-outline"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="email"
|
|
density="compact"
|
|
placeholder="Email address"
|
|
prepend-inner-icon="mdi-email-outline"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="password"
|
|
density="compact"
|
|
placeholder="Enter your password"
|
|
prepend-inner-icon="mdi-lock-outline"
|
|
variant="outlined"
|
|
:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
|
|
:type="visible ? 'text' : 'password'"
|
|
@click:append-inner="visible = !visible"
|
|
></v-text-field>
|
|
|
|
|
|
<!-- <v-text-field-->
|
|
<!-- v-model:value="password"-->
|
|
<!-- :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"-->
|
|
<!-- :type="visible ? 'text' : 'password'"-->
|
|
<!-- density="compact"-->
|
|
<!-- placeholder="Enter your password"-->
|
|
<!-- prepend-inner-icon="mdi-lock-outline"-->
|
|
<!-- variant="outlined"-->
|
|
<!-- @click:append-inner="visible = !visible"-->
|
|
<!-- ></v-text-field>-->
|
|
|
|
<v-card
|
|
class="mb-6"
|
|
color="surface-variant"
|
|
variant="tonal"
|
|
>
|
|
</v-card>
|
|
|
|
<v-btn
|
|
class="mb-8"
|
|
color="blue"
|
|
size="large"
|
|
variant="tonal"
|
|
block
|
|
@click="register"
|
|
>
|
|
Register
|
|
</v-btn>
|
|
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import {fetch} from "ofetch";
|
|
import {useRouter} from "#vue-router";
|
|
|
|
const router=useRouter();
|
|
const visible = ref(false);
|
|
const user_name = ref('');
|
|
const name = ref('');
|
|
const email = ref('');
|
|
const password = ref('');
|
|
|
|
const register = async () => {
|
|
console.log(user_name.value);
|
|
console.log(name.value);
|
|
console.log(email.value);
|
|
console.log(password.value);
|
|
const response=await fetch('http://127.0.0.1:8000/api/register', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
"name": name.value,
|
|
"user_name": user_name.value,
|
|
"email": email.value,
|
|
// "password": "123"
|
|
"password": password.value
|
|
})
|
|
});
|
|
console.log(response.status)
|
|
if (response.status != 200) {
|
|
console.log('gagal');
|
|
}else{
|
|
await router.push('/login');
|
|
|
|
}
|
|
}
|
|
</script> |