131 lines
4.5 KiB
Vue
131 lines
4.5 KiB
Vue
<template>
|
||
<!-- Page Title -->
|
||
<section class="page-title bg-transparent">
|
||
<div class="container">
|
||
<div class="page-title-row">
|
||
<div class="page-title-content">
|
||
<h1>Giriş</h1>
|
||
</div>
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><NuxtLink to="/">Ana Sayfa</NuxtLink></li>
|
||
<li class="breadcrumb-item active" aria-current="page">Giriş</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="content">
|
||
<div class="content-wrap">
|
||
<div class="container">
|
||
<div class="row g-5 justify-content-center">
|
||
<div class="col-md-6 col-lg-5">
|
||
<div class="card mb-0 p-2 border-default bg-contrast-100">
|
||
<div class="card-body p-4">
|
||
<h3 class="mb-4">Hesabınıza giriş yapın</h3>
|
||
|
||
<form class="row mb-0" @submit.prevent="onSubmit">
|
||
<div class="col-12 form-group">
|
||
<label for="login-email">E-posta</label>
|
||
<input
|
||
id="login-email"
|
||
v-model="email"
|
||
type="email"
|
||
class="form-control"
|
||
:class="{ 'is-invalid': fieldError.email }"
|
||
autocomplete="email"
|
||
placeholder="ornek@email.com"
|
||
>
|
||
<div v-if="fieldError.email" class="invalid-feedback">{{ fieldError.email }}</div>
|
||
</div>
|
||
<div class="col-12 form-group">
|
||
<label for="login-password">Şifre</label>
|
||
<input
|
||
id="login-password"
|
||
v-model="password"
|
||
type="password"
|
||
class="form-control"
|
||
:class="{ 'is-invalid': fieldError.password }"
|
||
autocomplete="current-password"
|
||
>
|
||
<div v-if="fieldError.password" class="invalid-feedback">{{ fieldError.password }}</div>
|
||
</div>
|
||
<div class="col-12 form-group">
|
||
<div ref="turnstileWrapRef" class="turnstile-form-widget">
|
||
<NuxtTurnstile
|
||
ref="turnstileRef"
|
||
v-model="turnstileToken"
|
||
:options="{ theme: 'light' }"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 form-group">
|
||
<button
|
||
type="submit"
|
||
class="btn btn-secondary w-100 m-0"
|
||
:disabled="loading"
|
||
>
|
||
{{ loading ? 'Giriş yapılıyor...' : 'Giriş yap' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="divider divider-center my-4">
|
||
<span>veya</span>
|
||
</div>
|
||
|
||
<div class="d-flex flex-column gap-2">
|
||
<button
|
||
type="button"
|
||
class="btn btn-outline-secondary"
|
||
:disabled="loading"
|
||
@click="signInWith('github')"
|
||
>
|
||
<Icon name="mdi:github" class="me-2" size="1.25em" />
|
||
GitHub ile giriş yap
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="btn btn-outline-secondary"
|
||
:disabled="loading"
|
||
@click="signInWith('google')"
|
||
>
|
||
<Icon name="mdi:google" class="me-2" size="1.25em" />
|
||
Google ile giriş yap
|
||
</button>
|
||
</div>
|
||
|
||
<p class="mt-4 mb-0 text-center">
|
||
Hesabınız yok mu?
|
||
<NuxtLink to="/auth/register">Kayıt olun</NuxtLink>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue'
|
||
import { useLogin } from '~/composables/useLogin'
|
||
import { useTurnstileScale } from '~/composables/useTurnstileScale'
|
||
|
||
const turnstileWrapRef = ref<HTMLElement | null>(null)
|
||
useTurnstileScale(turnstileWrapRef)
|
||
|
||
const {
|
||
email,
|
||
password,
|
||
turnstileToken,
|
||
turnstileRef,
|
||
fieldError,
|
||
loading,
|
||
onSubmit,
|
||
signInWith,
|
||
} = useLogin()
|
||
</script>
|