src/app/External-Page/external-hospital/external-hospital.component.html

@@ -81,11 +81,3 @@
   </div>
 
  
-
-<!-- <div class="container">
-        <owl-carousel-o [options]="customOptions">
-            <ng-template carouselSlide>Slide 1</ng-template>  
-            <ng-template carouselSlide>Slide 2</ng-template>  
-            <ng-template carouselSlide>Slide 3</ng-template>  
-        </owl-carousel-o>
-</div> -->

src/app/auth-services/auth-services-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { AuthServicesComponent } from './auth-services.component';
 import { LoginComponent } from './login/login.component';
 import { RegesterComponent } from './regester/regester.component';
+import { ForgetPasswordComponent } from './forget-password/forget-password.component';
 
 
 
@@ -12,6 +13,7 @@ const routes: Routes = [
       {path: '', redirectTo: 'login', pathMatch: 'full'},
       {path: 'login', component: LoginComponent},
       {path: 'register', component: RegesterComponent},
+      {path: 'forgetPassword' ,component:ForgetPasswordComponent},
       {path: 'profile/:idProfile', component:RegesterComponent},
       {path: '**', redirectTo: 'login', pathMatch: 'full'},
     ]},

src/app/auth-services/auth-services.module.ts

@@ -23,6 +23,7 @@ import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
 import { CarouselModule } from 'ngx-owl-carousel-o';
 import { SharedModule } from '../shared/shared.module';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { ForgetPasswordComponent } from './forget-password/forget-password.component';
 
 
 
@@ -50,6 +51,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
         AuthServicesComponent,
         LoginComponent,
         RegesterComponent,
+        ForgetPasswordComponent,
   ],
   providers: [],
 })

src/app/auth-services/forget-password/forget-password.component.css

@@ -0,0 +1,139 @@
+.login-dashBoard {
+    width: 100%;
+    display: inline-block;
+    margin-top: -6px;
+    justify-content: center;
+    /* background-color: #ebeff5; */
+    /* ./../assets/image/background_login.jpg */
+    background: url('../../../assets/image/background_login.jpg') no-repeat top center;
+    background-size: cover;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+
+.formContent-w {
+    width: 90%;
+    height: 100%;
+    margin: 30px auto;
+    padding: 80px 0;
+    border: 1px solid #ccc;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.formContent-w h2 {
+    text-align: center;
+    color: #bda380;
+    font-size: 30px;
+}
+.btn-success{
+	    color: #fff;
+    background-color: #73542e;
+    border-color: #9b7648;
+}
+.btn-success:hover{
+	    color: #fff;
+    background-color: #866338;
+    border-color: #9b7648;
+}
+
+.btn-success.focus, .btn-success:focus{
+	    box-shadow: 0 0 0 0.2rem rgba(167, 93, 40, 0.5);
+}
+.form-control:focus{
+	color: #ffffff !important;
+    background-color: #654721 !important;
+    border-color: #c3a279 !important;
+    outline: none ;
+}
+.formContent-w p {
+    text-align: center;
+    color: #888;
+    font-weight: bold;
+}
+.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle{
+		    color: #fff;
+    background-color: #866338;
+    border-color: #9b7648;
+	
+}
+.formContent-w form {
+    width: 600px;
+    padding: 20px;
+    margin: 0 auto;
+    direction: rtl;
+}
+
+.formContent-w form label{
+    color: #b3b3b3;
+    font-weight: 600;
+    margin-right: 5px;
+    float: right;
+    font-size: 18px;
+}
+
+.formContent-w form span {
+    margin-bottom: 10px;
+}
+
+.formContent-w form input {
+    background-color: #fff;
+    border: 2px solid #dadfe6;
+    color: #252525;
+    font-size: 14px;
+}
+
+.formContent-w form a {
+    float: right;
+    color: #775327;
+    font-weight: bold;
+    letter-spacing: 0.5px;
+    margin-top: 5px;
+    border: 1px solid #c1bfbf;
+    padding: 2px 17px;
+    background-color: #eaeaea;
+    font-size: 13px;
+}
+
+.formContent-w form button {
+    margin: 20px 0;
+}
+
+.formContent-w .help-block {
+    color: #ff386a;
+    margin: 5px 0;
+    font-weight: 600;
+}
+
+.formContent-w input.ng-touched.ng-invalid{
+    border: 2px solid #ff386a;
+} 
+.ql-container {
+    min-height: 100px !important;
+}
+
+/* start media query */
+@media(max-width: 767px) {
+    .formContent-w form {
+        width: 100%
+    } 
+
+    .signUp-w {
+        margin-left: 0;
+        font-size: 12px;
+    }
+    .forgetPassword-w {
+        margin-right: 0;
+        font-size: 12px;
+    }
+}
+
+/* end media query  */
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}

