first commit
This commit is contained in:
Beyhan Oğur
204
app/components/RegisterComponent.vue
Normal file
204
app/components/RegisterComponent.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<!-- Page Title -->
|
||||
<section class="page-title bg-transparent">
|
||||
<div class="container">
|
||||
<div class="page-title-row">
|
||||
<div class="page-title-content">
|
||||
<h1>Kayıt ol</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">Kayıt</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-8 col-lg-6">
|
||||
<div class="card mb-0 p-2 border-default bg-contrast-100">
|
||||
<div class="card-body p-4">
|
||||
<h3 class="mb-4">Yeni hesap oluşturun</h3>
|
||||
<p class="text-muted small mb-4">
|
||||
Kayıt sonrası e-posta adresinize doğrulama linki gönderilecektir. Giriş yapmadan önce e-postanızı doğrulamanız gerekir.
|
||||
</p>
|
||||
|
||||
<div v-if="success" class="alert alert-success" role="alert">
|
||||
<p class="mb-0">{{ success }}</p>
|
||||
<button
|
||||
v-if="!resendSent"
|
||||
type="button"
|
||||
class="btn btn-link btn-sm p-0 mt-2"
|
||||
:disabled="resendLoading"
|
||||
@click="resendVerification"
|
||||
>
|
||||
{{ resendLoading ? 'Gönderiliyor...' : 'Doğrulama e-postasını yeniden gönder' }}
|
||||
</button>
|
||||
<span v-else class="d-block mt-2 small text-success">E-posta gönderildi.</span>
|
||||
</div>
|
||||
|
||||
<form v-if="!success" class="row g-3" @submit.prevent="onSubmit">
|
||||
<div class="col-md-6 form-group">
|
||||
<label for="reg-first_name">Ad</label>
|
||||
<input
|
||||
id="reg-first_name"
|
||||
v-model="first_name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': fieldError.first_name }"
|
||||
autocomplete="given-name"
|
||||
>
|
||||
<div v-if="fieldError.first_name" class="invalid-feedback">{{ fieldError.first_name }}</div>
|
||||
</div>
|
||||
<div class="col-md-6 form-group">
|
||||
<label for="reg-last_name">Soyad</label>
|
||||
<input
|
||||
id="reg-last_name"
|
||||
v-model="last_name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': fieldError.last_name }"
|
||||
autocomplete="family-name"
|
||||
>
|
||||
<div v-if="fieldError.last_name" class="invalid-feedback">{{ fieldError.last_name }}</div>
|
||||
</div>
|
||||
<div class="col-12 form-group">
|
||||
<label for="reg-username">Kullanıcı adı</label>
|
||||
<input
|
||||
id="reg-username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': fieldError.username }"
|
||||
autocomplete="username"
|
||||
>
|
||||
<div v-if="fieldError.username" class="invalid-feedback">{{ fieldError.username }}</div>
|
||||
</div>
|
||||
<div class="col-12 form-group">
|
||||
<label for="reg-email">E-posta</label>
|
||||
<input
|
||||
id="reg-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-md-6 form-group">
|
||||
<label for="reg-password">Şifre</label>
|
||||
<input
|
||||
id="reg-password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': fieldError.password }"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<div v-if="fieldError.password" class="invalid-feedback">{{ fieldError.password }}</div>
|
||||
</div>
|
||||
<div class="col-md-6 form-group">
|
||||
<label for="reg-password_confirm">Şifre (tekrar)</label>
|
||||
<input
|
||||
id="reg-password_confirm"
|
||||
v-model="password_confirm"
|
||||
type="password"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': fieldError.password_confirm }"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<div v-if="fieldError.password_confirm" class="invalid-feedback">{{ fieldError.password_confirm }}</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-dark w-100 m-0"
|
||||
:disabled="loading"
|
||||
>
|
||||
{{ loading ? 'Kaydediliyor...' : 'Kayıt ol' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<template v-if="!success">
|
||||
<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 kayıt ol
|
||||
</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 kayıt ol
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="mt-4 mb-0 text-center">
|
||||
Zaten hesabınız var mı?
|
||||
<NuxtLink to="/auth/login">Giriş yapın</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRegister } from '~/composables/useRegister'
|
||||
import { useTurnstileScale } from '~/composables/useTurnstileScale'
|
||||
|
||||
const turnstileWrapRef = ref<HTMLElement | null>(null)
|
||||
useTurnstileScale(turnstileWrapRef)
|
||||
|
||||
const {
|
||||
email,
|
||||
first_name,
|
||||
last_name,
|
||||
username,
|
||||
password,
|
||||
password_confirm,
|
||||
turnstileToken,
|
||||
turnstileRef,
|
||||
fieldError,
|
||||
success,
|
||||
loading,
|
||||
resendLoading,
|
||||
resendSent,
|
||||
onSubmit,
|
||||
resendVerification,
|
||||
signInWith,
|
||||
} = useRegister()
|
||||
</script>
|
||||
Reference in New Issue
Block a user