Code Monkey home page Code Monkey logo

ionic2-meteor-login's Introduction

Ionic2-Meteor Login

This repository extends ionic2-meteor-boilerplate adding Meteor accounts, login and account management components, and Oauth services from Google and Facebook.

  • Please refer to the base repository README for additional documentation.

Screenshots

Login Components

login card login card with keyboard create account card forgot password card password reset card

Validation

sign in not registered sign in incorrect password email validation already registered toast forgot password email validation

Navigation Menu

nav menu logged out nav menu logged in nav menu profile pic

Account Management

account menu page edit profile page edit profile action sheet edit profile with picture account menu update profile pic change password page

What's New

  • Login Components
    • LoginPage
      • Container page for the different card components
    • LoginCardComponent
      • Inputs for email and password
    • CreateAccountCardComponent
      • Inputs for first and last name, email address, and password
    • ForgotPasswordCardComponent
      • Input for email address to send password reset code.
    • PasswordResetCardComponent
      • Inputs for password reset code and new password
    • OauthProviderComponent
      • Buttons to open a pop-up for logging in using an Oauth provider
  • Navigation menu items
    • Logged in
      • Sign In
        • LoginPage
      • User Info - Account Management
        • AccountMenuPage
    • Logged out
      • Sign Out
    • Global
      • About
        • AboutPage
  • Account Management Components
    • AccountMenuPage
      • Navigation page for account management options
    • ChangePasswordPage
      • Confirm current password and enter new password
    • EditProfilePage
      • Change first and last name
      • Add/Edit/Remove image for user avatar
        • Supporting files
          • app/client/imports/app/components
            • AddImageComponent
          • Image resource
            • app/public/images/
              • add_image_camera_photo.png
          • app/client/imports/app/utils/
            • ImageService.ts
          • app/both/
            • FileUtil.ts
  • Form validation and toast messages
    • Supporting files
      • app/client/utils/
        • FormValidator.ts
        • ValidationResultInterface.ts
        • ToastMessenger.ts
  • Stylesheets
    • New scss files for styling form inputs and validation
  • METEOR_SETTINGS
    • config/development/settings.json
      • New private fields for oauth credentials
  • Meteor packages
    • Oauth Services
      • service-configuration
      • accounts-facebook
      • accounts-google
    • Toast Messages
      • chrismbeckett:toastr
    • Icons
      • fortawesome:fontawesome
    • Adding Image
      • mdg:camera
  • Cordova Plugins

Oauth Services

Refer to the developer guides for the different Oauth providers to set up and configure your app to use Oauth services and obtain the required credentials.

Development redirect urls
  • http://localhost:3000/_oauth/google
  • http://localhost:3000/_oauth/facebook

Once you have configured redirect urls, retrieve your credentials and add them to corresponding fields in config/development/settings.json.

You should then be able to run npm start and create an account using Oauth Services or using the app's registration form.

Account Creation and Management

  • Please refer to app/client/imports/app/pages/account/login/oauth/oauth-provider.ts to edit requested Oauth permissions.

  • Please refer to app/server/lib/accounts.js for Oauth provider account creation and password reset email.

    • You can retrieve values for the requested permissions and save them to the user's profile.
    • You can edit the text of the email sent for password recovery.

ionic2-meteor-login's People

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

ionic2-meteor-login's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.