first commit

app/components/LoginComponent.vue

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