---
title: Kayıt Ol
description: Müşterilerin hesap oluşturmasını sağlayan register component'i ve RegisterForm kullanımı.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Temalarda, müşterilerin hesap oluşturabilmesi için bir register component'i bulunmalıdır.

Kaynak kodun tamamına [buradan](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/register) ulaşabilirsiniz. Register component'imiz şu şekilde görünüyor:

![Örnek temadaki kayıt sayfası](https://builders.ikas.com/media/ikas-dev/example-theme-register-6ce76c0bf014e383ba16ad871f89f8c9.png)

## RegisterForm

Kayıt mantığı, temamızdaki [useRegister](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/register/useRegister.tsx) custom hook'unda yer alır. Hook, ilk olarak `RegisterForm` class'ından bir instance oluşturup bunu state değişkeni olarak tutar.

```tsx
...
 const [form] = useState(
    new RegisterForm({
      message: {
        requiredRule: t(`${NS}:formMessage.requiredRule`),
        emailRule: t(`${NS}:formMessage.emailRule`),
        minRule: t(`${NS}:formMessage.minRule`),
      },
    })
  );
...
```

`RegisterForm` class'ı, kayıt süreci için gereken tüm state'i ve doğrulama kurallarını içerir. Constructor'ına üç hata mesajı verilmesi gerekir: `requiredRule`, `emailRule` ve `minRule`. Bir form alanında doğrulama hatası oluştuğunda bu mesajlar size geri döner.

- `requiredRule`: Alanın doldurulması gerektiğini belirten mesajdır.
- `emailRule`: Geçerli bir e-posta adresi girilmesi gerektiğini belirten mesajdır.
- `minRule`: Şifrenin en az 6 karakter olması gerektiğini belirten mesajdır.

Tüm hesap sayfalarında doğrulamayı yapan, state'i tutan ve API çağrılarını sizin yerinize gerçekleştiren bir **Form** class'ı bulunur. Bu form class'larının hepsi aynı şekilde kullanılır.

### Değerleri atama [#setting-values]

Her form elemanında, hem input değerini atamak hem de doğrulama sonuçlarını göstermek için `RegisterForm` üzerindeki field'ları kullanıyoruz.

```tsx
<FormItem label={t(`${NS}:form.firstName`)} help={form.firstNameErrorMessage} status={status.firstName}>
  <Input
    status={status.firstName}
    value={form.firstName}
    onChange={(event) => form.onFirstNameChange(event.target.value)}
  />
</FormItem>
```

Görüldüğü gibi input'un `value` değeri formun `firstName` field'ına, `onChange` event'i ise formun `onFirstNameChange` callback fonksiyonuna bağlanmıştır.

`RegisterForm` class'ındaki tüm field'lar ve değerlerini atamak için kullanılan fonksiyonlar şunlardır:

- `firstName` field'ı için `onFirstNameChange`
- `lastName` field'ı için `onLastNameChange`
- `email` field'ı için `onEmailChange`
- `password` field'ı için `onPasswordChange`
- `isMarketingAccepted` field'ı doğrudan atanabilir. Bu field, müşteriden e-posta pazarlaması için onay almak amacıyla kullanılabilir.

### Form doğrulama [#form-validation]

Bu field'ların doğrulaması, formun `register` fonksiyonunu çağırdığınızda tetiklenir. Fonksiyon doğrulama hatalarını kontrol eder ve ilgili form field'larına uygun hata mesajlarını atar. Örneğin `firstName` field'ı boşsa, `form.firstNameErrorMessage` değerine daha önce verdiğiniz `requiredRule` metni atanır. Bu hata mesajlarını kullanarak hatayı müşteriye gösterebilirsiniz. Doğrulama hata mesajlarını tutan field'lar şunlardır:

- `firstName` field'ı için `firstNameErrorMessage`
- `lastName` field'ı için `lastNameErrorMessage`
- `email` field'ı için `emailErrorMessage`
- `password` field'ı için `passwordErrorMessage`

<Callout type="info" title="E-posta kontrolü">
`RegisterForm` yalnızca temel doğrulamaları yapar. Girilen e-posta adresinin başka bir hesapta kullanılıp kullanılmadığını kontrol etmek için `store.customerStore.checkEmail` fonksiyonunu kendiniz çağırmanız gerekir.
</Callout>

Tüm form alanları geçerliyse `register` fonksiyonu kayıt işlemini tamamlamak için gerekli API'yi çağırır. İşlem başarılı olursa müşteri otomatik olarak giriş yapmış olur ve onu temanızdaki istediğiniz sayfaya yönlendirebilirsiniz.

### Captcha

ikas satıcıları, Google captcha'yı panellerindeki mağaza ödeme ve diğer ayarlar sayfasından etkinleştirebilir:

`Panel Menüsü > Satış Kanalları > Storefront > Ödeme Ayarları`

Temamızdaki captcha mantığı [GoogleCaptcha](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/components/google-captcha/index.tsx) alt component'inde yer alır. Bu component önce `store.customerStore.isCaptchaRequired` field'ını kontrol ederek satıcının captcha'yı etkinleştirip etkinleştirmediğine bakar. Etkinse `@ikas/storefront` paketinden import edilen `GoogleCaptcha` component'ini render eder.

Component ayrıca Google'ın gizlilik politikası metnini ve bağlantılarını da render eder. Temanızın tasarımı farklı olabileceğinden bu metin ve bağlantılar için hazır bir component sunmuyoruz; ancak bunları component'inize eklemeniz zorunludur.

Render etmeniz gereken metin ve bağlantılar şunlardır:

**This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.**

Captcha için yapmanız gereken tek şey, `GoogleCaptcha` component'ini ve bu gizlilik metni ile bağlantılarını render etmektir. Captcha'yı kullanabileceğiniz tüm özellikler şunlardır:

- Giriş
- Kayıt
- Şifremi unuttum
- Şifre yenileme
- İletişim formu
- Müşteri e-posta kontrolü

### Kayıt sonrası yönlendirme [#navigating-after-register]

Başarılı bir kaydın ardından müşteriyi temanızdaki bir sayfaya yönlendirmeniz gerekir. Ancak önce `RegisterForm` üzerindeki `redirect` field'ını kontrol ederek belirli bir URL'ye yönlendirme yapılıp yapılmayacağına bakmalısınız. Müşteri kayıt sayfasına `redirect` query parametresiyle (`/register?redirect=some-url`) gelirse bu field dolu olur. Field doluysa müşteriyi bu değere, değilse temanızdaki bir sayfaya yönlendirin. Temamızda bu işlem şu şekilde yapılıyor:

```tsx
setTimeout(() => {
  if (form.redirect) {
    router.push(decodeURIComponent(form.redirect));
  } else {
    router.push('/account');
  }
}, 1000);
```

Bu query parametresinin temel kullanım alanı checkout sayfasıdır. Checkout, müşteriyi işlemini tamamlamadan önce hesap oluşturması ya da giriş yapması için login/register sayfalarına yönlendirir. Başarılı bir giriş ya da kayıttan sonra müşterinin checkout'a geri dönmesi gerekir. Müşteriyi bu `redirect` field'ını kullanarak geri yönlendirmek tema geliştiricisinin sorumluluğundadır.