src/app/auth-services/forget-password/forget-password.component.html

@@ -0,0 +1,40 @@
+<div class="login-dashBoard" [style.min-height.px]="screenHeight">
+  <div class="container">
+    <div class="formContent-w">
+      <h2>أسترجاع كلمة المرور</h2>
+      <p>تأكيد الهوية</p>
+        <div class="container">
+          <div class="row">
+            <div class="col-12">
+              <form (ngSubmit)="onSubmitedForm('sendEmail')" #f="ngForm" *ngIf="sendEmail" >
+                <div class="form-group">
+                  <input type="text" id="identity" class="form-control" placeholder="أدخل رقم الهوية او البريد الألكتروني" name="identity" ngModel required />
+                </div>
+                <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid || saveDisabled">أرسال</button>
+              </form>
+              <form (ngSubmit)="onSubmitedForm('checkCode')" #f="ngForm" *ngIf="checkCode" >
+                <div class="form-group">
+                  <input type="number" id="verify_code" class="form-control" placeholder="ادخل الرمز"  maxlength="6" name="verify_code" ngModel required />
+                </div>
+                <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid || saveDisabled">أرسال</button>
+              </form>
+              <form (ngSubmit)="onSubmitedForm('changePass')" #f="ngForm" *ngIf="changePass" >
+                <div class="form-group">
+                    <label for="password"> كلمه المرور الجديدة</label>
+                  <input type="password" id="password" class="form-control"  name="password" minlength="6" ngModel required />
+                </div>
+                <div class="form-group">
+                    <label for="password">  تأكيد كلمه المرور</label>
+                  <input type="password" id="password_confirmation" class="form-control"  name="password_confirmation" minlength="6" ngModel required />
+                  <span class="help-block" *ngIf="notequal" style="color:red;font-size:12px"> من فضلك , تأكد من تطابق كلمة المرور </span>
+                </div>
+                <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid || saveDisabled">أرسال</button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</div>
+
+

src/app/auth-services/forget-password/forget-password.component.ts

