Skip to content

Instantly share code, notes, and snippets.

@fnakstad

fnakstad/index.html

Last active August 29, 2015 14:05
Show Gist options
  • Save fnakstad/b962093d169fa76ef4cc to your computer and use it in GitHub Desktop.
Save fnakstad/b962093d169fa76ef4cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html data-ng-app="angular-client-side-auth" lang="en">
<head>
<meta charset="utf-8">
<title>Angular Auth Example</title>
<link href="/css/app.css" rel="stylesheet">
<link href="/components/bootstrap/dist/css/bootstrap.min.css" rel=
"stylesheet">
<link href="/components/font-awesome/css/font-awesome.min.css" rel=
"stylesheet">
<!-- This is needed because Facebook login redirects add #_=_ at the end of the URL-->
<script type="text/javascript">
if (window.location.href.indexOf('#_=_') > 0) {
window.location = window.location.href.replace(/#.*/, '');
}
</script>
</head>
<body data-ng-cloak="">
<div class="navbar navbar-inner container-fluid" data-ng-controller=
"NavCtrl">
<ul class="nav nav-tabs">
<li data-access-level="accessLevels.anon">
<a href="/login">Log in</a>
</li>
<li data-access-level="accessLevels.anon">
<a href="/register">Register</a>
</li>
<li data-access-level="accessLevels.user">
<a href="/">Home</a>
</li>
<li data-access-level="accessLevels.user">
<a href="/private">Private</a>
</li>
<li data-access-level="accessLevels.admin">
<a href="/admin">Admin</a>
</li>
<li data-access-level="accessLevels.user">
<a data-ng-click="logout()" href="">Log out</a>
</li>
<li style="list-style: none; display: inline">
<div class="pull-right" data-access-level="accessLevels.user"
id="userInfo">
Welcome&nbsp;<strong>{{ user.username
}}&nbsp;</strong><span class="label" data-ng-class=
"{&quot;label-info&quot;: user.role.title == userRoles.user.title, &quot;label-success&quot;: user.role.title == userRoles.admin.title}">{{
user.role.title }}</span>
</div>
</li>
</ul>
</div>
<div class="container" data-ui-view=""></div>
<div class="alert alert-danger" data-ng-show="error" id="alertBox">
<button class="close" data-ng-click="error = null;" type=
"button">&times;</button><strong>Oh
no!&nbsp;</strong><span data-ng-bind="error"></span>
</div><script src="/components/angular/angular.min.js"></script><script src="/components/angular-cookies/angular-cookies.min.js"></script><script src=
"/components/angular-ui-router/release/angular-ui-router.min.js"></script><script src="/js/routingConfig.js"></script><script src="/js/app.js"></script><script src="/js/services.js"></script><script src="/js/controllers.js"></script><script src="/js/filters.js"></script><script src="/js/directives.js"></script>
<!-- Partial views... Load up front to make transitions smoother--><script id="404"
type="text/ng-template">
<h1>404</h1><p>Ain't nothing here</p>
</script><script id="admin" type="text/ng-template">
<h1>Admin</h1><p>This view is visible to users with the administrator role.</p><table data-ng-hide="loading" class="table table-striped"><thead><tr><th>#</th><th>Username</th><th>Role</th></tr></thead><tbody><tr data-ng-repeat="user in users"><td>{{ user.id }}</td><td><i data-ng-show="user.provider == 'twitter'" class="fa fa-twitter"></i><i data-ng-show="user.provider == 'facebook'" class="fa fa-facebook-square"></i><i data-ng-show="user.provider == 'google'" class="fa fa-google-plus-square"></i><i data-ng-show="user.provider == 'linkedin'" class="fa fa-linkedin"></i> {{ user.username }}</td><td><span data-ng-class="{&quot;label-info&quot;: user.role.title == userRoles.user.title, &quot;label-success&quot;: user.role.title == userRoles.admin.title}" class="label">{{ user.role.title }}</span></td></tr></tbody></table>
</script><script id="home" type="text/ng-template">
<h1>Hello</h1><p>This view is visible to logged in users.</p>
</script><script id="login" type="text/ng-template">
<h1>Log in</h1><p>This site is an example of how one can implement role based authentication in Angular applications as outlined in<a href="http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/"> this blogpost</a>. All the code can be found in<a href="https://github.com/fnakstad/angular-client-side-auth"> this GitHub repository</a>. You can either register a new user, log in with one of the two predefined users...</p><ul><li>admin/123</li><li>user/123</li></ul><hr><form ng-submit="login()" name="loginForm" role="form" class="form-horizontal"><div class="form-group"><label for="username" class="control-label col-sm-2">Username</label><div class="col-sm-10"><input type="text" data-ng-model="username" placeholder="Username" name="username" required autofocus class="form-control"></div></div><div class="form-group"><label for="password" class="control-label col-sm-2">Password</label><div class="col-sm-10"><input type="password" data-ng-model="password" placeholder="Password" name="password" required class="form-control"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label for="rememberme" class="checkbox"><input type="checkbox" data-ng-model="rememberme" name="rememberme">Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" data-ng-disabled="loginForm.$invalid" class="btn btn-default">Log in</button></div></div></form><hr><p>... or use one of them fancy social logins:</p><div class="btn-group"><a href="" data-ng-click="loginOauth('facebook')" class="btn btn-default"><i class="fa fa-facebook-square"></i> Facebook</a><a href="" data-ng-click="loginOauth('twitter')" class="btn btn-default"><i class="fa fa-twitter"></i> Twitter</a><a href="" data-ng-click="loginOauth('google')" class="btn btn-default"><i class="fa fa-google-plus-square"></i> Google</a><a href="" data-ng-click="loginOauth('linkedin')" class="btn btn-default"><i class="fa fa-linkedin"></i> LinkedIn</a></div>
</script><script id="private/layout" type="text/ng-template">
<div class="container"><div class="row"><div class="col-md-4 col-md-push-6"><div data-ng-controller="NavCtrl" class="list-group"><div class="list-group-item"><strong>Nested menu</strong></div><a href="/private" active-nav class="list-group-item">Nested view</a><a href="/private/nested" active-nav class="list-group-item">Another nested view</a><a href="/private/admin" active-nav data-access-level="accessLevels.admin" class="list-group-item">A nested admin view</a></div></div><div data-ui-view class="col-md-6 col-md-pull-4"></div></div></div>
</script><script id="private/home" type="text/ng-template">
<h1>Private view</h1><p>This nested view is visible to logged in users</p>
</script><script id="private/nested" type="text/ng-template">
<h1>Private view</h1><p>This other nested view is also visible to logged in users</p>
</script><script id="private/nestedAdmin" type="text/ng-template">
<h1>Private view</h1><p>This nested view is only available to&nbsp;<span class="label label-success">admin</span>&nbsp;users</p>
</script><script id="register" type="text/ng-template">
<h1>Register</h1><form ng-submit="register()" name="registerForm" role="form" class="form-horizontal"><div class="form-group"><label for="username" class="control-label col-sm-2">Username</label><div class="col-sm-10"><input type="text" data-ng-model="username" placeholder="Username" name="username" required data-ng-minlength="1" data-ng-maxlength="20" autofocus class="form-control"></div></div><div class="form-group"><label for="password" class="control-label col-sm-2">Password</label><div class="col-sm-10"><input type="password" data-ng-model="password" placeholder="Password" name="password" required data-ng-minlength="5" data-ng-maxlength="60" class="form-control"></div></div><div class="form-group"><div class="radio radio-inline"><label><input type="radio" name="role" data-ng-model="role" id="adminRole" data-ng-value="userRoles.admin">Administrator</label></div><div class="radio radio-inline"><label><input type="radio" name="role" data-ng-model="role" id="adminRole" data-ng-value="userRoles.user">Normal user</label></div></div><div class="form-group"><div class="controls"><button type="submit" data-ng-disabled="registerForm.$invalid" class="btn">Submit</button></div></div><div ng-show="registerForm.$invalid &amp;&amp; registerForm.$dirty" class="alert alert-danger"><strong>Please correct the following errors:</strong><ul><li ng-show="registerForm.username.$error.required">Username is required</li><li ng-show="registerForm.username.$error.minlength">Username has to be at least 1 character long</li><li ng-show="registerForm.username.$error.maxlength">Username has to be at most 20 character long</li><li ng-show="registerForm.password.$error.required">Password is required</li><li ng-show="registerForm.password.$error.minlength">Password must be at least 5 characters long</li><li ng-show="registerForm.password.$error.maxlength">Password must be at most 60 characters long</li></ul></div></form>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment