دورة ANGULAR الدرس السابع عشر


فهاد الجزء السابع عشر من دورة angular js غادي ندوزو ل connexion و déconnexion فغادي نزيدو les fonctions لي غادي يمكنوا المستخدم باش يتكونيكطا ويديكونيكطا كما غادي نشوفوا كيفاش نتحققوا بلي شي مستخدم مكونيكطي أو لا لا.


1- إضافة ملف PHP الخاص تسجيل الدخول

غادي نمشيو ل dossier php-api لي سبق وزدنا وغادي نزيدو فيه ملف جديد سميه login.php لي فيه ل code php لي كيمكن من إستقبال المعلومات لي جايين من الفورم لي فيهم ل email & mot de passe ولي بهم كيتمكن المستخدم من تسجيل الدخول ديالو.

من بعد مكنسترجع ل user كنرجعوا على شكل json فالكود ديال الملف login.php هو :

                                //
<?php
require 'connection.php';
// Get the posted data.
$data = file_get_contents("php://input");

if(isset($data) && !empty($data))
{

	$request = json_decode($data);
	$password = sha1($request->password);

    $query = "SELECT * FROM users WHERE email='$request->email' AND password='$password'";

	if($result = mysqli_query($con,$query))
	{
		$row = $result->fetch_assoc();
		$user = [
		  'email' => $row['email'],
		  'id'    => $row['id'],
		  'token' => bin2hex(random_bytes(64))
		];
		echo json_encode($user);
	}else{
		echo mysqli_error($con);
	}

}
                            

2- إضافة الكود الخاص تسجيل دخول ل USER

منبعد غادي نمشي للملف user.service.ts فيه غادي نزيد ل fonction signIn لي غادي تمكن من إستقبال ل user وإرسالو للرابط ديال ل connexion لي كيتضمن الملف php لي زدنا. 

عندي أيضا ل fonction isLoggedIn لي كتحقق واش المستخدم مكونيكطي ولي كتسترجعوا من locatstorage كيف سبق وشفنا فإضافة مستخدم جديد.

عندي أيضا ل fonction signOut لي كتديكونيكطي المستخدم وكتمسحوا من localstorage.

الكود ديال user.service.ts بعد التعديل : 

                                //
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  existingUser : User = new User();

  constructor(private httpClient: HttpClient) { }

  signUp(newUser: User): Observable<User> {
    return this.httpClient.post<User>("http://localhost/php-api/register.php",newUser);
  }

  signIn(existingUser: User): Observable<User> {
    return this.httpClient.post<User>("http://localhost/php-api/login.php",existingUser);
  }

  isLoggedIn(){
    return JSON.parse(localStorage.getItem('user')) || null;
  }

  signOut() {
    localStorage.clear();
  }
}
                            

3- إضافة الكود الخاص تسجيل دخول ل USER تتمة

غادي نمشي للملف login.component.ts كنزيد user جديد سميتو  newUser لي غادي يكون مرتبط بالحقول ديال الفورم لي غادي نزيدو من بعد.

فل ngOnInit كنتحقق واش المستخدم مكونيكطي يلا كان كنردو للصفحة الرئيسية فنفس الشي غادي تديروا ف auth.component.ts.

منبعد عندي ل fonction formIsValid لي  كتحقق بلي حتى شي حقل ما خاوي.

من بعد عندي ل fonction submitForm لي كتنفذ ل fonction signIn لي سبق وزدنا ف user.service.ts.

منبعد كندير la connexion بل user وفاش كيرجعلي كنخزنوا ف local storage كنخوي الفورم وكنوجه المستخدم للصفحة الرئيسية.

الكود ديال  login.component.ts  بعد التعديل : 

                                //
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { User } from '../user';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {


  newUser: User = new User();

  constructor(private userService: UserService,private router: Router) { }

  ngOnInit() {
    this.newUser.email = null;
    this.newUser.password = null;
    if (this.userService.isLoggedIn() !== null) {
      this.router.navigate(['/home']);
    } else {
      this.router.navigate(['/login']);
    }
  }

  formIsValid() {
    return (this.newUser.email !== null && this.newUser.password !== null)
      && (this.newUser.email.length !== 0 && this.newUser.password.length !== 0);
  }

  submitForm() {
    this.userService.signIn(this.newUser).subscribe((response) => {

      this.newUser.email = "";
      this.newUser.password = "";
      localStorage.setItem('user', JSON.stringify(response));
      this.router.navigate(['/home']);

    }), (error) => {
      console.log(error);
    }
  }
}
                            

4- إضافة فورم تسجيل الدخول

من بعد كنمشي للملف login.component.html فيه كنزيد لفورم لي غادي تمكني من تسجيل دخول مستخدم.

كنخدم ب ngModel لي كتمكني من ربط الحقول مع القيم لي ف newUser لي سبق وزدنا. 

أيضا كنزيد ل bouton disabled يعني كيتعطل يلا مكانتش الفورم عامرة ولي كنتحقق منها بل fonction formIsValid لي سبق وزدنا.

منبعد فاش كنضغط على الزر valider كتنفذ ل fonction submitForm لي كتاخد القيم وكتدير la connexion.

الكود ديال login.component.html  بعد التعديل :

                                    //
<div class="row mt-4">
  <div class="col-md-6 mx-auto">
    <div class="card">
      <div class="card-body">
        <h3 class="card-title">Connexion</h3>
        <form method="post">
          <div class="form-group"><input required class="form-control" type="email" placeholder="E-mail" name="email"
              id="email" [(ngModel)]="newUser.email"></div>
          <div class="form-group"><input required class="form-control" type="password" placeholder="Mot de passe"
              name="password" id="password" [(ngModel)]="newUser.password"></div>
          <div class="form-group"><button class="form-control" class="btn btn-primary" [disabled]="!formIsValid()"
              type="submit" (click)="submitForm()">valider</button></div>
        </form>
      </div>
    </div>
  </div>
</div>