login finished

package.json

@@ -27,6 +27,7 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^5.0.0",
+    "@ionic/pwa-elements": "^3.0.1",
     "aws-amplify": "^3.0.23",
     "aws-amplify-angular": "^5.0.23",
     "cordova-android": "9.0.0",

src/app/pages/login/components/register-form/register-form.component.html

@@ -64,7 +64,8 @@
       </p>
     </ion-list>
 
-    <ion-button shape="round" class="mt-10" type="submit">
+    <ion-spinner *ngIf="isLoading" name="dots"></ion-spinner>
+    <ion-button  *ngIf="!isLoading" shape="round" class="mt-10" type="submit">
       Registrar
     </ion-button>
   </form>

src/app/pages/login/components/register-form/register-form.component.ts

@@ -28,15 +28,24 @@ export class RegisterFormComponent implements OnInit, OnDestroy {
   }
 
   initPasswordSubcriptions() {
-    this.signUpForm.controls['password'].valueChanges.subscribe((value: string) => {
+    this.passwordField.valueChanges.subscribe((value: string) => {
+      if (!value) {
+        this.passwordField.setValue('', { emitEvent: false });
+        value = '';
+      }
+
       if (value.trim() !== this.passwordConfirmField.value) {
         this.passwordConfirmField.setErrors({ match: true });
       } else {
         this.passwordConfirmField.setErrors(null);
       }
     });
 
-    this.signUpForm.controls['passwordConfirm'].valueChanges.subscribe((value: string) => {
+    this.passwordConfirmField.valueChanges.subscribe((value: string) => {
+       if (!value) {
+        this.passwordField.setValue('', { emitEvent: false });
+        value = '';
+      }
       if (value.trim() !== this.passwordField.value) {
         this.passwordConfirmField.setErrors({ match: true });
       } else {

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

@@ -27,20 +27,31 @@ export class LoginPage implements OnInit {
   async onLogin(loginForm: FormGroup) {
     this.loginLoading = true;
     try {
-      await this.authSrv.signIn(loginForm);
+      const status = await this.authSrv.signIn(loginForm);
+      loginForm.reset();
       this.loginLoading = false;
-      this.navCtrl.navigateRoot('');
+      status && this.navCtrl.navigateRoot('');
     } catch(e) {
-      console.log('error', e)
+      loginForm.reset();
       this.loginLoading = false;
-      await this.messengerSrv.showMessage('Algo sucedió', e.code);
+      const error = e.message.replace('error ', '');
+      await this.messengerSrv.showMessage('Algo sucedió', error);
     }
   }
 
   async onSignUp(signUpForm: FormGroup) {
-    // this.signUpLoading = true;
-    this.authSrv.signUp(signUpForm);
-    // const alert = await this.messengerSrv.showMessage('titulo', 'mensaje');
+    this.signUpLoading = true;
+    try {
+      await this.authSrv.signUp(signUpForm);
+      signUpForm.reset();
+      this.signUpLoading = false;
+      this.onSwipe(0);
+    } catch(e) {
+      this.signUpLoading = false;
+      signUpForm.reset();
+      const error = e.message.replace('error ', '');
+      await this.messengerSrv.showMessage('Algo sucedió', error);
+    }
   }
 
   onSwipe(index: number) {

src/app/pages/tab1/components/album-songs/album-songs.component.html

@@ -4,7 +4,7 @@
       {{ title }}
     </ion-title>
     <ion-buttons slot="end">
-      <ion-button (click)="selectSong()">
+      <ion-button (click)="close()">
         <ion-icon name="close"></ion-icon>
       </ion-button>
     </ion-buttons>

src/app/pages/tab1/components/album-songs/album-songs.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController, NavParams } from '@ionic/angular';
+import { Plugins } from '@capacitor/core';
+const { Toast } = Plugins;
 
 @Component({
   selector: 'app-album-songs',
@@ -22,6 +24,14 @@ export class AlbumSongsComponent implements OnInit {
   }
 
   async selectSong(song = null) {
-    await this.modalCtlr.dismiss(song);
+    if (song && song.preview_url) {
+      await this.modalCtlr.dismiss(song);
+    } else {
+      await Toast.show({ text: 'Canción no disponible', position: "top"});
+    }
+  }
+
+  close() {
+    this.modalCtlr.dismiss(null);
   }
 }

src/app/pages/tab1/page/tab1.page.ts

@@ -107,7 +107,6 @@ export class Tab1Page implements OnInit {
         });
         this.song.playing = true;
         this.song.favorite = this.favoritesSrv.checkFavorite(this.song.id);
-        console.log(this.song);
         break;
       default:
         this.currentSong.play();

src/app/pages/tab2/page/tab2.page.html

@@ -14,7 +14,7 @@
   </ng-container>
 
   <ng-container *ngIf="!isLoading">
-    <div class="favorites-list">
+    <div class="favorites-list" *ngIf="favoriteSongs.length > 0">
       <ion-list>
         <ion-item-sliding
           class="fadeIn fast"
@@ -33,6 +33,10 @@
         </ion-item-sliding>
       </ion-list>
     </div>
+
+    <div *ngIf="favoriteSongs.length === 0">
+      No data
+    </div>
   </ng-container>
 </ion-content>
 

src/app/pages/tab2/page/tab2.page.ts

@@ -29,7 +29,6 @@ export class Tab2Page implements OnInit {
 
   ngOnInit() {
     this.favoriteSongs = this.favoriteSrv.favoriteSongs;
-    console.log(this.favoriteSongs);
   }
 
   setSong(song) {

src/app/services/auth.service.ts

@@ -1,7 +1,8 @@
+import { Injectable } from '@angular/core';
 import { Auth } from 'aws-amplify';
 import { FormGroup } from '@angular/forms';
 import { AlertController } from '@ionic/angular';
-import { Injectable } from '@angular/core';
+import { MessengerService } from './messenger.service'
 import { BehaviorSubject } from 'rxjs';
 import { Plugins } from '@capacitor/core';
 const { Storage } = Plugins;
@@ -14,42 +15,44 @@ export class AuthService {
   private user = new BehaviorSubject(null);
   user$ = this.user.asObservable();
 
-  constructor(private alertCtrl: AlertController) { }
+  constructor(
+    private alertCtrl: AlertController,
+    private messengerSrv: MessengerService
+  ) { }
 
   async signIn(loginForm: FormGroup) {
     const data = loginForm.getRawValue();
     try {
       const { attributes } = await Auth.signIn(data.email, data.password);
       this.setUser(attributes);
       await this.saveUser(attributes);
+      return true;
     } catch (e) {
-      console.log('error', e);
       if (e.code === 'UserNotConfirmedException') {
-        const alert = await this.submitCode();
-        await alert.present();
-        const { data } = await alert.onDidDismiss();
-        console.log(data);          
+        const status = await this.submitCode(data.email);
+        this.validateCodeStatus(status);
+        return false;
       } else {
-        throw e;
+        throw Error(e.code);
       }
     }
   }
 
-  signUp(signUpForm: FormGroup) {
-    const data = signUpForm.getRawValue();
-    return new Promise((resolve, reject) => {
-      Auth.signUp(data.email, data.password)
-      .then((data) => {
-        console.log(data);
-        if (!data.userConfirmed) {
-          
-        }
-      })
-      .catch(e => reject(e));
-    });
+  async signUp(signUpForm: FormGroup) {
+    const formData = signUpForm.getRawValue();
+    try {
+      const data = await Auth.signUp(formData.email, formData.password);
+      if (!data.userConfirmed) {
+        const status = await this.submitCode(formData.email);
+        this.validateCodeStatus(status);
+        return false;
+      }
+    } catch (e) {
+      throw Error(e.code);
+    }
   }
 
-  async submitCode() {
+  async submitCode(username: string) {
     const alert = await this.alertCtrl.create({
       cssClass: 'messenger',
       header: '¡Casi listo!',
@@ -69,7 +72,23 @@ export class AuthService {
       }]
     });
 
-    return await alert;
+    await alert.present();
+    const { data } = await alert.onDidDismiss();
+
+    try {
+      await Auth.confirmSignUp(username, data.values);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  validateCodeStatus(status: boolean) {
+    if (status) {
+      this.messengerSrv.showMessage('¡Todo listo!', 'Cuenta confirmada, ya puedes iniciar sesión');
+    } else {
+      this.messengerSrv.showMessage('Algo ocurrió', 'El código es incorrecto');
+    }
   }
 
   setUser(value) {
@@ -81,14 +100,14 @@ export class AuthService {
   }
 
   async getUser() {
-    let ret = await Storage.get({ key: 'user' });
+    let user = await Storage.get({ key: 'user' });
 
-    if (ret) {
-      ret = JSON.parse(ret.value);
+    if (user) {
+      user = JSON.parse(user.value);
     } else {
-      ret = null;
+      user = null;
     }
 
-    return ret;
+    return user;
   }
 }

src/app/services/favorites.service.ts

@@ -30,7 +30,6 @@ export class FavoritesService {
   }
 
   checkFavorite(id: string) {
-
     const index = this.favorites.find(song => song.id === id);
 
     if (index) {

src/app/services/messenger.service.ts

@@ -26,6 +26,10 @@ export class MessengerService {
         return 'Usuario o contraseña incorrectos';
       case 'UserNotFoundException':
         return 'El usuario no existe';
+      case 'UsernameExistsException':
+        return 'El correo ya está en uso';
+      case 'CodeMismatchException':
+        return 'Código incorrecto. Revisa tu correo e inicia sesión'
       default:
         return content;
     }

src/main.ts

@@ -1,12 +1,13 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
 import Amplify from 'aws-amplify';
 import awsmobile from './aws-exports';
 
+defineCustomElements(window);
+
 Amplify.configure(awsmobile);
 
 if (environment.production) {