@@ -0,0 +1,119 @@
+import { Component, OnInit, ViewChild, HostListener } from "@angular/core";
+import { AuthServiceService } from "src/app/shared/auth-service.service";
+import { Router, ActivatedRoute } from "@angular/router";
+
+import { Location } from '@angular/common';
+import { NgxSpinnerService } from "ngx-spinner";
+import { ToastrService } from "ngx-toastr";
+import { NgForm } from "@angular/forms";
+import { Response } from '@angular/http';
+import { HttpClient } from "@angular/common/http";
+
+@Component({
+  selector: 'app-forget-password',
+  templateUrl: './forget-password.component.html',
+  styleUrls: ['./forget-password.component.css']
+})
+export class ForgetPasswordComponent implements OnInit {
+
+  constructor(
+    public authSer: AuthServiceService, 
+    private router: Router, 
+    private route: ActivatedRoute, 
+    private location: Location,
+    private spinner: NgxSpinnerService,
+    private toastr: ToastrService,
+    private http : HttpClient
+  ) { }
+
+  @ViewChild('f') forgetDataForm: NgForm;
+
+  screenHeight:any;
+  saveDisabled: boolean = false;
+  sendEmail : boolean = true;
+  checkCode: boolean = false;
+  changePass: boolean = false;
+  notequal: boolean = false;
+  identy : string ;
+  @HostListener('window:resize', ['$event'])
+  getScreenSize(event?) {
+        this.screenHeight = window.innerHeight;
+        console.log(this.screenHeight);
+  }
+
+  ngOnInit() {
+
+      // this.authSer.showSearchHeader = false;
+      this.authSer.notificationLogin = false;
+      // this.authSer.showHeaderLogin = true;
+      this.authSer.showHeaderDashBoard = false;
+      this.authSer.showDashboardHeader = true;
+      this.authSer.arabicTemplate = true;
+      this.spinner.hide();
+
+  }
+  onSubmitedForm(status){
+    if (status == 'sendEmail') {
+      console.log(this.forgetDataForm.value);
+
+      this.http.post(this.authSer.pathApi + '/send/email' , this.forgetDataForm.value).subscribe(
+        res=> {
+          this.sendEmail = false;
+          this.checkCode = true;
+          this.identy=this.forgetDataForm.value.identity;
+          console.log(res);
+          
+        },
+        err =>{
+          if (err.error.status == 'wrong identity') {
+            this.toastr.warning('رقم الهوية او البريد الألكتروني الذي ادخلته غير موجود على النظام');
+          }else{
+            this.toastr.error('خطأ في السرفير')
+          }
+         
+          
+        }
+      );
+     
+    }else if (status == 'checkCode') {
+      this.forgetDataForm.value.identity = this.identy;
+
+      this.http.post(this.authSer.pathApi + '/check-code' , this.forgetDataForm.value).subscribe(
+        res=>{
+          console.log(this.forgetDataForm.value);
+          this.checkCode = false;
+          this.changePass = true;
+        },
+        err =>{
+          this.toastr.warning('الرمز الذي أدخلته غير صحيح')
+        }
+      );
+     
+
+    }else if (status == 'changePass') {
+      const newPass = this.forgetDataForm.value.password;
+      const confirmPass = this.forgetDataForm.value.password_confirmation;
+      if (newPass != confirmPass){
+        this.notequal = true;
+        return 0;
+        
+      }
+      this.forgetDataForm.value.identity = this.identy;
+      this.http.post(this.authSer.pathApi + '/reset-password' , this.forgetDataForm.value).subscribe(
+        res=>{
+          this.toastr.success('تم تغير كلمة المرور بنجاح')
+          this.router.navigate(['auth/login']);
+
+        },
+        err=>{
+          console.log(err);
+          
+        }
+      );
+     
+    }
+ 
+
+  }
+
+}

src/app/auth-services/login/login.component.html

@@ -19,7 +19,7 @@
                   </div>
                   <div class="form-group">
                     <a (click)="registerFun()" class="signUp-w" style="float: left; margin-left:10px; cursor: pointer">إنشاء حساب جديد</a>
-                    <a routerLink="/page-not-found" class="forgetPassword-w" style="margin-right: 10px">نسيت كلمه المرور ؟</a>
+                    <a  (click)="forgetPassword()" class="forgetPassword-w" style="margin-right: 10px ; cursor: pointer;" >نسيت كلمه المرور ؟</a>
                   </div>
                   <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid || saveDisabled">الدخول</button>
                 </form>

src/app/auth-services/login/login.component.ts

@@ -54,7 +54,9 @@ export class LoginComponent implements OnInit {
   registerFun() {
     this.router.navigate(['../register'], {relativeTo: this.route});
   }
-
+  forgetPassword(){
+    this.router.navigate(['../forgetPassword'], {relativeTo: this.route});
+  }
   //login function from services
   onSubmitedForm(){
     console.log(this.loginFormData.value);
@@ -83,5 +85,6 @@ export class LoginComponent implements OnInit {
   }
 
 
+
   //pattern="^[1-9]+[0-9]*$"   => (number only)
 }