Skip to content

Instantly share code, notes, and snippets.

@greyboxsoftware

greyboxsoftware/index.html

Created May 8, 2016 21:29
Show Gist options
  • Save greyboxsoftware/809a2130e3729e5f7e4fa073e9424c9e to your computer and use it in GitHub Desktop.
Save greyboxsoftware/809a2130e3729e5f7e4fa073e9424c9e to your computer and use it in GitHub Desktop.
Download ZIP
oxJmJO
Raw
index.html
<body ng-app="greyBoxLogin">
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-xs-12 text-center">
<h1>Grey Box Software Solutions</h1>
</div>
<div class="col-xs-12">
<h3 class="text-center">Welcome to Grey Box Software Solutions, this applications demonstrates a login and signup form that demonstrates how to establish user accounts and interactions with a backend database. In is particular application we will be using <b>Firebase.io</b> for our backend database. In this demo non of your supplied information will ever be stored nor shared.This application is written with heavy emphasis on AngularJS. </h3>
</div>
</div>
<div ng-controller="showForm">
<button type="button"
class="btn showButton col-xs-12">
Login
</button>
<form class="text-center col-xs-12"
style="padding: 20px"
name="loginForm"
novalidate>
<input class="text-center inputWidth"
type="email"
name="email"
placeholder="Email"
ng-model="login.email"
ng-required="true">
<br>
<br>
<input class="text-center inputWidth"
type="password"
name="login.password"
placeholder="Password"
ng-model="password"
required>
<br>
<br>
<input class="text-center inputWidth"
type="submit"
value="Submit"
>
</form>
</div>
<div class="row"
ng-controller="signupForm">
<button
type="button"
class="btn col-xs-12 showButton"
>Sign Up
</button>
<form class="text-center col-xs-12"
style="padding: 20px"
name="signupForm"
novalidate>
<input class="text-center inputWidth"
type="text"
name="firstName"
placeholder="First Name"
ng-model="signup.firstName"
ng-required="true"
>
<br>
<br>
<p class="errorColor validationerror"
ng-show="signupForm.firstName.$touched && signupForm.firstName.$invalid">
First name cannot be left blank!
</p>
<br>
<input id="lastName"
class="text-center inputWidth" type="text"
name="lastName"
placeholder="Last Name"
ng-model="signup.lastName"
ng-required = "true">
<br>
<br>
<p class="errorColor validationerror"
ng-show="signupForm.lastName.$touched && signupForm.lastName.$invalid">
Last name cannot be left blank!
</p>
<br>
<input class="text-center inputWidth"
type="email"
name="email"
placeholder="Email"
ng-model="signup.email"
ng-required="true">
<br>
<br>
<p class="errorColor validationerror"
ng-show="signupForm.email.$invalid && signupForm.email.$touched">
Email is invalid
</p>
<br>
<input class="text-center inputWidth"
type="password"
name="password"
placeholder="Password"
ng-model="signup.password"
ng-required="true"
ng-minlength="6">
<br>
<br>
<p class="errorColor validationerror"
ng-show="signupForm.password.$invalid && signupForm.password.$touched">
Password must be at least 6 characters
</p>
<br>
<input class="text-center inputWidth"
type="password"
name="confirmPassword" placeholder="Confirm Password"
ng-model="signup.confirmPassword"
ng-required="true"
data-confirm-password="signup.password"
>
<br>
<br>
<p class="errorColor validationerror"
ng-show="signupForm.confirmPassword.$invalid && signupForm.confirmPassword.$touched">
Passwords do not match
</p>
<br>
<input class="text-center inputWidth"
type="submit"
value="Register"
ng-click="submit()">
</form>
</div>
</div>
</body>
Raw
script.js
var greyBoxLogin = angular.module("greyBoxLogin", ['ngAnimate']);
greyBoxLogin.controller('showForm', function($scope) {
});
greyBoxLogin.controller('signupForm', function ($scope) {
$scope.signupForm = false;
$scope.results;
$scope.showSignupForm = function() {
$scope.signupForm = !$scope.signupForm;
}
$scope.submit = function() {
if ($scope.password==$scope.confirmPassword) {
$scope.results = '';
}
if ($scope.password!=$scope.confirmPassword) {
$scope.results = 'Passwords do not match';
}
}
});
greyBoxLogin.directive('confirmPassword', ConfirmPassword);
function ConfirmPassword() {
var linkFn = function(scope, element, attributes, ngModel) {
ngModel.$validators.confirmPassword = function(modelValue) {
return modelValue == scope.password;
};
scope.$watch("password", function() {
ngModel.$validate();
});
};
return {
require: "ngModel",
scope: {
password: "=confirmPassword"
},
link: linkFn
};
};
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Raw
style.css
body {
background-color: #26A1C9;
background-repeat: no-repeat;0
padding: 20px;
height: 100%;
font-size: 16px;
}
.showButton {
height:2em;
background: Transparent;
font-size: 3em;
}
.inputWidth {
width: 100%;
height: 3em;
font-size: 20px;
color: #595959;
box-shadow: 0px 0px 13px rgba(255, 133, 0, 0.9);
border-radius: 10px;
position: relative;
}
.errorColor {
color: red;
font-style: bold;
}
input.ng-invalid.ng-touched {
border: 4px solid #DA3637;
}
input.ng-valid.ng-touched {
border: 4px solid Green;
}
Raw
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/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment