nuxtfiber/app/components/RegisterComponent.vue

<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>