Accounts Admin UI (MaterializeCSS)
A roles based account management system using materialize css for Meteor.
This is a fork of the Bootstrap version.
Screenshots
List users:
Update users:
New role:
Table of Contents
TODO
Implement UI to create/remove roles (currently done at Meteor.startup)DONE- Configurable fields
- Implement pagination (currently relies on search to find users)
- Write tests
- User impersonation (for admins)
History
Version: 0.2.15
- Fix publication so user can only see themselves and subordinates.
Version: 0.2.14
- Roles bootstrap (minor change)
Version: 0.2.13
- Roles bug fix
Version: 0.2.12
- fix a few bugs (by removing use of underscore _.each).
- Add template helper.
- Filter Meteor.users and Roles publications based on the roles that the user should be able to see.
- Update server-side methods to allow updates of users by others with more senior roles.
Version: 0.2.11
- Add Roles hierarchy functionality.
Latest Version: 0.2.10
- sort by name, username and then email.
- add display of username
Version: 0.2.9
- Use event handlers to trigger modals, rather than a single event binding (which prevented modals being triggered for newly-inserted DOM elements)
Version: 0.2.8
- Update readme with screenshots
- Fix minor UI bug with placeholder overlapping username
Version: 0.2.7
- materializecss port (forked from upstream here)
- meteor 0.9.0 package format updates
Version: 0.2.6
- Remove hard dependency to bootstrap-3 (so less-bootstrap-3 or similar can be used). (Thanks to @johnm)
- Documentation updates
- Fixes Issue #18
Version: 0.2.5
- Bump roles version; v1.2.8 is Blaze-compatible (thanks to @alanning!)
Version: 0.2.4
- Support changes made in Meteor 0.8.0-rc0
- Fixes Issue #7
- Update to bootstrap-3.1.1
Version: 0.2.3
- Now supports changing usernames from admin interface (thanks to @djkmiles!)
Version: 0.2.2
- Fixed bugs due to fallout from removing bootstrap-modal
Version: 0.2.1
- Removed dependency to bootstrap-modal
Version: 0.2.0
- Added UI to create/remove roles
Version: 0.1.0
- Created a basic UI to find users, delete users, and modify roles.
Quick Start
Set up a simple admin page
$ mrt create app $ cd app $ mrt add bootstrap-3 # or mrt add less-bootstrap-3 $ mrt add accounts-password $ mrt add roles $ mrt add accounts-ui-bootstrap-3 $ mrt add accounts-admin-ui-bootstrap-3 $ mrt remove autopublish $ mrt remove insecure
app.js
1if (Meteor.isServer) { 2 Meteor.startup(function () { 3 // bootstrap the admin user if they exist -- You'll be replacing the id later 4 if (Meteor.users.findOne("your_admin_user_id")) 5 Roles.addUsersToRoles("your_admin_user_id", ['admin']); 6 7 // create a couple of roles if they don't already exist (THESE ARE NOT NEEDED -- just for the demo) 8 if(!Meteor.roles.findOne({name: "secret"})) 9 Roles.createRole("secret"); 10 11 if(!Meteor.roles.findOne({name: "double-secret"})) 12 Roles.createRole("double-secret"); 13 }); 14} 15 16if (Meteor.isClient) { 17 Template.adminTemplate.helpers({ 18 // check if user is an admin 19 isAdminUser: function() { 20 return Roles.userIsInRole(Meteor.user(), ['admin']); 21 } 22 }) 23}
app.html
1<head> 2 <title>Accounts Admin</title> 3</head> 4 5<body> 6 <div class="navbar navbar-default" role="navigation"> 7 <div class="navbar-header"> 8 <div class="navbar-header"> 9 <a class="navbar-brand" href="/">Accounts Admin</a> 10 </div> 11 </div> 12 <div class="navbar-collapse collapse"> 13 <ul class="nav navbar-nav"> 14 </ul> 15 <ul class="nav navbar-nav navbar-right"> 16 {{> loginButtons }} 17 </ul> 18 </div> 19 </div> 20 <div class="container"> 21 {{> adminTemplate}} 22 </div> 23</body> 24 25<template name="adminTemplate"> 26 {{#if isAdminUser}} 27 {{> accountsAdmin}} 28 {{else}} 29 Must be admin to see this... 30 {{/if}} 31</template>
After you edit app.js and app.html you need to create a new user and then set the 'admin' role to that user.
- Go to http://localhost:3000 and click on the "Sign In / Up" and create your user there.
- In the browser console grab the user id from the user you just created Meteor.userId()
- Copy the user id and paste it into to "your_admin_user_id" in app.js created above.
- Restart meteor
At this point you should see the UI. Signout and add a few more users so you can play with the roles. You can add and remove roles all through the UI.
Iron Router Integration
This tool plays nice with Iron Router package, add to following configuration to your router. Or take a look at this working example.
router.js
1Router.configure({ 2 layoutTemplate: 'layout' 3}); 4 5Router.map(function() { 6 this.route('home', { 7 path: '/', 8 template: 'home' 9 }); 10 11 this.route('admin', { 12 path:'/admin', 13 template: 'accountsAdmin', 14 onBeforeAction: function() { 15 if (Meteor.loggingIn()) { 16 this.render(this.loadingTemplate); 17 } else if(!Roles.userIsInRole(Meteor.user(), ['admin'])) { 18 console.log('redirecting'); 19 this.redirect('/'); 20 } 21 } 22 }); 23});
Roles Hierarchy
In your settings.json, you can define a hierarchy of roles:
1{ 2 "public": { 3 "accountsAdmin" : { 4 "rolesHierarchy": { 5 "roleName": "admin", 6 "subordinates": [ 7 { 8 "roleName": "user-admin", 9 "subordinates": [ 10 { 11 "roleName": "schoolAdmin", 12 "subordinates": [ 13 { 14 "roleName": "teacher", 15 "subordinates": [ 16 {"roleName": "student"} 17 ], 18 "defaultNewUserRoles":["student"], 19 "profileFilters":["school","classId"] 20 21 } 22 ], 23 "profileFilters":["school"] 24 } 25 ], 26 "defaultNewUserRoles":["teacher"] 27 28 } 29 ], 30 "defaultNewUserRoles":["teacher"] 31 } 32 } 33 } 34}
A global object, RolesTree, allows you to query the hierarchy. E.g.
1if (RolesTree.getRoleSubordinate("admin","student")) { 2 console.log("admin has a student subordinate"); 3} 4 5var subordinateRoles = RolesTree.getAllSubordinatesAsArray("admin"); 6// ["user-admin","schoolAdmin","teacher","student"] 7 8var roleObj = findRoleInHierarchy("teacher"); 9// {roleName: "teacher", 10// subordinates: [ 11// {roleName: "student"} 12// ], 13// defaultNewUserRoles:["student"], 14// profileFilters:["school","classId"]} 15 16 17var mySubordinates = RolesTree.getAllMySubordinatesAsArray(Meteor.userId()) 18// an array of role names whose roles are below my own roles (union). 19 20var canIAdminister = RolesTree.isUserCanAdministerRole(Meteor.userId(),"teacher"); 21// true if I have the role "admin", "user-admin" or "schoolAdmin"; false otherwise. 22 23var canIAdminister = RolesTree.isUserCanAdministerUser(Meteor.userId(),"baddeadbeef"); 24// true if the user with id "baddeadbeef" has any role that is a subordinate role of any of my own roles. 25 26
Contributing
If you've got a change you think would benefit the community send me a pull request.
Contributors