ionic-core-lib v0.0.27

IonicCoreLib

A Component which provides SignIn and SignUp Module.

Installation

Fist you have to add this to your dependencies. Follow below Installation steps.

Generate new ionic project.

Install Angular Material

ng add @angular/material 

Install below commands using npm.

npm install --save ionic-core-lib

Check you peer-dependencies warnings after npm install to make sure you are using a version in accordance to your Ionic version.

For Ionic 3 RC.0 and later:

SignIn Component

lib-signin component is a signin form to authenticate its users. The component contains a signin form with fields such as user name, password, and submit button to authenticate app users. It provides and google also.

Add below code in module.ts file.

import { IonicCoreLibModule } from 'ionic-core-lib';

@NgModule({
  imports: [
    IonicCoreLibModule 
  ],
})
export class AppModule {}

Add code in page.html file.

<ion-content>
  <lib-signin
        (goToSignUpPage)="navigatePage($event)"
        (clickFacebookBtn)="loginWithFacebook($event)"
        (clickGoogleBtn)="loginWithGoogle($event)">
 </lib-signin> 
</ion-content>

Features

• Login with Facebook - Logging in with Facebook is a quick and convenient way to create accounts and log in to the app from different platforms. It is available for iOS , Android , the web , applications for computers and devices such as Smart TVs and IoT (internet of things) objects . Login with Facebook supports two scenarios: using authentication and asking for permissions to access user data . You can use Facebook login only for authentication, or for authentication and data access.

• Login with Google - Google Sign-In is a secure authentication system that reduces the burden of login for your users, by enabling them to sign in with their Google Account.

Events

• (goToSignUpPage) - Redirect to signUp page.

• (clickFacebookBtn) - When a user clicks on this button by logging in with Facebook, you can access a subset of the data that they have stored on Facebook. The request which fetches 'the permissions' will allow them to access the data. Based on 'the permissions' the user has certain access to information depending on the privacy settings of the person and the request they make.

• (clickGoogleBtn) - When a user clicks on the Login button with Google, the user is navigated to Google to give the app permission. In response, the user receives a Token key and other personal details.

SignUp Component

lib-signup component is a signup form to signup its users. The component contains a signup form with fields such as user name, First name, Last name, Email, password, and submit button to signup new users.

Add below code in module.ts file.

import { IonicCoreLibModule } from 'ionic-core-lib';

@NgModule({
  imports: [
    IonicCoreLibModule 
  ],
})
export class AppModule {}

Add code in page.html file.

<ion-content>
  <lib-signup (goBackToSignIn)="navigatePage($event)"></lib-signup>
</ion-content>

Features

• Chat view - Displays messages that have been sent or received using the chat function.

• Message input box - Enter the message to be sent.

• Send Message button - Sends the message entered in the message input box.

Events

(goToSignInPage) - Redirect to signIn page.

Chat Component

The Chat component is used to display real-time and past chat logs between service agents and customers.

Add below code in module.ts file.

import { IonicCoreLibModule } from 'ionic-core-lib';

@NgModule({
  imports: [
    IonicCoreLibModule 
  ],
})
export class AppModule {}

Add code in page.html file.

<ion-content>
  <lib-chat 
    (sendMessage)="sendMsg($event)" 
    [messageList]="messageList" 
    [currentUserId]="currentUserId">
  </lib-chat>
</ion-content>

Events

• (sendMessage) = "functionname($event)" - This event emmiter use for send new message. you can get your message using event.newMsg.

  set your code like below

    functionName(event) {
    this.messageList.push({
      id: 1,
      user: 'Yash',
      createdAt: new Date().getTime(),
      msg: event.newMsg,
      userId: 101
    });

• messageList = "messageList"

  set your code like below

  messageList = [
    {
      id: 1,
      user: 'Yash',
      createdAt: 1554090956000,
      msg: 'Hey Whats up?',
      userId: 101
    },
  ];

• currentUserId = "currentUserId" - pass your current login userId.

Cart Component

The Cart component is responsible for storing and managing a customer's shopping carts. It maintains the customer's current shopping cart that is used during the purchase process, and it stores any other shopping carts that have been persisted by that customer.

Add below code in module.ts file.

import { IonicCoreLibModule } from 'ionic-core-lib';

@NgModule({
  imports: [
    IonicCoreLibModule 
  ],
})
export class AppModule {}

Add code in page.html file.

<ion-content>
  <lib-cart 
      [productList]="productList" 
      (payWithPaypal)="paymentWithPaypal($event)"
      (payWithBitcoin)="paymentWithBitcoin($event)" 
      (payWithSquare)="paymentWithSquare($event)"
      (payWithZelle)="paymentWithZelle($event)">
  </lib-cart>
</ion-content>

Events

• (payWithPaypal) = "functionname($event)" - This event emmiter use for pay payment using Paypal.

• (payWithBitcoin) = "functionname($event)" - This event emmiter use for pay payment using Bitcoin.

• (payWithSquare) = "functionname($event)" - This event emmiter use for pay payment using Square.

• (payWithZelle) = "functionname($event)" - This event emmiter use for pay payment using Zelle.

• productList = "productList"

  set your code like below

  productList = [
  			{ uid: 1, name: 'Classic', price: '5', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 0 },
  			{ uid: 2, name: 'Tuna', price: '9', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 1 },
  			{ uid: 3, name: 'Hawai', price: '7', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 2 },
  			{ uid: 4, name: 'Mac & Cheese', price: '8', category: 'Pasta', image: '', qty: 1, totalPrice: 0, index: 3 },
  			{ uid: 5, name: 'Bolognese', price: '6', category: 'Pasta', image: '', qty: 1, totalPrice: 0, index: 4 },
  			{ uid: 6, name: 'Ham & Egg', price: '8', category: 'Salad', image: '', qty: 1, totalPrice: 0, index: 5 },
  			{ uid: 7, name: 'Basic', price: '5', category: 'Salad', image: '', qty: 1, totalPrice: 0, index: 6 },
  			{ uid: 8, name: 'Ceaser', price: '9', category: 'Salad', image: '', qty: 1, totalPrice: 0, index: 7 },
  			{ uid: 9, name: 'Salami', price: '8', category: 'Pizza', image: '', qty: 1, totalPrice: 0, index: 8 },
  		];

Theming

For theming purpose this css is used. This variable you can use for all components.

 color: var(--ion-text-color)

• Set color in --ion-text-color in the variables.scss and set in color.

  --background:var(--ion-background-color)

• Set color in --ion-background-color in the variables.scss and set in --background.

To learn more about theming in app please go to

• https://ionicframework.com/docs/theming/basics

• https://ionicframework.com/docs/theming/themes

• https://ionicframework.com/docs/theming/advanced