Ionic 2.x/3.x - Ionic Passcode Round

Ionic 2.x/3.x - Ionic Passcode Round

Add a beautiful passcode screen to your app in order to secure your users' data.

$10.00

Not yet rated
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.0.3
Size:
0mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
e19ac83f
Released:
3 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
passcode, login, signin, security, design, iclic labs, iclic, ionic2, ionic3

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.


Plugin by icliclabs.com

This plugin is compatible with Ionic v2.x and v3.x!

Description

Add a beautiful passcode screen to your app in order to secure your users' data. This plugin works on iOS, Android and Windows Phone. The component is very easy to use and should only take a few minutes to include to your app.

Test Before You Buy

You can test the app using Ionic View and enter the app id e19ac83f.

Features

  1. Works with iOS, Android and Windows Phone.
  2. Only 1 line to add to your template
  3. Comes with serveral full and detailed examples.
  4. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the app/components/ion-passcode.ts file into your app directory
  2. Import the IonPasscode component and add it to the declarations list in the app/app.module.ts file

That's all!

Usage

  1. in your page template, add <ion-passcode> in your ion-content, the parameter options is a mandatory reference to the IonPasscodeOptions.

That's all. Here is an example of a Page template, very simple. Just add the ion-shrinking-header component:

<!-- simply add <ion-passcode> to your ion-content element, that's all! -->
<ion-content>
  <ion-passcode [options]="passcodeOptions"></ion-passcode>
</ion-content>

Here is how to define passcodeOptions:

import { Component } from '@angular/core';
import { IonPasscodeOptions } from '../../../components/ion-passcode';

@Component({
  templateUrl: 'default.html'
})
export class DefaultPage {
  passcodeOptions: IonPasscodeOptions;

  ngOnInit() {
    this.passcodeOptions = {
      title: 'Enter Passcode',
      onComplete: function(passcode: string) {
        // you have to return a promise once you have verified the passcode
        // if the passcode is invalid call `reject()`
        // if the passcode is valid call `resolve()`
        return new Promise((resolve, reject) => {
          if (passcode == '0000') {
            reject();
          }
          else {
            resolve();
          }
        });
      }
    }
  }
}

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.

Hey there! You'll need to log in before you can leave a comment here.

Henri Hietala

Henri Hietala   ·   3 years ago

Does this work with 2.0.0 final release? The delete button doesn't work in Ionic View (same goes with flat/square themed plugins). I'm using latest iOS.

Iclic Labs

Iclic Labs   ·   3 years ago

Hi Henri, it should work with 2.0.0. I am going to update all the plugins this weekend to ensure there is no regression. I'll keep you posted.

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Henri, I updated all the plugins to the 2.0.0 final version and fixed the delete button on iOS. Can you give it another try please?

Henri Hietala

Henri Hietala   ·   3 years ago

Delete still not working with Ionic view. Not updated yet?

Iclic Labs

Iclic Labs   ·   3 years ago

I have the latest version on my phone on Ionic View, you night have a cached version or something. I re-uploaded them just in case but the issue has been fixed anyways.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Daniel

Daniel   ·   3 years ago

Hi. Does this come with source code so that I can make edits, such as increasing the pin size and html button text?

Iclic Labs

Iclic Labs   ·   3 years ago

Hi Daniel, yes. This comes with the source code. You can easily override the style with a few lines of CSS. The .zip file contains some examples. You can always email at icl1clabs@gmail.com if you have any questions :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Iclic Labs

Iclic Labs   ·   3 years ago

This plugin is now compatible with ionic 3.x!

Guanghe Jin

Guanghe Jin   ·   3 years ago

I am using Ionic 3.3.0

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Guanghe Jin

Guanghe Jin   ·   3 years ago

