feat(package): added animations to the ngx-auth-firebaseui component

Author: AnthonyNahas

assets/v3.4.0/login.gif

@@ -0,0 +1,36 @@
+import {animate, animateChild, animation, query, stagger, state, style, transition, trigger, useAnimation} from '@angular/animations';
+
+const customAnimation = animation(
+  [
+    style({
+      opacity: '{{opacity}}',
+      transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
+    }),
+    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
+  ],
+  {
+    params: {
+      duration: '200ms',
+      delay: '0ms',
+      opacity: '0',
+      scale: '1',
+      x: '0',
+      y: '0',
+      z: '0'
+    }
+  }
+);
+
+export const NgxAuthFirebaseuiAnimations = [
+  trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
+
+  trigger('animateStagger', [
+    state('50', style('*')),
+    state('100', style('*')),
+    state('200', style('*')),
+
+    transition('void => 50', query('@*', [stagger('50ms', [animateChild()])], {optional: true})),
+    transition('void => 100', query('@*', [stagger('100ms', [animateChild()])], {optional: true})),
+    transition('void => 200', query('@*', [stagger('200ms', [animateChild()])], {optional: true}))
+  ]),
+];

assets/v3.4.0/login_x10.gif

@@ -2,18 +2,18 @@
 
   <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
 
-    <!--    <div id="login-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">-->
-    <div id="login-form">
+    <div id="login-form" [@animateStagger]="{ value: '50' }">
 
       <div *ngIf="logoUrl" class="logo">
-        <img [src]="logoUrl" alt="logo">
+        <img [src]="logoUrl" alt="logo" [@animate]="{ value: '*', params: { x: '50px' } }">
       </div>
 
-      <div class="title">{{titleText}}</div>
+      <div class="title" [@animate]="{ value: '*', params: { x: '-50px' } }">{{titleText}}</div>
 
-      <form name="loginForm" [formGroup]="loginForm" novalidate>
+      <form name="loginForm" [formGroup]="loginForm" novalidate
+            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
-        <mat-form-field [appearance]="appearance">
+        <mat-form-field [appearance]="appearance" [@animate]="{ value: '*', params: { x: '50px' } }">
           <input matInput [placeholder]="emailText" formControlName="email">
           <mat-icon matSuffix color="primary">email</mat-icon>
           <mat-error *ngIf="loginForm.get('email').hasError('required')">
@@ -26,21 +26,24 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field [appearance]="appearance">
+        <mat-form-field [appearance]="appearance" [@animate]="{ value: '*', params: { x: '50px' } }">
           <input matInput type="password" [placeholder]="passwordText" formControlName="password">
           <mat-icon matSuffix color="primary">lock</mat-icon>
           <mat-error>
             {{passwordErrorRequiredText}}
           </mat-error>
         </mat-form-field>
 
-        <div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column"
-             fxLayoutAlign="space-between center">
+        <div class="remember-forgot-password"
+             fxLayout="row" fxLayout.xs="column"
+             fxLayoutAlign="space-between center"
+             [@animate]="{ value: '*', params: { x: '50px' } }">
           <mat-checkbox class="remember-me" aria-label="Remember Me">
             {{rememberMeText}}
           </mat-checkbox>
 
           <button *ngIf="resetPasswordEnabled"
+                  [@animate]="{ value: '*', params: { x: '-50px' } }"
                   mat-button
                   class="forgot-password"
                   color="primary"
@@ -61,7 +64,7 @@
 
       </form>
 
-      <div class="separator">
+      <div class="separator" [@animate]="{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }">
         <span class="text">{{orLabelText}}</span>
       </div>
 
@@ -70,17 +73,19 @@
                                      theme="raised"
                                      [providers]="providers"></ngx-auth-firebaseui-providers>
 
-      <div class="register" fxLayout="column" fxLayoutAlign="center center">
-        <span class="text">{{dontHaveAnAccountText}}</span>
-        <button mat-button
+      <div class="register"
+           fxLayout="column" fxLayoutAlign="center center"
+           [@animateStagger]="{ value: '100' }">
+        <span class="text" [@animate]="{ value: '*', params: { x: '100px' } }">
+          {{dontHaveAnAccountText}}
+        </span>
+        <button [@animate]="{ value: '*', params: { x: '-100px' } }"
+                mat-button
                 id="createAccountButton"
                 color="primary"
                 type="button"
                 (click)="onCreateAccountRequested.emit()">{{createAccountButtonText}}</button>
       </div>
-
     </div>
-
   </div>
-
 </div>

demo/src/app/home/home.component.html

@@ -21,7 +21,8 @@ ngx-auth-firebaseui-login {
       }
 
       .logo {
-        width: 128px;
+        width: 150px;
+        height: 150px;
         margin: 32px auto;
       }
 

src/module/animations/index.ts

@@ -3,12 +3,14 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {MatFormFieldAppearance} from '@angular/material';
 import {AuthProcessService, AuthProvider} from '../../services/auth-process.service';
 import {Subscription} from 'rxjs';
+import {NgxAuthFirebaseuiAnimations} from '../../animations';
 
 @Component({
   selector: 'ngx-auth-firebaseui-login',
   templateUrl: './ngx-auth-firebaseui-login.component.html',
   styleUrls: ['./ngx-auth-firebaseui-login.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  animations: NgxAuthFirebaseuiAnimations
 })
 export class NgxAuthFirebaseuiLoginComponent implements OnInit {
 

src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html

@@ -5,13 +5,15 @@
     <mat-card>
       <mat-card-title>{{signInCardTitleText}}</mat-card-title>
       <mat-card-content>
-        <form [formGroup]="signInFormGroup"
+        <form [@animateStagger]="{ value: '50' }"
+              [formGroup]="signInFormGroup"
               (ngSubmit)="signInFormGroup.valid &&
               authProcess.signInWith
               (authProviders.EmailAndPassword,
               {email:signInFormGroup.value.email, password: signInFormGroup.value.password})">
           <div fxLayout="column" fxLayoutAlign="center">
-            <mat-form-field [appearance]="appearance">
+            <mat-form-field [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
+                            [appearance]="appearance">
               <mat-label>{{emailText}}</mat-label>
               <input matInput
                      formControlName="email"
@@ -25,7 +27,8 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field [appearance]="appearance">
+            <mat-form-field [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
+                            [appearance]="appearance">
               <mat-label>{{passwordText}}</mat-label>
               <input matInput [type]="togglePass.type" [minlength]="min" [maxlength]="max" formControlName="password"
                      required/>
@@ -44,7 +47,8 @@
               </mat-error>
             </mat-form-field>
 
-            <button mat-raised-button
+            <button [@animate]="{ value: '*', params: { x: '50px' } }"
+                    mat-raised-button
                     style="margin-top: 20px"
                     type="submit"
                     class="space-top"
@@ -57,6 +61,7 @@
 
         <div fxLayoutAlign="center">
           <button *ngIf="resetPasswordEnabled"
+                  [@animate]="{ value: '*', params: { x: '-50px' } }"
                   mat-button
                   class="space-top"
                   [color]="color"
@@ -67,7 +72,8 @@
 
       </mat-card-content>
       <mat-card-footer *ngIf="authProcess.isLoading">
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar [@animate]="{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }"
+                          mode="indeterminate"></mat-progress-bar>
       </mat-card-footer>
     </mat-card>
   </mat-tab>
@@ -79,11 +85,13 @@
       <div *ngIf="!authProcess.emailConfirmationSent;then register else confirm"></div>
       <ng-template #register>
         <mat-card-content fxLayout="column" fxLayoutAlign="center">
-          <form [formGroup]="signUpFormGroup" (ngSubmit)="signUpFormGroup.valid &&
+          <form [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
+                [formGroup]="signUpFormGroup" (ngSubmit)="signUpFormGroup.valid &&
           processLegalSignUP(authProvider.EmailAndPassword)">
             <div fxLayout="column" fxLayoutAlign="center">
               <!--name-->
-              <mat-form-field [appearance]="appearance">
+              <mat-form-field [@animate]="{ value: '*', params: { x: '50px' } }"
+                              [appearance]="appearance">
                 <!--labels will work only with @angular/material@6.2.0 -->
                 <mat-label>{{nameText}}</mat-label>
                 <input
@@ -108,7 +116,8 @@
               </mat-form-field>
 
               <!--email-->
-              <mat-form-field [appearance]="appearance">
+              <mat-form-field [@animate]="{ value: '*', params: { x: '50px' } }"
+                              [appearance]="appearance">
                 <mat-label>{{emailText}}</mat-label>
                 <input matInput
                        type="email"
@@ -125,7 +134,8 @@
 
               <!--password-->
               <div fxLayout="column">
-                <mat-form-field [appearance]="appearance">
+                <mat-form-field [@animate]="{ value: '*', params: { x: '50px' } }"
+                                [appearance]="appearance">
                   <mat-label>{{passwordText}}</mat-label>
                   <input
                     matInput
@@ -172,7 +182,8 @@
 
               </div>
 
-              <button mat-raised-button
+              <button [@animate]="{ value: '*', params: { x: '100px' } }"
+                      mat-raised-button
                       style="margin-top: 20px"
                       type="submit"
                       [color]="color">
@@ -183,6 +194,7 @@
           </form>
 
           <button *ngIf="guestEnabled"
+                  [@animate]="{ value: '*', params: { x: '-100px' } }"
                   mat-button
                   style="margin-top: 20px"
                   [color]="color"
@@ -194,7 +206,8 @@
         </mat-card-content>
 
         <mat-card-footer *ngIf="authProcess.isLoading">
-          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+          <mat-progress-bar [@animate]="{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }"
+                            mode="indeterminate"></mat-progress-bar>
         </mat-card-footer>
 
       </ng-template>
@@ -213,7 +226,8 @@
 
   <!--Reset password tab-->
   <mat-tab *ngIf="passwordResetWished" [label]="resetPasswordTabText">
-    <form [formGroup]="resetPasswordFormGroup" (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
+    <form [@animateStagger]="{ value: '50' }"
+          [formGroup]="resetPasswordFormGroup" (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
 
       <mat-card>
         <mat-card-header fxLayoutAlign="end">
@@ -227,7 +241,8 @@
         </mat-card-header>
 
         <mat-card-content>
-          <mat-form-field class="full-width" [appearance]="appearance">
+          <mat-form-field class="full-width" [appearance]="appearance"
+                          [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
             <mat-label> {{ resetPasswordTabText }} </mat-label>
             <input matInput
                    [readonly]="passReset"
@@ -244,18 +259,22 @@
           </mat-form-field>
         </mat-card-content>
         <mat-card-actions fxLayoutAlign="center">
-          <button mat-raised-button
+          <button [@animate]="{ value: '*', params: { x: '50px' } }"
+                  mat-raised-button
                   type="submit"
                   [color]="color"
                   [disabled]="passReset">
             {{resetPasswordActionButtonText}}
           </button>
         </mat-card-actions>
         <mat-card-footer *ngIf="passReset" fxLayoutAlign="center">
-          <p>{{resetPasswordInstructionsText}}</p>
+          <p [@animate]="{ value: '*', params: { x: '-50px' } }">{{resetPasswordInstructionsText}}</p>
         </mat-card-footer>
         <mat-card-footer>
-          <mat-progress-bar *ngIf="authProcess.isLoading" mode="indeterminate"></mat-progress-bar>
+          <mat-progress-bar *ngIf="authProcess.isLoading"
+                            [@animate]="{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }"
+                            mode="indeterminate">
+          </mat-progress-bar>
         </mat-card-footer>
       </mat-card>
     </form>

src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.scss

@@ -24,6 +24,7 @@ import {LegalityDialogComponent} from '../../components/legality-dialog/legality
 import {LegalityDialogParams, LegalityDialogResult} from '../../interfaces/legality.dialog.intreface';
 import {NgxAuthFirebaseUIConfig, NgxAuthFirebaseUIConfigToken} from '../../ngx-auth-firebase-u-i.module';
 import {MatPasswordStrengthComponent} from '@angular-material-extensions/password-strength';
+import {NgxAuthFirebaseuiAnimations} from '../../animations';
 
 
 export const EMAIL_REGEX = new RegExp(['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)',
@@ -36,7 +37,8 @@ export const PHONE_NUMBER_REGEX = new RegExp(/^\+(?:[0-9] ?){6,14}[0-9]$/);
 @Component({
   selector: 'ngx-auth-firebaseui',
   templateUrl: 'auth.component.html',
-  styleUrls: ['auth.component.scss']
+  styleUrls: ['auth.component.scss'],
+  animations: NgxAuthFirebaseuiAnimations
 })
 export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {