Add a slider of the product images

client/.firebaserc

@@ -1,5 +1,5 @@
 {
   "projects": {
-    "default": "mytindy-c5b58"
+    "default": "mytindy-f548e"
   }
 }

client/src/app/components/collections/collections.component.html

@@ -26,6 +26,7 @@
       </app-custom-checkbox>
     </ion-col>
   </ion-row>
+
   <app-speech-recognizer></app-speech-recognizer>
 
   <div class="error-message-container" *ngIf="!collectionsForm.valid">

client/src/app/components/components.module.ts

@@ -16,6 +16,7 @@ import { ProductDetailsComponent } from './product-details/product-details.compo
 import { SpeechRecognizerComponent } from './speech-recognizer/speech-recognizer.component';
 import { EditModalComponent } from './edit-modal/edit-modal.component';
 import { PasscodeSetupComponent } from './passcode-setup/passcode-setup.component';
+import { ProductSliderComponent } from './product-slider/product-slider.component';
 
 const components = [
   SocialLoginComponent,
@@ -30,6 +31,7 @@ const components = [
   SpeechRecognizerComponent,
   EditModalComponent,
   PasscodeSetupComponent,
+  ProductSliderComponent,
 ];
 const modules = [
   CommonModule,

client/src/app/components/phone/phone.component.scss

@@ -8,16 +8,16 @@
   border-radius: 3px;
   margin-left: 1px;
 }
-ion-label{
-  color:black;
+ion-label {
+  color: black;
 }
-ion-input{
-  color:black;
+ion-input {
+  color: black;
 }
-ion-row{
+ion-row {
   margin-bottom: 30px;
   border-bottom: 1px solid black;
 }
-ion-select{
-  color:black;
+ion-select {
+  color: black;
 }

client/src/app/components/product-slider/product-slider.component.html

@@ -0,0 +1,9 @@
+<ion-item>
+  <ion-slides [options]="slideOpts" class="ion-margin-top">
+    <ion-slide *ngFor="let image of imagesURL">
+      <ion-card>
+        <img [src]="image" />
+      </ion-card>
+    </ion-slide>
+  </ion-slides>
+</ion-item>

client/src/app/components/product-slider/product-slider.component.scss

@@ -0,0 +1,28 @@
+ion-card {
+  width: 70vw;
+  height: 20vh;
+  box-shadow: burlywood;
+  border-radius: 10px;
+
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    transform: scale(0.8, 0.8) rotate(2deg);
+    transition: 600ms all ease-in-out;
+  }
+}
+
+.swiper-slide-active {
+  transform: scale(1, 1) rotate(0deg);
+
+  ion-card {
+    img {
+      transform: scale(1, 1);
+    }
+  }
+}
+
+.swiper-slide {
+  transition: 400ms all ease-in-out;
+}

client/src/app/components/product-slider/product-slider.component.ts

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-product-slider',
+  templateUrl: './product-slider.component.html',
+  styleUrls: ['./product-slider.component.scss'],
+})
+export class ProductSliderComponent implements OnInit {
+  @Input() imagesURL: string[] = [];
+
+  slideOpts = {
+    freeMode: true,
+    centeredSlides: true,
+    slidesPerView: 1.5,
+    slidesOffsetBefore: 11,
+    spaceBetween: 10,
+    loop: true,
+    speed: 100,
+    autoplay: true,
+  };
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onSlideTransitionStart(images) {
+    images.startAutoplay();
+  }
+}

client/src/app/components/uploader/uploader.component.ts

@@ -5,7 +5,6 @@ import {
 } from '@angular/fire/compat/storage';
 import { Observable } from 'rxjs';
 import { finalize, tap } from 'rxjs/operators';
-import { UsersService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-uploader',
@@ -33,8 +32,6 @@ export class UploaderComponent implements OnInit {
     this.task = this.storage.upload(path, this.file);
     this.percentage = this.task.percentageChanges();
 
-
-
     this.snapshot = this.task.snapshotChanges().pipe(
       tap(console.log),
       finalize(async () => {
@@ -46,6 +43,7 @@ export class UploaderComponent implements OnInit {
               console.log('"""File not found"""');
             }
           });
+
         this.imageURL.emit(this.downloadURL);
       })
     );

client/src/app/guards/auth.guard.ts

@@ -3,7 +3,6 @@ import { AngularFireAuth } from '@angular/fire/compat/auth';
 import {
   ActivatedRouteSnapshot,
   CanActivate,
-  Router,
   RouterStateSnapshot,
 } from '@angular/router';
 import { ToastService } from '../services/toast.service';
@@ -24,7 +23,9 @@ export class AuthGuard implements CanActivate {
     const user = await this.authService.currentUser;
     const isLoggedIn = !!user; //convert it into boolean
 
-    if (!isLoggedIn) this.toastService.authError();
+    if (!isLoggedIn) {
+      this.toastService.authError();
+    }
     return isLoggedIn;
   }
 }

client/src/app/pages/add-product/add-product.page.html

@@ -16,7 +16,12 @@
 
 <ion-content>
   <form (ngSubmit)="onSubmit()">
-    <ion-slides pager="true" #addProductSlider virtual="true">
+    <ion-slides
+      pager="true"
+      #addProductSlider
+      virtual="true"
+      class="parent-slider"
+    >
       <ion-slide>
         <h2>Choose your product images</h2>
         <div
@@ -55,14 +60,14 @@ <h3>Uploads</h3>
         </div>
       </ion-slide>
       <ion-slide>
-        <h2>Choose your product type</h2>
+        <h2>Choose your product Category</h2>
         <app-collections
           [list]="collections"
           (itemsChange)="updateCollections($event)"
         ></app-collections>
       </ion-slide>
       <ion-slide>
-        <h2>Choose your product tags</h2>
+        <h2>Choose Your Product Tags</h2>
         <app-collections
           [list]="tags"
           (itemsChange)="updateTags($event)"
@@ -75,6 +80,7 @@ <h2>Choose your product tags</h2>
       </ion-slide>
       <ion-slide>
         <ion-list>
+          <app-product-slider [imagesURL]="imagesURL"></app-product-slider>
           <ion-item>
             <h5>Name</h5>
             <ion-label slot="end"
@@ -116,7 +122,6 @@ <h5>Quantity</h5>
             >
           </ion-item>
         </ion-list>
-
         <ion-button type="submit">Confirm</ion-button>
       </ion-slide>
     </ion-slides>

client/src/app/pages/add-product/add-product.page.scss

@@ -63,35 +63,37 @@ img {
   width: 100%;
 }
 
-.swiper-slide {
-  display: block;
-  flex-direction: column;
-  font-size: medium;
-  align-items: center;
-  justify-content: start;
-  margin-top: 5%;
-  padding: 0 5%;
-  overflow: scroll;
-  display: block;
-  h2 {
-    align-self: start;
-    margin: 2% 0 2% 5%;
-  }
-  .swiper-pagination {
-    padding-top: 2rem;
-    position: absolute;
-    bottom: 2rem;
-  }
-
-  .input-wrapper {
-    background-color: #f16624;
-    display: flex;
+.parent-slider {
+  .swiper-slide {
+    display: block;
     flex-direction: column;
-    flex: 1 1 0%;
-    align-items: self-start;
-    align-self: stretch;
-    text-overflow: ellipsis;
-    overflow: inherit;
-    box-sizing: border-box;
+    font-size: medium;
+    align-items: center;
+    justify-content: start;
+    margin-top: 5%;
+    padding: 0 5%;
+    overflow: scroll;
+    display: block;
+    h2 {
+      align-self: start;
+      margin: 2% 0 2% 5%;
+    }
+    .swiper-pagination {
+      padding-top: 2rem;
+      position: absolute;
+      bottom: 2rem;
+    }
+
+    .input-wrapper {
+      background-color: #f16624;
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+      align-items: self-start;
+      align-self: stretch;
+      text-overflow: ellipsis;
+      overflow: inherit;
+      box-sizing: border-box;
+    }
   }
 }

client/src/app/pages/add-product/add-product.page.ts

@@ -20,7 +20,7 @@ export class AddProductPage {
 
   isHovering: boolean;
   files: File[] = [];
-  imagesURL = [];
+  imagesURL: string[] = [];
   collections = COLLECTIONS_LIST;
   tags = TAGS_LIST;
   productInfo = {

client/src/app/pages/confirm-pin/confirm-pin.page.html

@@ -16,13 +16,6 @@ <h5 class="ion-no-margin ion-margin-vertical">
 
         <ion-button type="submit">confirm</ion-button>
       </form>
-
-      <ion-text class="ion-padding">
-        <h5 class="ion-no-margin ion-margin-vertical">
-          Havent received it? <br />
-          Resend it again.
-        </h5>
-      </ion-text>
     </div>
   </ion-row>
   <div class="mandela-bottom-left">

client/src/app/pages/login/login.page.html

@@ -16,9 +16,7 @@ <h1>Register</h1>
 
     <div *ngIf="isLogin" class="statues">
       <h1>Log in</h1>
-      <ion-button
-        (click)="changeFormType('Register')"
-        [routerLink]="['/register']"
+      <ion-button (click)="changeFormType('Register')" [routerLink]="['/login']"
         >not registered yet?</ion-button
       >
     </div>
@@ -30,7 +28,7 @@ <h1>Log in</h1>
       </ion-item>
 
       <div class="validation-errors">
-        <ng-container *ngFor="let validation of validation_messages.fullName">
+        <ng-container *ngFor="let validation of validationMessages.fullName">
           <div
             class="error-message"
             *ngIf="isSubmitted &&loginForm.get('fullName').hasError(validation.type) && (loginForm.get('fullName').dirty || loginForm.get('fullName').touched)"

client/src/app/pages/login/login.page.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import firebase from 'firebase/compat/app';
 
 import { AuthService } from 'src/app/services/auth.service';
+import { VALIDATION_MESSAGES } from 'src/app/shared/constants/validation-messages.constants';
 
 @Component({
   selector: 'app-login',
@@ -15,6 +16,7 @@ export class LoginPage implements OnInit {
   phoneNumber: string;
   formType: 'login' | 'Register' | 'reset' = 'Register';
   isSubmitted = false;
+  public validationMessages = VALIDATION_MESSAGES;
 
   recaptchaVerifier: firebase.auth.RecaptchaVerifier;
   confirmationResult: any;
@@ -32,6 +34,11 @@ export class LoginPage implements OnInit {
   get isSignup(): boolean {
     return this.formType === 'Register';
   }
+
+  get errorControl() {
+    return this.loginForm.controls;
+  }
+
   changeFormType(value: 'login' | 'Register' | 'reset' = 'Register') {
     this.formType = value;
   }
@@ -50,10 +57,6 @@ export class LoginPage implements OnInit {
     });
   }
 
-  get errorControl() {
-    return this.loginForm.controls;
-  }
-
   async ionViewDidEnter() {
     this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
       'submit-button',
@@ -104,6 +107,7 @@ export class LoginPage implements OnInit {
       await this.authService.storeUsernameAndPhone(
         this.loginForm.value.fullName
       );
+      localStorage.setItem('fullName', this.loginForm.value.fullName);
 
       await this.authService
         .signInWithPhoneNumber(this.recaptchaVerifier, this.phoneNumber)
@@ -112,22 +116,4 @@ export class LoginPage implements OnInit {
         });
     }
   }
-
-  validation_messages = {
-    fullName: [
-      { type: 'required', message: '- Full Name is required.' },
-      {
-        type: 'minlength',
-        message: '- Name must be at least 5 characters long.',
-      },
-      {
-        type: 'maxlength',
-        message: '- Name cannot be more than 25 characters long.',
-      },
-      {
-        type: 'pattern',
-        message: '- Your fullname must contain letters and spaces only.',
-      },
-    ],
-  };
 }