I follow as your tutorial. But I am getting error. main.js:1436 ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Bindings cannot contain assignments at column 10 in [pageType=2=] in ng:///LoginPageModule/LoginPage.html@62:44 (" </ion-row> <ion-passcode [options]="passcodeOptions" [ERROR ->]*ngIf="pageType=2="></ion-passcode> </ion-content> "): ng:///LoginPageModule/LoginPage.html@62:44 Can't bind to 'options' since it isn't a known property of 'ion-passcode'. 1. If 'ion-passcode' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'ion-passcode' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </ion-row> <ion-passcode [ERROR ->][options]="passcodeOptions" *ngIf="pageType=2="></ion-passcode> </ion-content> "): ng:///LoginPageModule/LoginPage.html@62:16 'ion-passcode' is not a known element: What is your suggestion?

Guanghe Jin

Guanghe Jin   ·   3 years ago

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'ion-passcode'. 1. If 'ion-passcode' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'ion-passcode' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </ion-row> <ion-passcode [ERROR ->][options]="passcodeOptions" *ngIf="pageType==2"></ion-passcode> </ion-content> "): ng:///LoginPageModule/LoginPage.html@62:16 'ion-passcode' is not a known element:

Iclic Labs

Iclic Labs   ·   3 years ago

hey @GuangheJin, 2 things. One make sure ion-passcode is imported correctly in your app.module.ts. Two, please email me if you are still struggling with the plugin. I obviously can't help you here.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Guanghe Jin

Guanghe Jin   ·   3 years ago

I follow as your tutorial. But I am getting error. main.js:1436 ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Bindings cannot contain assignments at column 10 in [pageType=2=] in ng:///LoginPageModule/LoginPage.html@62:44 (" </ion-row> <ion-passcode [options]="passcodeOptions" [ERROR ->]*ngIf="pageType=2="></ion-passcode> </ion-content> "): ng:///LoginPageModule/LoginPage.html@62:44 Can't bind to 'options' since it isn't a known property of 'ion-passcode'. 1. If 'ion-passcode' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'ion-passcode' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </ion-row> <ion-passcode [ERROR ->][options]="passcodeOptions" *ngIf="pageType=2="></ion-passcode> </ion-content> "): ng:///LoginPageModule/LoginPage.html@62:16 'ion-passcode' is not a known element: What is your suggestion?

Guanghe Jin

Guanghe Jin   ·   3 years ago

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'ion-passcode'. 1. If 'ion-passcode' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'ion-passcode' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </ion-row> <ion-passcode [ERROR ->][options]="passcodeOptions" *ngIf="pageType==2"></ion-passcode> </ion-content> "): ng:///LoginPageModule/LoginPage.html@62:16 'ion-passcode' is not a known element:

Iclic Labs

Iclic Labs   ·   3 years ago

hey @GuangheJin, 2 things. One make sure ion-passcode is imported correctly in your app.module.ts. Two, please email me if you are still struggling with the plugin. I obviously can't help you here.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Iclic Labs

Iclic Labs   ·   3 years ago

This plugin is now compatible with ionic 3.x!

Guanghe Jin

Guanghe Jin   ·   3 years ago

I am using Ionic 3.3.0

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Daniel

Daniel   ·   3 years ago

Hi. Does this come with source code so that I can make edits, such as increasing the pin size and html button text?

Iclic Labs

Iclic Labs   ·   3 years ago

Hi Daniel, yes. This comes with the source code. You can easily override the style with a few lines of CSS. The .zip file contains some examples. You can always email at icl1clabs@gmail.com if you have any questions :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Henri Hietala

Henri Hietala   ·   3 years ago

Does this work with 2.0.0 final release? The delete button doesn't work in Ionic View (same goes with flat/square themed plugins). I'm using latest iOS.

Iclic Labs

Iclic Labs   ·   3 years ago

Hi Henri, it should work with 2.0.0. I am going to update all the plugins this weekend to ensure there is no regression. I'll keep you posted.

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Henri, I updated all the plugins to the 2.0.0 final version and fixed the delete button on iOS. Can you give it another try please?

Henri Hietala

Henri Hietala   ·   3 years ago

Delete still not working with Ionic view. Not updated yet?

Iclic Labs

Iclic Labs   ·   3 years ago

I have the latest version on my phone on Ionic View, you night have a cached version or something. I re-uploaded them just in case but the issue has been fixed anyways.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}