Skip to content

Commit

Permalink
style: app page layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@csndra0504
csndra0504 committed May 11, 2016
1 parent 994c0ea commit bd1186a
Show file tree
Hide file tree
Showing 6 changed files with 213 additions and 97 deletions.
1 change: 1 addition & 0 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ require('./views/StripeApp/StripeAppCtrl.js');
// JS COMPONENTS
require('./components/Footer/Footer.js');
require('./components/Newsletter/Newsletter.js');
require('./components/AppHeader/AppHeader.js');

// JS SERVICES
require('./services/card-history.service.js');
Expand Down
12 changes: 12 additions & 0 deletions src/components/AppHeader/AppHeader.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<nav class="navbar navbar-default bar-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="//utils.codehangar.io">
<img alt="Brand" height="28" class="pull-left" style="margin:0 10px;" src="./components/Brand-Utils/brand-codehangar-200.png"> Stripe Token Generator
</a>

<div ng-include="'./components/Navigation-Utils/index.html'"></div>
</div>
</div>
<!-- /.container-fluid -->
</nav>
29 changes: 29 additions & 0 deletions src/components/AppHeader/AppHeader.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
(function() {
'use strict';

angular
.module("utils.codehangar")
.directive("appheader", directive);

function directive() {
return {
restrict: 'A',
scope: {
fixed: '@'
},
templateUrl: 'components/AppHeader/AppHeader.html',
controller: controller,
controllerAs: 'vm',
bindToController: true
}
}

function controller() {
var vm = this;

vm.init = function() {
console.log('app header')
};
vm.init();
}
})();
58 changes: 57 additions & 1 deletion src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,64 @@ $brand-teal: #2aa198;
line-height: 60px;
}

