110swag / flashy-frontend

Download as
Browse Code »

Commit 4fc1728b4a1820913b9958eb0417e32d698da2d1

Authored by Tetranoir
1 parent 84de792c36
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

added requestpasswordreset, changed name of login_form->login

Showing 7 changed files with 163 additions and 34 deletions Inline Diff

config.js View file @ 4fc1728
angular.module('flashy', [ 1 1 angular.module('flashy', [
'flashy.LogoutController', 2 2 'flashy.LogoutController',
'flashy.LoginController', 3 3 'flashy.LoginController',
'flashy.HomeController', 4 4 'flashy.HomeController',
'flashy.FeedController', 5 5 'flashy.FeedController',
'flashy.DeckController', 6 6 'flashy.DeckController',
7 'flashy.RequestResetController',
'ngCookies']). 7 8 'ngCookies']).
config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 8 9 config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
'$locationProvider', 9 10 '$locationProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) { 10 11 function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
'use strict'; 11 12 'use strict';
$httpProvider.defaults.withCredentials = true; 12 13 $httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 13 14 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 14 15 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$locationProvider.html5Mode(true); 15 16 $locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/home'); 16 17 $urlRouterProvider.otherwise('/home');
$stateProvider. 17 18 $stateProvider.
state('home', { 18 19 state('home', {
url: '/home', 19 20 url: '/home',
templateUrl: 'home.html', 20 21 templateUrl: 'home.html',
controller: 'HomeController' 21 22 controller: 'HomeController'
}). 22 23 }).
state('login', { 23 24 state('login', {
url: '/login', 24 25 url: '/login',
templateUrl: 'templates/login_form.html', 25 26 templateUrl: 'templates/login.html',
controller: 'LoginController' 26 27 controller: 'LoginController'
}). 27 28 }).
state('logout', { 28 29 state('logout', {
url: '/logout', 29 30 url: '/logout',
templateUrl: 'templates/logout.html', 30 31 templateUrl: 'templates/logout.html',
controller: 'LogoutController' 31 32 controller: 'LogoutController'
}). 32 33 }).
state('dashboard', { 33 34 state('dashboard', {
url: '/dashboard', 34 35 url: '/dashboard',
templateUrl: 'templates/dashboard.html', 35 36 templateUrl: 'templates/dashboard.html',
controller: 'DashboardController' 36 37 controller: 'DashboardController'
}). 37 38 }).
state('feed', { 38 39 state('feed', {
url: '/feed', 39 40 url: '/feed',
templateUrl: 'templates/feed.html', 40 41 templateUrl: 'templates/feed.html',
controller: 'FeedController' 41 42 controller: 'FeedController'
}). 42 43 }).
state('deck', { 43 44 state('deck', {
url: '/deck', 44 45 url: '/deck',
templateUrl: 'templates/deck.html', 45 46 templateUrl: 'templates/deck.html',
controller: 'DeckController' 46 47 controller: 'DeckController'
}). 47 48 }).
state('requestpasswordreset', { 48 49 state('requestpasswordreset', {
url: '/requestpasswordreset', 49 50 url: '/requestpasswordreset',
templateUrl: 'templates/requestpasswordreset.html', 50 51 templateUrl: 'templates/requestpasswordreset.html',
controller: 'RequestResetController' 51 52 controller: 'RequestResetController'
}); 52 53 });
53 54
}]); 54 55 }]);
flashy.css View file @ 4fc1728
#loginform input { 1 1 #loginform input {
margin-top: 5px; 2 2
border: 0px none; 3
font: 16px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial; 4
padding: 11px 10px 11px 13px; 5
width: 100%; 6
box-sizing: border-box; 7
} 8 3 }
9 4
#loginform { 10
width: 100%; 11
max-height: 300px; 12
} 13
14 5
#sidebar { 15 6 #sidebar {
position:absolute; 16 7 position:absolute;
top:100px; 17 8 top:100px;
left:0px; 18 9 left:0px;
} 19 10 }
20 11
.diclaimer { 21 12 .diclaimer {
color:#00AFD8; 22 13 color:#00AFD8;
} 23 14 }
24 15
16 .form-section {
17 width: 330px;
18 top: 50%;
19 position: relative;
20 }
21
22 .form-inputs {
23 margin-top: 0px;
24 border: 0px none;
25 font: 16px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial;
26 padding: 5px 10px 11px 13px;
27 width: 100%;
28 box-sizing: border-box;
29 }
30
31 .form-buttons {
32 margin-top: 10px;
33 width: 100%;
34 font-size: 16px;
35 }
36
37 .form-buttons .last-button {
38 float: right;
39 }
40
.container { 25 41 .container {
width: 500px; 26 42 position: relative;
43 width: 400px;
home.html View file @ 4fc1728
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html ng-app="flashy"> 2 2 <html ng-app="flashy">
<base href="/app/"> 3 3 <base href="/app/">
<head> 4 4 <head>
<link rel="stylesheet" href="styles/bootstrap-3.3.4-dist/css/bootstrap.css"/> 5 5 <link rel="stylesheet" href="styles/bootstrap-3.3.4-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="flashy.css"/> 6 6 <link rel="stylesheet" href="flashy.css"/>
</head> 7 7 </head>
8 8
<body ng-controller="HomeController"> 9 9 <body ng-controller="HomeController">
10 10
<!-- MENU BAR --> 11 11 <!-- MENU BAR -->
<nav class="navbar navbar-default"> 12 12 <nav class="navbar navbar-default">
<div class="container-fluid"> 13 13 <div class="container-fluid">
<a class="navbar-brand" ui-sref="dashboard">Flashy</a> 14 14 <a class="navbar-brand" ui-sref="dashboard">Flashy</a>
<a class="navbar-brand navbar-right" ui-sref="logout">Logout</a> 15 15 <a class="navbar-brand navbar-right" ui-sref="logout">Logout</a>
</div> 16 16 </div>
</nav> 17 17 </nav>
<div class="container" ui-view></div> 18 18 <div class="container" ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 19 19 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 20 20 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script> 21 21 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
22 22
<script src="config.js"></script> 23 23 <script src="config.js"></script>
24 24
<script src="scripts/FeedController.js"></script> 25 25 <script src="scripts/FeedController.js"></script>
<script src="scripts/HomeController.js"></script> 26 26 <script src="scripts/HomeController.js"></script>
<script src="scripts/LoginController.js"></script> 27 27 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 28 28 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 29 29 <script src="scripts/DeckController.js"></script>
30 <script src="scripts/RequestResetController.js"></script>
scripts/LoginController.js View file @ 4fc1728
angular.module('flashy.LoginController', ['ui.router']). 1 1 angular.module('flashy.LoginController', ['ui.router']).
2 2
controller('LoginController', ['$scope', '$state', '$http', 3 3 controller('LoginController', ['$scope', '$state', '$http',
function($scope, $state, $http) { 4 4 function($scope, $state, $http) {
'use strict'; 5 5 'use strict';
$scope.varvar = false 6 6 $scope.uniqueError = false;
$scope.emailError = false; 7
$scope.loginError = false; 8 7 $scope.loginError = false;
$scope.login = function(email, password) { 9 8 $scope.login = function(email, password) {
$http.post('/api/login', JSON.stringify({ 10 9 $http.post('/api/login', JSON.stringify({
'email': email, 11 10 'email': email,
'password': password 12 11 'password': password
})) 13 12 })).
.success(function(data) { 14 13 success(function(data) {
$state.go('feed'); 15 14 $state.go('feed');
console.log(data); 16 15 console.log(data);
}) 17 16 }).
.error(function(data, status, header, config) { 18 17 error(function(data, status, header, config) {
if(data.detail) { // assume 'invalid email or pass' 19 18 if(data.detail) { // assume 'invalid email or pass'
$scope.emailError = true; 20 19 $scope.loginError = true;
} 21 20 }
console.log(data) 22 21 console.log(data);
}); 23 22 });
}; 24 23 };
$scope.signUp = function(email, password) { 25 24 $scope.signUp = function(email, password) {
$http.post('/api/register', JSON.stringify({ 26 25 $http.post('/api/register', JSON.stringify({
'email': email, 27 26 'email': email,
'password': password 28 27 'password': password
})) 29 28 })).
.success(function(data) { 30 29 success(function(data) {
$state.go('feed'); 31 30 $state.go('feed');
console.log(data); 32 31 console.log(data);
}) 33 32 }).
.error(function(data, status, headers, config) { 34 33 error(function(data, status, headers, config) {
if(data.email) { // assume 'email not unique' error 35 34 console.log(data.email);
$scope.emailError = true; 36 35 if(data.email == "This field is required.") {
email.forcus(); 37 36 $scope.invalid = true;
37 $scope.uniqueError = false;
38 } else if(data.email) { // assume 'email not unique' error
39 $scope.uniqueError = true;
40 $scope.invalid = false;
} 38 41 }
console.log(data); 39 42 console.log(data);
}); 40 43 });
}; 41 44 };
$scope.triggerPasswordReset = function() { 42 45 $scope.triggerPasswordReset = function() {
$state.go('requestpasswordreset'); 43 46 $state.go('requestpasswordreset');
}; 44 47 };
} 45 48 }
]); 46 49 ]);
scripts/RequestResetController.js View file @ 4fc1728
angular.module('flashy.RequestResetController', ['ui.router']). 1 1 angular.module('flashy.RequestResetController', ['ui.router'])
2 2
controller('RequestResetController', ['$scope', '$state', 'http', 3 3 .controller('RequestResetController', ['$scope', '$state', '$http',
function($scope, $state, $http) { 4 4 function($scope, $state, $http) {
'use strict'; 5 5 'use strict';
$scope.success = false; 6 6 $scope.success = false;
$scope.alert = false; 7 7 $scope.invalid = false;
$scope.resetPass = function(email) { 8 8 $scope.resetPass = function(email) {
$http.post('/api/request_password_reset', JSON.stringify({ 9 9 $http.post('/api/request_password_reset', JSON.stringify({
'email': email 10 10 'email': email
})) 11 11 }))
.success(function(data) { 12 12 .success(function(data) {
$scope.success = true; 13 13 $scope.success = true;
14 $state.go('passwordreset');
console.log(data); 14 15 console.log(data);
}) 15 16 })
.error(function(data, status, header, config) { 16 17 .error(function(data, status, header, config) {
if(data.email) { 17 18 if(data.email) {
$scope.success = false; 18 19 $scope.invalid = true;
$scope.alert = true; 19
} 20 20 }
console.log(data) 21 21 console.log(data);
}); 22 22 });
} 23 23 };
24 $scope.cancel = function() {
25 $state.go('home');
26 };
} 24 27 }
]); 25 28 ]);
templates/login.html View file @ 4fc1728
File was created 1 <div class="content">
2 <form id="loginform">
3 <div class="container">
4 <h1 class="text-success heading">FLASHY</h1>
5 <blockquote class="pull-left" id="loginquote">
6 <p>The System shall enlighten.<br>The User shall be enlightened.</p>
7 <small>SWAG</small>
8 </blockquote>
9 </div>
10
11 <div class="form-section">
12 <!-- REGISTRATION TABS -->
13 <div class="tabbable">
14 <ul class="nav nav-pills nav-justified">
15 <li role="presentation" class="active"><a href="#tab1" data-toggle="tab">SIGN UP</a></li>
16 <li role="presentation"><a href="#tab2" data-toggle="tab">LOGIN</a></li>
17 </ul>
18 </div>
19
20 <!-- REGISTRATION PANES -->
21 <div class="tab-content" id="registration_forms">
22 <!-- LOGIN FORM -->
23 <div class="tab-pane myform" id="tab2">
24 <div class="form-inputs" name="login_form_input">
25 <div class="check-element animate-show" role="alert" ng-show="loginError">
26 <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
27 <span style="color:#8E2323">Invalid username or password!!</span>
28 </div>
29 <div class="form-group">
30 <input type="email" class="form-control" ng-model="loginEmail" placeholder="Email" required />
31 </div>
32 <div class="form-group">
33 <input type="password" class="form-control" ng-model="loginPassword" placeholder="Password" required />
34 </div>
35 <input type="submit" class="btn btn-primary btn-block" ng-click="login(loginEmail, loginPassword)" value="Login!" />
36 </div>
37 </div>
38
39 <!-- SIGN UP FORM -->
40 <div class="tab-pane active myform" id="tab1">
41 <div class="form-inputs" name="register_form_input">
42 <div class="check-element animate-show" role="alert" ng-show="uniqueError">
43 <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
44 <span style="color:#8E2323">Email already registered!</span>
45 </div>
46 <div class="form-group">
47 <input name="email" type="email" class="form-control" ng-model="loginEmail" placeholder="Email" required />
48 </div>
49 <div class="form-group">
50 <input name="password" type="password" class="form-control" ng-model="signUpPassword" placeholder="Password" required />
51 </div>
52 <input type="submit" class="btn btn-primary btn-block" ng-click="signUp(loginEmail, signUpPassword)" value="Sign up!" />
53 </div>
54 </div>
55 </div>
56
57 <!-- FORGOT PASS -->
58 <div class="disclaimer">
59 <a class="trigger-password-reset" ng-click="triggerPasswordReset()" href="#">forget ur password???</a>
60 </div>
61 </div>
62
63
64
65
66 <!--<div>
67 <input type="email" class="form-control" ng-model="loginEmail" placeholder="Email"/>
68 </div>
templates/requestpasswordreset.html View file @ 4fc1728
File was created 1 <div class="content">
2 <div class="container">
3 <h1 class="text-muted">Reset Password</h1>
4 </div>
5 <div name="passreset" class="form-section">
6 <form class="form-inputs" name="passreset_form">
7 <div class="check-element animate-show" role="alert" ng-show="invalid">
8 <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
9 <span style="color:#8E2323">Enter a valid email!</span>
10 </div>
11 <div class="form-group">
12 <input type="email" class="form-control" ng-model="user_email" placeholder="Email" required />
13 </div>
14 <div class="form-buttons">
15 <div class="btn-group">
16 <button type="button" class="btn btn-default" ng-click="cancel()"><strong>Cancel</strong></button>
17 </div>
18 <div class="last-button">
19 <div class="btn-group">
20 <button type="button" class="btn btn-danger" ng-click="resetPass(user_email)"><strong>Reset Password</strong></button>
21 </div>
22 </div>
23 </div>
24 </form>
25 </div>
26 </div>