Login Sayfası

    Merhabalar
    Bugün hep birlikte ,yaptığımız uygulama için bir 'Login' (giriş) sayfası oluşturalım istiyorum. Çoğu mobil uygulamada olduğu gibi bir uygulamanın giriş sayfasının olması Kullanıcı tarafından bakıldığında , üyelerin o uygulamayı daha çok benimsemesini ; Uygulama aracılığıyla kullanıcılara hizmet sunan birimler için de daha çok güvenliği sağlıyor gibi geliyor bana.

  Bir login sayfasında neler olduğunu düşünecek olursak : e-mail ile giriş imkanı sağlayan uygulamalar için *e-mail alanı ya da telefon ya da kullanıcı adıyla giriş sağlayanlar için de ilgili text'i girebileceğimiz bir alan  ve kullanıcının daha önceden belirlediği sisteme giriş için gerekli olan *şifre. Ayrıca giriş yapmak için girdiğimiz bilgileri doğrulamak üzere bilgileri uygulamanın ilgili kontrol birimine gönderen  * button bileşenimiz bulunuyor.

   Arayüzü basit olmasına karşın gayet önemli bir sayfadır.

  Tasarımı hakkında konuşacak olursak : 

    → Kullanıcının e-mail adresiyle giriş yapmasını istiyoruz diyelim.Bunun için bir text component'ını tanımlamalıyız.
    → Şifre ile giriş için password component'ını tanımlamalıyız.
    → Submit tipinde bir buton tanımlamalıyız.

    ★Text-Field tanımlama
     Text-field' ın özelliklerinden olan 'placeholder' özelliği ile kullanıcılara ilgili alana ne tür bilgi girmesi gerektiğiyle ilgili bilgilendirme yapabiliriz.  <ion-item> tagları içerisinde bir <ion-input> tagı eklememiz gerekiyor.

<ion-input placeholder="Email" name="username" id="loginField"
                       type="text" required [(ngModel)]="username" #email></ion-input>

    placeholder özelliği ile kullanıcıya buraya e-mail adresi girmesi gerektiğini bildiriyoruz.(TExt alanında herhangi bir şey yapmadığımızda yazacak olan yazı).
    required ile bu alanın mutlaka doldurulması gerektiğini bildiriyoruz.
 
     ★Password alanı tanımlama
       Password tanımlarken , şifre alanına yazdığımız veriler görünmemesi için text-field tanımlamadan farklı olarak 'type' özelliğini 'password' a eşitliyoruz.

 <ion-input placeholder="Password" name="password" id="passwordField"
                       type="password" required [(ngModel)]="password"></ion-input>
          </ion-item>

    ★Login butonu tanımlama
    Üstteki alanları doldurduktan sonra butonun aktive edilmesini sağlamak istiyorsak  yapmamız gereken ilk şey inputlara required özelliği tanımlamak ve daha sonrasında butona disabled özelliğini tanımlamak.Disabled özelliğini de aşağıdaki  gibi tanımlayabiliriz.

  [disabled]="!loginForm.form.valid"

Burada 'id' si loginForm olan form eğer geçerli değilse disabled yap demek istiyor.

Tüm içerikleri topladığımızda aşağıdaki gibi bir kodlama meydana gelmiş oluyor.

<ion-header>
  
    <ion-title>
      Login
    </ion-title>

</ion-header>
<ion-content padding>
  <form #loginForm="ngForm" (ngSubmit)="login()" autocomplete="off">
    <ion-row>
      <ion-col>
        <ion-list inset>
          <ion-item>
            <ion-input placeholder="Email" name="username" id="loginField"
                       type="text" required [(ngModel)]="username"#email></ion-input>
          </ion-item>
          <ion-item>
            <ion-input placeholder="Password" name="password" id="passwordField"
                       type="password" required [(ngModel)]="password"></ion-input>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div *ngIf="error" class="alert alert-danger">{{error}}<div>
        <ion-button class="submit-btn" full type="submit"
                [disabled]="!loginForm.form.valid">Login
        </ion-button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

 Bu kodları alıp çalıştırdığınızda karşınıza çıkacak olan ekran şöyle olacaktır.

    Android'de (sağdaki resimde)  girilmesi gereken hiçbir içeriği girmedim bunun sonucunda buton disabled yani basılmıcak bir durumda. iOs emülatöründe ise gerekli olan alanları doldurduktan sonra buton kullanılabilir hale gelmiş oldu.
 
   Bu hafta basit bir login sayfası tasarladık. Gelecek hafta görüşmek üzere .



Yararlandığım Kaynaklar:
 https://scotch.io/tutorials/build-an-ionic-app-with-user-authentication