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.

190 lines
7.6 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: 'HomeController',
  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', function($scope, $routeParams, $http) {
  106. console.log($routeParams.ID);
  107. if ($routeParams.ID == $scope.globals.currentUser.username){
  108. $scope.user = $scope.logged_user;
  109. }else{
  110. $http.get("/api/users/"+$routeParams.ID).then(function(response) {
  111. $scope.user = response.data;
  112. console.log(response.data);
  113. });
  114. }
  115. $scope.save = function(){
  116. $http.put("/api/users/"+$routeParams.ID, $scope.user).then(function(response) {
  117. console.log(response.data);
  118. });
  119. };
  120. }]);;
  121. // controller("myCtrl", function($scope, $http, authService) {
  122. // $scope.$on('event:auth-loginRequired', function() {
  123. // console.log(54546);
  124. // });
  125. //
  126. // $scope.$on('event:auth-loginRequired', function() {
  127. // console.log("catch");
  128. // });
  129. //
  130. //
  131. //
  132. // $http.get("/api/users/test").then(function(response) {
  133. // $scope.user = response.data;
  134. // console.log(response.data);
  135. // });
  136. // // $http.get("/api/users").then(function(response) {
  137. // // $scope.users = response.data;
  138. // // });
  139. // });
  140. </script>
  141. <script src="authentication.js"></script>
  142. <script src="controllers.js"></script>
  143. <style>
  144. #search {
  145. display: inline-flex;
  146. }
  147. #search md-input-container {
  148. margin: 0;
  149. padding-bottom: -10px;
  150. }
  151. #search .md-errors-spacer {
  152. display: none;
  153. }
  154. #search md-progress-linear.md-inline {
  155. bottom: 1px;
  156. right: 2px;
  157. left: 2px;
  158. width: auto;
  159. height: 1px;
  160. }
  161. </style>
  162. </head>
  163. <body ng-app="app" ng-cloak>
  164. <div layout="row" layout-padding layout-align="space-between center" ng-if="globals.currentUser">
  165. <div>
  166. <md-button ng-click="home();">Home</md-button>
  167. <md-button ng-click="promptNewUser()" ng-if="logged_user.services.admin">New</md-button>
  168. <md-autocomplete ng-if="logged_user.services.admin" id="search" md-selected-item="selectedItem"
  169. md-search-text="searchText" md-select-on-match=true md-match-case-insensitive=false
  170. 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">
  171. <span md-highlight-text="searchText">{{item}}</span>
  172. </md-autocomplete>
  173. </div>
  174. <div class="nav-buttons">
  175. <!-- <md-button class="md-raised md-accent">My profile</md-button> -->
  176. <md-button class="md-raised md-warn" ng-click="logout()">Log Out</md-button>
  177. </div>
  178. </div>
  179. <div ng-view></div>
  180. </body>
  181. </html>