Login with ionic and material design

Question

I have an ionic project with side menu and all. Now I want to add in simple way and login cool form, like http://ionicmaterial.com/ But the issue I didn't see any examples how to add it in exciting project that it will load the login form first and after that will redirect to regular page. My project looks like:

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider

        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })
        .state('app.placeslists', {
            url: "/placeslists",
            views: {
                'menuContent': {
                    templateUrl: "templates/placeslists.html",
                    controller: 'PlaceslistsCtrl'
                }
            }
        })

How can I add the login page with authentication (token) that it will load first and how can I add the material for login page in easy way.

Thanks!!!

Answer 1

For implementing login, you would require these things

1. A Login State
2. A Login Template
3. Logic to handle your token

 $stateProvider
            .state('Login', {
                url: "/Login",
                templateUrl: "app/templates/Login.html"
            })

<ion-view view-title="Login" align-title="left">
    <ion-content style="background: url(img/login.jpg) center; background-size: cover;">
        <div class="hero no-header flat">
            <div class="content">
                <div class="app-icon"></div>
                <h1>Thronester</h1>
            </div>
        </div>
        <div class="list">
            <ion-md-input placeholder="Username" highlight-color="balanced" type="text" ng-model='user.username'></ion-md-input>
            <ion-md-input placeholder="Password" highlight-color="energized" type="password" ng-model='user.password'></ion-md-input>
        </div>
        <div class="padding">
            <button ui-sref="app.profile" class="button button-full button-assertive ink">Login</button>
        </div>
        <div class="button-bar social-login">
            <button class="button button-small button-border icon-left ion-social-google button-assertive-900" ng-click='DoLogin(user)'>Login</button>
            
        </div>
    </ion-content>
</ion-view>

In your DoLogin function, you would need to handle hit your API for login, and receive your token. You would need to store this token. I use SQLlite plugin to store my token into a token table. There are different ways of storing token.

1. SQLite plugin
2. Local Storage
3. WebSQL
4. File ngCordova

and many more, I can provide you with code snippet using SQLlite.

var DB = window.sqlitePlugin.openDatabase({name: "Token.db", location: 1})

var CreateQuery = 'CREATE TABLE IF NOT EXISTS Token (id integer primary key, access_token TEXT)'

var InsertQuery = 'INSERT INTO Token (access_token) VALUES (?)'
var selectQuery = 'SELECT access_token FROM Token WHERE id = 1'


var Token = // the token you get from your server, make a $http resquest and get it

    
    
$cordovaSQLite.execute( DB,CreateQuery ).then(function () {
     //table created  
})


$cordovaSQLite.execute(DB, InsertQuery, [Token]).then(function(){
 // token inserted into table
})


$cordovaSQLite.execute(DB, selectQuery).then(function (res) {
      //getting token from table
      $rootScope.TokenFromTable =  res.rows.item(0).access_token;
  })
                 

Don't just copy paste from the code (it wont work), you would need build the logic on where to place all this code and in which order.

After you have received the authToken, you can set it as a common header for all you $http requests, and when user clicks on logout, just drop the table or drop the DB. ( go through the blogs in the link)

Answer 2

I found at the end all info with demos you can find also in: https://github.com/zachsoft/Ionic-Material

Answer 3

you can add new state login in app.js which will load login.html and controller and load it by defalut like:

.state('login', { url: '/login', templateUrl: 'templates/login.html', controller: 'LoginCtrl' })

// if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/login');

and in login controller when you successfully login then you can redirect it to any page using $state.go('app.placeslists'); it will load regular pages.