mcloud-users-login

index.html

<div ng-app="mcloud-pen"
     ng-controller="mainController"
     class="form-mini-container"
     >

    <div class="row">

        <div class="col-xs-2 col-md-4">
        </div>

        <div class="col-xs-8 col-md-4">
            <div class="white-box">
                <form method="post"
                      action="#">

                    <h1> Login </h1>

                    <div class="form-row">
                        <label for="email">Email</label>
                        <input class="form-control"
                               name="email"
                               ng-model="form.email"
                               placeholder="email" />
                    </div>

                    <div class="form-row">
                        <label for="pwd">Password</label>
                        <input class="form-control"
                               type="password"
                               name="pwd"
                               ng-model="form.password"
                               placeholder="password" />
                    </div>

                    <div class="form-row form-last-row">
                        <div class="row">
                          <div class="col-xs-6">
                            <button type="submit" 
                                class="btn btn-primary" 
                                ng-click="onSubmit()" 
                                ng-disabled="disableSubmit">Submit</button>
                          </div>
                          <div class="col-xs-6">
                            <p ng-if="requesting && (!response && !errors)">
                              Waiting for api response
                            </p>
                            <p ng-if="response || errors">
                              Response complete, view details below
                            </p>
                          </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>

        <div class="col-xs-2 col-md-4">
        </div>

    </div>
 
    <div class="row" ng-show="response" ng-cloak>
        <div class="col-md-2">
        </div>
        <div class="col-xs-12 col-md-8">
            <div class="white-box">
                <h1> Response </h1>

                <p ng-if="!response">
                    No response
                </p>

                <json-formatter ng-if="response"
                                json="response"
                                open="3">
                </json-formatter>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>
        
    <div class="row"  ng-show="errors" ng-cloak>
        <div class="col-md-2">
        </div>
        <div class="col-xs-12 col-md-6">
            <div class="white-box">
                <h1> Errors </h1>

                <p ng-if="errors">
                    No errors
                </p>

                <json-formatter json="errors"
                                open="3">
                </json-formatter>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>

<div>

mcloud-users-login.markdown

mcloud-users-login

A Pen by James Delibas on CodePen.

License.

script.js

//
// mcloud-pen main module
//
(function() {
    'use strict';
    angular
        .module('mcloud-pen', [
            'angular-loading-bar',
            'toastr',
            'jsonFormatter'
        ])
        .controller('mainController', mainController);

    mainController.$inject = ['$scope', '$http', 'toastr',];
    function mainController($scope, $http, toastr) {
        $scope.onSubmit = onSubmit;
        $scope.disableSubmit = false;
        $scope.response = null;
        $scope.errors = null;
        $scope.requesting = null;

        function onSubmit() {
            $scope.requesting = true;
            $scope.response = null;
            $scope.errors = null;
            $scope.disableSubmit = true;
            $http({
                method: 'POST',
                url: 'https://mcloud-api.herokuapp.com/api/v1/users/login',
                data: {
                  email: $scope.form.email,
                  password: $scope.form.password
                }
            })
              .then(function(resp) {
                toastr.success('good job');
                $scope.requesting = null;
                $scope.disableSubmit = false
                $scope.response = resp.data;
                $scope.token = resp.data.data[0].token;
                localStorage.setItem('mcloud-staging-token', $scope.token);
              })
              .catch(function(err) {
                toastr.error(err.status);
                $scope.requesting = null;
                $scope.errors = err.data;
                $scope.disableSubmit = false;
              });
        }

    }
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.js"></script>

style.css

html,
body {
  background-color: #f3f3f3;
}

.form-mini-container {
  font: normal 14px sans-serif;
  text-align: center;
  color: #5f5f5f;
}

.form-mini-container h1 {
  color: #4c565e;
  font-size: 24px;
  padding-bottom: 30px;
  border-bottom: 2px solid #6caee0;
  font-weight: bold;
  margin: 0;
}

.white-box {
  overflow: auto;
  padding: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.form-row {
  display: block;
  text-align: left;
  margin-bottom: 23px;
}


/*	Making the form responsive. Remove this media query
    if you don't need the form to work on mobile devices. */

@media (max-width: 600px) {
  .form-mini-container {
    margin-top: 0;
  }
}


/* 
  100% height columns using flex
*/

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 1em;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.json-formatter-row {
  text-align: left;
}

.json-formatter-row .string {
  white-space: initial;
}

.label-as-badge {
  border-radius: 0.3em;
  display: inline-block;
  margin: 0 0.1em;
}

.bottom-border {
  border-bottom: 1px solid #6caee0;
}

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.css" rel="stylesheet" />