.footer-fixed{
.footer-fixed {
position: fixed;
bottom: 0;
width: 100%;
}

.stripe-app {
padding-top: 5em;
padding-bottom: 5em;

/*.navbar-default .navbar-brand {
color: $gray;
}*/

.bar-top{
z-index: 1000;
left: 0;
top: 0;
position: fixed;
/*box-shadow: 0 .0625em .3125em rgba(0,0,0,.15);*/
/*background-color: rgba(255,255,255,.94);*/
/*padding-bottom: .75em;*/
/*padding-top: .75em;*/
width: 100%;
/*border:none;*/
/*color:$gray;*/
}
.bar-bottom{
z-index: 1000;
left: 0;
bottom: 0;
position: fixed;
box-shadow: 0 .0625em .3125em rgba(0,0,0,.15);
background-color: rgba(255,255,255,.94);
/*padding-bottom: .75em;*/
/*padding-top: .75em;*/
width: 100%;
border:none;
color:$gray;
}

.step{
border-radius: 50%;
display: inline-block;
line-height: 0.9;
margin-bottom: .5em;
margin-right: .5em;

width: 36px;
height: 36px;
padding: 8px;

color:#fff;

background: $brand-teal;
/*border: 2px solid #666;*/
text-align: center;

}

}
203 changes: 109 additions & 94 deletions src/views/StripeApp/StripeApp.html
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,130 @@
<!-- HEADER -->
<div ng-include="'components/Header-Utils/index.html'"></div>

<div class="container">
<div class="row" style="margin:60px 0;">
<div class="col-sm-12">
<h1 class="text-center">Stripe Token Generator</h1>
<p class="lead text-center">Speed up your backend Stripe API integrations. Stripe Token Generator gives you easy access to one-time use Stripe tokens for all of the available Stripe test credit cards.</p>
</div>
</div>
</div>
<hr/>
<div class="stripe-app">

<div class="container">
<!-- HEADER -->
<div appheader></div>

<div class="row">
<div class="col-md-4 col-md-offset-2 well">
<div class="form-group">
<label for="cardSelect" class="control-label">Pre-Fill with Stripe Test Card</label>
<select name="cardSelect" class="form-control" ng-options="card as (card.number + ' - ' + card.type) group by card.result for card in vm.cards" ng-model="vm.selectedPreset" ng-change="vm.selectPreset(vm.selectedPreset)"></select>
</div>
</div>
<div class="container">

<div class="col-md-6">
<div class="well" ng-show="vm.card">
<strong>{{ vm.card.type }}</strong>
<span>{{ vm.card.description }}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="col-sm-12">

<div class="row">
<div class="col-md-4 col-md-offset-2 well">
<form class="form" name="paymentForm" novalidate ng-submit="vm.checkout(vm.card)">

<div class="form-group" ng-hide="true">
<label for="name" class="control-label">Name on Card</label>
<input type="text" name="name" class="form-control" />
</div>
<div class="col-sm-12" style="padding-bottom:.75em;">
<form class="form" name="paymentForm" novalidate ng-submit="vm.checkout(vm.card)">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="cardSelect" class="control-label">
<div class="step">1</div> Select Stripe Test Card</label>
<select name="cardSelect" class="form-control" ng-options="card as (card.number + ' - ' + card.type) group by card.result for card in vm.cards" ng-model="vm.selectedPreset" ng-change="vm.selectPreset(vm.selectedPreset)"></select>
</div>
<div class="form-group" ng-hide="true">
<label for="name" class="control-label">Name on Card</label>
<input type="text" name="name" class="form-control" />
</div>

<div class="form-group" bs-form-class="paymentForm.cardNumber">
<p ng-show="paymentForm.cardNumber.$invalid && paymentForm.cardNumber.$ccEagerType">
Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number!
</p>

<label for="cardNumber" class="control-label">Card Number</label>
<input type="text" name="cardNumber" ng-model="vm.card.number" class="form-control" cc-number cc-format cc-eager-type />
<div ng-messages="paymentForm.cardNumber.$error" ng-show="paymentForm.cardNumber.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
</div>
</div>

<div class="form-group" bs-form-class="paymentForm.cardCVC">
<label for="cardCVC" class="control-label">CVC</label>
<input type="text" name="cardCVC" ng-model="vm.card.cvc" class="form-control" cc-cvc />
<div ng-messages="paymentForm.cardCVC.$error" ng-show="paymentForm.cardCVC.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
</div>
</div>

<div class="form-group" bs-form-class="paymentForm.cardCVC">
<label>Expiration</label>
<div cc-exp class="form-inline">
<div class="form-group" bs-form-class="paymentForm.ccExpMonth">
<input class="form-control input-sm" ng-model="vm.card.exp_month" name="ccExpMonth" cc-exp-month />
<div ng-messages="paymentForm.ccExpMonth.$error" ng-show="paymentForm.ccExpMonth.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
</div>
</div>
<span> / </span>
<div class="form-group" bs-form-class="paymentForm.ccExpYear">
<input class="form-control input-sm" ng-model="vm.card.exp_year" name="ccExpYear" cc-exp-year />
<div ng-messages="paymentForm.ccExpYear.$error" ng-show="paymentForm.ccExpYear.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
</div>
</div>
</div>
</div>

<div class="form-group" bs-form-class="paymentForm.cardNumber">
<p ng-show="paymentForm.cardNumber.$invalid && paymentForm.cardNumber.$ccEagerType">
Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number!
</p>

<label for="cardNumber" class="control-label">Card Number</label>
<input type="text" name="cardNumber" ng-model="vm.card.number" class="form-control" cc-number cc-format cc-eager-type />
<div ng-messages="paymentForm.cardNumber.$error" ng-show="paymentForm.cardNumber.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<label for="cardSelect" class="control-label">
<div class="step">2</div> Submit Credit Card Form</label>
<button type="submit" class="btn btn-primary pull-right">Submit</button>
<div class="clearfix"></div>
</div>
</div>
</form>
</div>

<div class="form-group" bs-form-class="paymentForm.cardCVC">
<label for="cardCVC" class="control-label">CVC</label>
<input type="text" name="cardCVC" ng-model="vm.card.cvc" class="form-control" cc-cvc />
<div ng-messages="paymentForm.cardCVC.$error" ng-show="paymentForm.cardCVC.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
<div class="col-sm-12">
<div class="well" ng-show="vm.card">
<strong>{{ vm.card.type }}</strong>
<span>{{ vm.card.description }}</span>
</div>
</div>

<div class="form-group" bs-form-class="paymentForm.cardCVC">
<label>Expiration</label>
<div cc-exp class="form-inline">
<div class="form-group" bs-form-class="paymentForm.ccExpMonth">
<input class="form-control input-sm" ng-model="vm.card.exp_month" name="ccExpMonth" cc-exp-month />
<div ng-messages="paymentForm.ccExpMonth.$error" ng-show="paymentForm.ccExpMonth.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
</div>
<div class="col-sm-12 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<label for="cardSelect" class="control-label">
<div class="step">3</div> Grab Your Token</label>

<div class="col-sm-12" id="result">
<div ng-show="vm.stripeResponse">
<div class="alert alert-success">Success!</div>
<!-- <p>Stripe Token: <strong>{{vm.stripeResponse.id}}</strong></p> -->
<pre>{{ vm.stripeResponse | json}}</pre>
</div>
</div>
<span> / </span>
<div class="form-group" bs-form-class="paymentForm.ccExpYear">
<input class="form-control input-sm" ng-model="vm.card.exp_year" name="ccExpYear" cc-exp-year />
<div ng-messages="paymentForm.ccExpYear.$error" ng-show="paymentForm.ccExpYear.$dirty">
<span ng-messages-include="views/partials/messages.html"></span>
<div ng-show="vm.stripeError">
<div class="alert alert-danger">Error!</div>
<pre>{{ vm.stripeError | json}}</pre>
</div>
</div>
</div>
</div>

<button type="submit" class="btn btn-lg btn-danger warning-theme pull-right">Test Checkout</button>
</form>
</div>

<div class="col-md-6">
<div class="well" ng-show="vm.stripeResponse">
<div class="alert alert-success">Success!</div>
<pre>{{ vm.stripeResponse | json}}</pre>
</div>
<div class="well" ng-show="vm.stripeError">
<div class="alert alert-danger">Error!</div>
<pre>{{ vm.stripeError | json}}</pre>
</div>
</div>

<div ng-if="false">
<pre>{{ paymentForm | json}}</pre>
<form name="paymentForm">
<input type="text" ng-model="card.number" name="cardNumber" cc-number cc-eager-type />
</form>
<p ng-show="paymentForm.cardNumber.$invalid && paymentForm.cardNumber.$ccEagerType">
Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number!
</p>
<p ng-show="paymentForm.cardNumber.$valid">
Yes, that looks like a valid {{paymentForm.cardNumber.$ccType}} number!
</p>
</div>
<!-- <div ng-if="false">
<pre>{{ paymentForm | json}}</pre>
<form name="paymentForm">
<input type="text" ng-model="card.number" name="cardNumber" cc-number cc-eager-type />
</form>
<p ng-show="paymentForm.cardNumber.$invalid && paymentForm.cardNumber.$ccEagerType">
Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number!
</p>
<p ng-show="paymentForm.cardNumber.$valid">
Yes, that looks like a valid {{paymentForm.cardNumber.$ccType}} number!
</p>
</div> -->

</div>
<!--End Row-->
</div>
<!--End Row-->
</div>
<!--End container-->
<!--End container-->


<!-- FOOTER -->
<div footer></div>
<!-- FOOTER -->
<div footer class="footer-fixed"></div>


</div>
7 changes: 5 additions & 2 deletions src/views/StripeApp/StripeAppCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
.module('utils.codehangar')
.controller('StripeAppCtrl', controller);

controller.$inject = ['CardHistory', 'StripeCards', 'stripe'];
controller.$inject = ['CardHistory', 'StripeCards', 'stripe', '$location', '$anchorScroll'];

function controller(CardHistory, StripeCards, stripe) {
function controller(CardHistory, StripeCards, stripe, $location, $anchorScroll) {
var vm = this;

vm.selectPreset = function(selectedPreset) {
Expand Down Expand Up @@ -45,6 +45,9 @@
stripe.card.createToken(payload)
.then(function(response) {
vm.stripeResponse = response;
$location.hash('result');
// call $anchorScroll()
$anchorScroll();
})
.catch(function(err) {
vm.stripeError = err;
Expand Down

0 comments on commit bd1186a

Please sign in to comment.