LILiK login and user managment web interface
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

239 lines
9.3 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <title>LILiK Users</title>
  6. <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
  7. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
  8. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.min.js"></script>
  9. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-aria.min.js"></script>
  10. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"></script>
  11. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-cookies.min.js"></script>
  12. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-messages.min.js"></script>
  13. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-sanitize.min.js"></script>
  14. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  15. <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
  16. <script>
  17. var sericesDescriptions = {
  18. admin: "You can access LILiK machines as root, edit users and much more...",
  19. mail: "<a href='https://webmail.lilik.it' target='_blank'>Go to your webmail</a>"
  20. }
  21. angular.module('Authentication', []);
  22. var app = angular.module("app",
  23. [
  24. 'Authentication',
  25. 'ngRoute',
  26. 'ngCookies',
  27. 'ngMaterial',
  28. 'ngMessages',
  29. 'ngSanitize'
  30. ]);
  31. app.config(['$routeProvider', function ($routeProvider) {
  32. $routeProvider.when('/login', {
  33. controller: 'LoginController',
  34. templateUrl: 'views/login.html',
  35. hideMenus: true
  36. }).when('/users/:ID', {
  37. controller: 'EditController',
  38. templateUrl: 'views/show.html'
  39. }).when('/users/:ID/edit', {
  40. controller: 'EditController',
  41. templateUrl: 'views/edit.html'
  42. }).otherwise({ redirectTo: '/login' });
  43. }]).run(['$rootScope', '$location', '$cookieStore', '$http', 'AuthenticationService', '$mdDialog',
  44. function ($rootScope, $location, $cookieStore, $http, AuthenticationService, $mdDialog) {
  45. $rootScope.getUsers = function(searchText) {
  46. return $http.get("/api/users").then(function(response) {
  47. return response.data.filter(function(user) {
  48. return user.startsWith(searchText);
  49. });
  50. });
  51. };
  52. $rootScope.$watch('globals.currentUser', function() {
  53. if (typeof $rootScope.globals.currentUser !== 'undefined') {
  54. $http.get("/api/users/"+$rootScope.globals.currentUser.username).then(function(response) {
  55. $rootScope.logged_user = response.data;
  56. console.log(response.data);
  57. });
  58. }
  59. });
  60. // keep user logged in after page refresh
  61. $rootScope.globals = $cookieStore.get('globals') || {};
  62. if ($rootScope.globals.currentUser) {
  63. $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
  64. }
  65. $rootScope.logout = function(){
  66. AuthenticationService.ClearCredentials();
  67. $location.path('/login');
  68. };
  69. $rootScope.promptNewUser = function(ev) {
  70. // Appending dialog to document.body to cover sidenav in docs app
  71. var confirm = $mdDialog.prompt()
  72. .title('Create new user')
  73. .textContent('Choose a uid for the new user')
  74. .placeholder('username')
  75. .ariaLabel('username')
  76. .initialValue('')
  77. .targetEvent(ev)
  78. .ok('Create')
  79. .cancel('Cancel');
  80. $mdDialog.show(confirm).then(function(result) {
  81. $http.post("/api/users", {uid: result}).then(function(response) {
  82. console.log(response.data);
  83. $rootScope.editUser(result);
  84. });
  85. }, function(){});
  86. };
  87. $rootScope.getServiceDescription = function(service){
  88. if (service in sericesDescriptions){
  89. return sericesDescriptions[service]
  90. }
  91. return service
  92. };
  93. $rootScope.editUser = function(user){
  94. $location.path('/users/'+user+'/edit');
  95. }
  96. $rootScope.home = function(){
  97. $location.path('/users/'+$rootScope.globals.currentUser.username);
  98. }
  99. $rootScope.$on('$locationChangeStart', function (event, next, current) {
  100. // redirect to login page if not logged in
  101. if ($location.path() !== '/login' && !$rootScope.globals.currentUser) {
  102. $location.path('/login');
  103. }
  104. });
  105. }]).controller('EditController', ['$scope', '$routeParams', '$http', '$mdDialog', function($scope, $routeParams, $http, $mdDialog) {
  106. console.log($routeParams.ID);
  107. $scope.password = {};
  108. if ($routeParams.ID == $scope.globals.currentUser.username){
  109. $scope.user = $scope.logged_user;
  110. }else{
  111. $http.get("/api/users/"+$routeParams.ID).then(function(response) {
  112. $scope.user = response.data;
  113. console.log(response.data);
  114. });
  115. }
  116. $scope.save = function(){
  117. console.log($scope.user);
  118. if ($scope.password.new == $scope.password.confirm){
  119. $scope.user.userPassword = $scope.password.new;
  120. }
  121. $http.put("/api/users/"+$routeParams.ID, $scope.user).then(function(response) {
  122. console.log(response.data);
  123. $scope.password = {};
  124. $mdDialog.hide();
  125. });
  126. };
  127. $scope.changePassword = function(ev) {
  128. $scope.password = {};
  129. // Appending dialog to document.body to cover sidenav in docs app
  130. var confirm = {
  131. clickOutsideToClose: true,
  132. targetEvent: ev,
  133. templateUrl: 'views/changePassword.html',
  134. scope: $scope,
  135. preserveScope: true,
  136. }
  137. $mdDialog.show(confirm).then(function(result) {
  138. console.log(result);
  139. // $http.post("/api/users", {uid: result}).then(function(response) {
  140. // console.log(response.data);
  141. // $rootScope.editUser(result);
  142. // });
  143. }, function(){});
  144. };
  145. $scope.closeDialog = function() {
  146. $mdDialog.hide();
  147. };
  148. }]);;
  149. app.directive('valueMatches', ['$parse', function ($parse) {
  150. return {
  151. require: 'ngModel',
  152. link: function (scope, elm, attrs, ngModel) {
  153. var originalModel = $parse(attrs.valueMatches),
  154. secondModel = $parse(attrs.ngModel);
  155. // Watch for changes to this input
  156. scope.$watch(attrs.ngModel, function (newValue) {
  157. ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
  158. });
  159. // Watch for changes to the value-matches model's value
  160. scope.$watch(attrs.valueMatches, function (newValue) {
  161. ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
  162. });
  163. }
  164. };
  165. }]);
  166. // controller("myCtrl", function($scope, $http, authService) {
  167. // $scope.$on('event:auth-loginRequired', function() {
  168. // console.log(54546);
  169. // });
  170. //
  171. // $scope.$on('event:auth-loginRequired', function() {
  172. // console.log("catch");
  173. // });
  174. //
  175. //
  176. //
  177. // $http.get("/api/users/test").then(function(response) {
  178. // $scope.user = response.data;
  179. // console.log(response.data);
  180. // });
  181. // // $http.get("/api/users").then(function(response) {
  182. // // $scope.users = response.data;
  183. // // });
  184. // });
  185. </script>
  186. <script src="authentication.js"></script>
  187. <script src="controllers.js"></script>
  188. <style>
  189. #search {
  190. display: inline-flex;
  191. }
  192. #search md-input-container {
  193. margin: 0;
  194. padding-bottom: -10px;
  195. }
  196. #search .md-errors-spacer {
  197. display: none;
  198. }
  199. #search md-progress-linear.md-inline {
  200. bottom: 1px;
  201. right: 2px;
  202. left: 2px;
  203. width: auto;
  204. height: 1px;
  205. }
  206. </style>
  207. </head>
  208. <body ng-app="app" ng-cloak>
  209. <div layout="row" layout-padding layout-align="space-between center" ng-if="globals.currentUser">
  210. <div>
  211. <md-button ng-click="home();">Home</md-button>
  212. <md-button ng-click="promptNewUser()" ng-if="logged_user.services.admin">New</md-button>
  213. <md-autocomplete ng-if="logged_user.services.admin" id="search" md-selected-item="selectedItem"
  214. md-search-text="searchText" md-select-on-match=true md-match-case-insensitive=false
  215. md-require-match=true md-floating-label ="Search user" md-selected-item-change="editUser(item)" md-items="item in getUsers(searchText)" md-item-text="item" flex="25">
  216. <span md-highlight-text="searchText">{{item}}</span>
  217. </md-autocomplete>
  218. </div>
  219. <div class="nav-buttons">
  220. <!-- <md-button class="md-raised md-accent">My profile</md-button> -->
  221. <md-button class="md-raised md-warn" ng-click="logout()">Log Out</md-button>
  222. </div>
  223. </div>
  224. <div ng-view></div>
  225. </body>
  226. </html>