first commit
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
halaman utama
|
||||
</div>
|
||||
<div>
|
||||
<!-- <p>{{ message }}</p>-->
|
||||
<p>{{ token }}</p><br>
|
||||
<p>{{ user }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {defineComponent,ref} from 'vue';
|
||||
import {useCookie} from "#app";
|
||||
import {useAuthentication} from "~/store/login";
|
||||
import {storeToRefs} from "pinia";
|
||||
const {userAuth} = useAuthentication()
|
||||
const {user} = storeToRefs(useAuthentication())
|
||||
|
||||
const token = ref('')
|
||||
token.value = useCookie('token');
|
||||
// token.value = user;
|
||||
const param = {
|
||||
'token': useCookie('token'),
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
// await userAuth(useCookie('token'))
|
||||
userAuth(param)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<!-- <div class="page">-->
|
||||
<!-- well play-->
|
||||
<!-- </div>-->
|
||||
<!-- <Login />-->
|
||||
|
||||
</template>
|
||||
|
||||
sdaasd
|
||||
<script setup lang="ts">
|
||||
// import Login from "~/components/login.vue";
|
||||
|
||||
</script>
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
<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"
|
||||
>
|
||||
<!-- <div class="text-subtitle-1 text-medium-emphasis">Account</div>-->
|
||||
|
||||
<v-text-field
|
||||
density="compact"
|
||||
placeholder="Email address"
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
|
||||
<!-- <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">-->
|
||||
<!-- Password-->
|
||||
|
||||
<!-- <a-->
|
||||
<!-- class="text-caption text-decoration-none text-blue"-->
|
||||
<!-- href="#"-->
|
||||
<!-- rel="noopener noreferrer"-->
|
||||
<!-- target="_blank"-->
|
||||
<!-- >-->
|
||||
<!-- Forgot login password?</a>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<v-text-field
|
||||
: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-text class="text-medium-emphasis text-caption">-->
|
||||
<!-- Warning: After 3 consecutive failed login attempts, you account will be temporarily locked for three hours. If you must login now, you can also click "Forgot login password?" below to reset the login password.-->
|
||||
<!-- </v-card-text>-->
|
||||
</v-card>
|
||||
|
||||
<v-btn
|
||||
class="mb-8"
|
||||
color="blue"
|
||||
size="large"
|
||||
variant="tonal"
|
||||
block
|
||||
@click="login"
|
||||
>
|
||||
Log In
|
||||
</v-btn>
|
||||
<p>{{token}}</p>
|
||||
<p>{{ resAuth.data }}</p>
|
||||
|
||||
|
||||
<!-- <v-card-text class="text-center">-->
|
||||
<!-- <a-->
|
||||
<!-- class="text-blue text-decoration-none"-->
|
||||
<!-- href="#"-->
|
||||
<!-- rel="noopener noreferrer"-->
|
||||
<!-- target="_blank"-->
|
||||
<!-- >-->
|
||||
<!-- Sign up now <v-icon icon="mdi-chevron-right"></v-icon>-->
|
||||
<!-- </a>-->
|
||||
<!-- </v-card-text>-->
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue';
|
||||
import {fetch} from "ofetch";
|
||||
import {useRouter} from "#vue-router";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useCookie} from "#app";
|
||||
import {useAuthentication} from "~/store/login";
|
||||
|
||||
const {auth} = useAuthentication()
|
||||
const {resAuth} = storeToRefs(useAuthentication())
|
||||
const visible = ref(false);
|
||||
const router = useRouter()
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const token = ref('')
|
||||
const body = {
|
||||
'email': 'dgrimes@gmail.com',
|
||||
'password': '123',
|
||||
}
|
||||
|
||||
|
||||
const login = async () => {
|
||||
try {
|
||||
await auth(body);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
token.value = useCookie('token');
|
||||
navigateTo({
|
||||
path: '/homePage',
|
||||
// query: {
|
||||
// token: useCookie('token')
|
||||
// }
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,121 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user