first commit
This commit is contained in:
Beyhan Oğur
248
app/components/AppFooter.vue
Normal file
248
app/components/AppFooter.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<footer id="footer" class="dark">
|
||||
<div class="container">
|
||||
|
||||
<!-- Footer Widgets
|
||||
============================================= -->
|
||||
<div class="footer-widgets-wrap">
|
||||
|
||||
<div class="row col-mb-50">
|
||||
<div class="col-lg-8">
|
||||
|
||||
<div class="row col-mb-50">
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="widget">
|
||||
|
||||
<img src="/images/footer-widget-logo.png" alt="Image" class="footer-logo">
|
||||
|
||||
<p>We believe in <strong>Simple</strong>, <strong>Creative</strong> & <strong>Flexible</strong> Design Standards.</p>
|
||||
|
||||
<div style="background: url('/images/world-map.png') no-repeat center center; background-size: 100%;">
|
||||
<address>
|
||||
<strong>Headquarters:</strong><br>
|
||||
795 Folsom Ave, Suite 600<br>
|
||||
San Francisco, CA 94107<br>
|
||||
</address>
|
||||
<abbr title="Phone Number"><strong>Phone:</strong></abbr> (1) 8547 632521<br>
|
||||
<abbr title="Fax"><strong>Fax:</strong></abbr> (1) 11 4752 1433<br>
|
||||
<abbr title="Email Address"><strong>Email:</strong></abbr> info@canvas.com
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="widget widget_links">
|
||||
|
||||
<h4>Blogroll</h4>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://codex.wordpress.org/">Documentation</a></li>
|
||||
<li><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
|
||||
<li><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
|
||||
<li><a href="https://wordpress.org/support/">Support Forums</a></li>
|
||||
<li><a href="https://wordpress.org/extend/themes/">Themes</a></li>
|
||||
<li><a href="https://wordpress.org/news/">Canvas Blog</a></li>
|
||||
<li><a href="https://planet.wordpress.org/">Canvas Planet</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="widget">
|
||||
<h4>Recent Posts</h4>
|
||||
|
||||
<div id="post-list-footer" class="posts-sm row col-mb-30">
|
||||
<div class="entry col-12">
|
||||
<div class="grid-inner row">
|
||||
<div class="col">
|
||||
<div class="entry-title">
|
||||
<h4><a href="#">Lorem ipsum dolor sit amet, consectetur</a></h4>
|
||||
</div>
|
||||
<div class="entry-meta">
|
||||
<ul>
|
||||
<li>10th July 2021</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry col-12">
|
||||
<div class="grid-inner row">
|
||||
<div class="col">
|
||||
<div class="entry-title">
|
||||
<h4><a href="#">Elit Assumenda vel amet dolorum quasi</a></h4>
|
||||
</div>
|
||||
<div class="entry-meta">
|
||||
<ul>
|
||||
<li>10th July 2021</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry col-12">
|
||||
<div class="grid-inner row">
|
||||
<div class="col">
|
||||
<div class="entry-title">
|
||||
<h4><a href="#">Debitis nihil placeat, illum est nisi</a></h4>
|
||||
</div>
|
||||
<div class="entry-meta">
|
||||
<ul>
|
||||
<li>10th July 2021</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
|
||||
<div class="row col-mb-50">
|
||||
<div class="col-md-4 col-lg-12">
|
||||
<div class="widget">
|
||||
|
||||
<div class="row col-mb-30">
|
||||
<div class="col-lg-6">
|
||||
<div class="counter counter-small"><span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="3000" data-comma="true"/></div>
|
||||
<h5 class="mb-0">Total Downloads</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="counter counter-small"><span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="2000" data-comma="true"/></div>
|
||||
<h5 class="mb-0">Clients</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5 col-lg-12">
|
||||
<div class="widget subscribe-widget">
|
||||
<h5><strong>Subscribe</strong> to Our Newsletter to get Important News, Amazing Offers & Inside Scoops:</h5>
|
||||
<div class="widget-subscribe-form-result"/>
|
||||
<form id="widget-subscribe-form" action="include/subscribe.php" method="post" class="mb-0">
|
||||
<div class="input-group mx-auto">
|
||||
<div class="input-group-text"><i class="bi-envelope-plus"/></div>
|
||||
<input id="widget-subscribe-form-email" type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Enter your Email">
|
||||
<button class="btn btn-success" type="submit">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-lg-12">
|
||||
<div class="widget">
|
||||
|
||||
<div class="row col-mb-30">
|
||||
<div class="col-6 col-md-12 col-lg-6 d-flex align-items-center">
|
||||
<a href="#" class="social-icon text-white border-transparent bg-facebook me-2 mb-0 float-none">
|
||||
<i class="fa-brands fa-facebook-f"/>
|
||||
<i class="fa-brands fa-facebook-f"/>
|
||||
</a>
|
||||
<a href="#" class="ms-1"><small class="d-block"><strong>Like Us</strong><br>on Facebook</small></a>
|
||||
</div>
|
||||
<div class="col-6 col-md-12 col-lg-6 d-flex align-items-center">
|
||||
<a href="#" class="social-icon text-white border-transparent bg-rss me-2 mb-0 float-none">
|
||||
<i class="fa-solid fa-rss"/>
|
||||
<i class="fa-solid fa-rss"/>
|
||||
</a>
|
||||
<a href="#" class="ms-1"><small class="d-block"><strong>Subscribe</strong><br>to RSS Feeds</small></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- .footer-widgets-wrap end -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Copyrights
|
||||
============================================= -->
|
||||
<div id="copyrights">
|
||||
<div class="container">
|
||||
|
||||
<div class="row col-mb-30">
|
||||
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
Copyrights © 2023 All Rights Reserved by Canvas Inc.<br>
|
||||
<div class="copyright-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a></div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<div class="d-flex justify-content-center justify-content-md-end mb-2">
|
||||
<a href="#" class="social-icon border-transparent si-small h-bg-facebook">
|
||||
<i class="fa-brands fa-facebook-f"/>
|
||||
<i class="fa-brands fa-facebook-f"/>
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-icon border-transparent si-small h-bg-x-twitter">
|
||||
<i class="fa-brands fa-x-twitter"/>
|
||||
<i class="fa-brands fa-x-twitter"/>
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-icon border-transparent si-small h-bg-google">
|
||||
<i class="fa-brands fa-google"/>
|
||||
<i class="fa-brands fa-google"/>
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-icon border-transparent si-small h-bg-pinterest">
|
||||
<i class="fa-brands fa-pinterest-p"/>
|
||||
<i class="fa-brands fa-pinterest-p"/>
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-icon border-transparent si-small h-bg-vimeo">
|
||||
<i class="fa-brands fa-vimeo-v"/>
|
||||
<i class="fa-brands fa-vimeo-v"/>
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-icon border-transparent si-small h-bg-github">
|
||||
<i class="fa-brands fa-github"/>
|
||||
<i class="fa-brands fa-github"/>
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-icon border-transparent si-small h-bg-yahoo">
|
||||
<i class="fa-brands fa-yahoo"/>
|
||||
<i class="fa-brands fa-yahoo"/>
|
||||
</a>
|
||||
|
||||
<a href="#" class="social-icon border-transparent si-small me-0 h-bg-linkedin">
|
||||
<i class="fa-brands fa-linkedin"/>
|
||||
<i class="fa-brands fa-linkedin"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<i class="bi-envelope"/> info@canvas.com <span class="middot">·</span> <i class="fa-solid fa-phone"/> +1-11-6541-6369 <span class="middot">·</span> <i class="bi-skype"/> CanvasOnSkype
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- #copyrights end -->
|
||||
</footer><!-- #footer end -->
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
80
app/components/AppHeader.vue
Normal file
80
app/components/AppHeader.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<header id="header" class="full-header">
|
||||
<div id="header-wrap">
|
||||
<div class="container">
|
||||
<div class="header-row top-search-parent">
|
||||
|
||||
<!-- Logo -->
|
||||
<div id="logo">
|
||||
<a href="/">
|
||||
<img class="logo-default" srcset="/images/logo.png, /images/logo@2x.png 2x" src="/images/logo@2x.png" alt="Canvas Logo">
|
||||
<img class="logo-dark" srcset="/images/logo-dark.png, /images/logo-dark@2x.png 2x" src="/images/logo-dark@2x.png" alt="Canvas Logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="header-misc">
|
||||
<div id="top-search" class="header-misc-icon">
|
||||
<a id="top-search-trigger" href="#"><i class="uil uil-search"/><i class="bi-x-lg"/></a>
|
||||
</div>
|
||||
<div id="top-cart" class="header-misc-icon d-none d-sm-block">
|
||||
<a id="top-cart-trigger" href="#"><i class="uil uil-shopping-bag"/><span class="top-cart-number">5</span></a>
|
||||
<div class="top-cart-content">
|
||||
<div class="top-cart-title">
|
||||
<h4>Shopping Cart</h4>
|
||||
</div>
|
||||
<div class="top-cart-items">
|
||||
<div class="top-cart-item">
|
||||
<div class="top-cart-item-image">
|
||||
<a href="#"><img src="/images/shop/small/1.jpg" alt="Blue Round-Neck Tshirt"></a>
|
||||
</div>
|
||||
<div class="top-cart-item-desc">
|
||||
<div class="top-cart-item-desc-title">
|
||||
<a href="#">Blue Round-Neck Tshirt with a Button</a>
|
||||
<span class="top-cart-item-price d-block">$19.99</span>
|
||||
</div>
|
||||
<div class="top-cart-item-quantity">x 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cart-item">
|
||||
<div class="top-cart-item-image">
|
||||
<a href="#"><img src="/images/shop/small/6.jpg" alt="Light Blue Denim Dress"></a>
|
||||
</div>
|
||||
<div class="top-cart-item-desc">
|
||||
<div class="top-cart-item-desc-title">
|
||||
<a href="#">Light Blue Denim Dress</a>
|
||||
<span class="top-cart-item-price d-block">$24.99</span>
|
||||
</div>
|
||||
<div class="top-cart-item-quantity">x 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-cart-action">
|
||||
<span class="top-checkout-price">$114.95</span>
|
||||
<a href="#" class="button button-3d button-small m-0">View Cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="primary-menu-trigger">
|
||||
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
|
||||
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"/></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Primary Navigation -->
|
||||
<AppPrimaryMenu />
|
||||
|
||||
<form class="top-search-form" action="search.html" method="get">
|
||||
<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.." autocomplete="off">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-wrap-clone" />
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
1598
app/components/AppPrimaryMenu.vue
Normal file
1598
app/components/AppPrimaryMenu.vue
Normal file
File diff suppressed because it is too large
Load Diff
6
app/components/GotoTop.vue
Normal file
6
app/components/GotoTop.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div id="gotoTop" class="uil uil-angle-up" aria-hidden="true" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
130
app/components/LoginComponent.vue
Normal file
130
app/components/LoginComponent.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<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>
|
||||
105
app/components/PageTitle.vue
Normal file
105
app/components/PageTitle.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<!-- Arka plan resmi tam genişlikte section uzerine uygulanir -->
|
||||
<section class="page-title" :style="props.image && imageType === 'background'
|
||||
? { backgroundImage: `url(${props.image})`, backgroundSize: 'cover', backgroundPosition: 'center' }
|
||||
: undefined" :class="{ 'has-bg-image': props.image && imageType === 'background' }">
|
||||
<div class="container">
|
||||
<div class="page-title-row">
|
||||
<!-- Inline resim secenegi -->
|
||||
<img v-if="props.image && imageType === 'inline'" :src="props.image" alt="page image"
|
||||
class="page-title-image" />
|
||||
|
||||
<div class="page-title-content">
|
||||
<h1 :style="props.color ? { color: props.color } : undefined">{{ props.title }}</h1>
|
||||
<span v-if="props.subtitle" :style="props.color ? { color: props.color } : undefined">{{ props.subtitle
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<nav v-if="props.breadcrumbs?.length" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li v-for="(item, i) in props.breadcrumbs" :key="i" class="breadcrumb-item"
|
||||
:class="{ active: i === props.breadcrumbs.length - 1 }"
|
||||
:aria-current="i === props.breadcrumbs.length - 1 ? 'page' : undefined">
|
||||
<a v-if="i < props.breadcrumbs.length - 1" :href="item.href">{{ item.label }}</a>
|
||||
<template v-else>{{ item.label }}</template>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Breadcrumb {
|
||||
label: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
// Provide defaults for props that are not required
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
subtitle?: string
|
||||
breadcrumbs?: Breadcrumb[]
|
||||
// Banner'dan gelen renk (#ff2600 gibi hex deger)
|
||||
color?: string
|
||||
// Arka plan resim URL'si
|
||||
image?: string
|
||||
// Resmin kullanim sekli: background veya inline
|
||||
imageType?: 'background' | 'inline'
|
||||
}>()
|
||||
|
||||
// computed ile reaktif imageType — prop async güncellendiğinde de doğru çalışır
|
||||
const imageType = computed(() => props.imageType ?? 'background')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Tam genislik arka plan - container disinda */
|
||||
.page-title {
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.page-title.has-bg-image {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-title .container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 40px 20px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.page-title-image {
|
||||
max-width: 140px;
|
||||
max-height: 140px;
|
||||
object-fit: cover;
|
||||
margin-right: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.page-title-content h1 {
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-title-row {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.page-title-image {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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