user.system 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <title>ArozOS - Users</title>
  7. <link rel="stylesheet" href="script/semantic/semantic.min.css">
  8. <link rel="stylesheet" href="script/ao.css">
  9. <script type="application/javascript" src="script/semantic/semantic.min.js"></script>
  10. <script type="application/javascript" src="script/jquery.min.js"></script>
  11. <script type="application/javascript" src="script/ao_module.js"></script>
  12. <style>
  13. body{
  14. background-color:white;
  15. }
  16. .themebackground{
  17. background-color:#588ce0 !important;
  18. color:white !important;
  19. background-image: url("/img/public/slate.png") !important;
  20. background-repeat: no-repeat !important;
  21. background-attachment: fixed !important;
  22. }
  23. .ui.padded.slate{
  24. width: 100%;
  25. display: flex;
  26. flex-direction: column;
  27. padding: 4em;
  28. }
  29. .ui.heading.slate{
  30. align-items: flex-start;
  31. }
  32. .ts.slate .header:not(.ts):not(.sub):not(.item){
  33. line-height: 1.42857em;
  34. font-weight: 500;
  35. display: block;
  36. }
  37. .required{
  38. color:red;
  39. }
  40. .actionbtns{
  41. text-align:right;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="ui heading fluid padded slate themebackground" >
  47. <span class="header" style="font-size: 1.6em;"><i class="add icon"></i> New User</span>
  48. <span class="description">Fill in the following user information to proceed.</span>
  49. </div>
  50. <br><br>
  51. <div class="ui container">
  52. <div class="ui horizontal form">
  53. <div class="field">
  54. <label>Username <span class="required">*</span></label>
  55. <input id="username" type="text">
  56. </div>
  57. <!--
  58. <div class="field">
  59. <label>Description</label>
  60. <input id="desc" type="text">
  61. </div>
  62. -->
  63. <div class="field">
  64. <label>Password <span class="required">*</span></label>
  65. <input id="magic" type="password">
  66. </div>
  67. <div class="field">
  68. <label>Confirm Password <span class="required">*</span></label>
  69. <input id="repeatMagic" type="password">
  70. </div>
  71. <div class="field">
  72. <label>User Group</label>
  73. <select id="usergroups">
  74. <option>Loading...</option>
  75. </select>
  76. </div>
  77. </div>
  78. <br>
  79. <p><span class="required">*</span> This field is required.</p>
  80. <div class="ui negative segment" id="err" style="display:none;">
  81. <p><i class="remove icon"></i> <span id="errmsg"></span></p>
  82. </div>
  83. <div class="ui section divider"></div>
  84. <div id="actionbtns" align="right">
  85. <button class="ui primary button" onclick="createUser();">Create</button>
  86. <button id="cancelbtn" class="ui button" onclick="cancel();">Cancel</button>
  87. </div>
  88. </div>
  89. <script>
  90. //Initiate the form items
  91. //Get usergroups and list them in the usergroup list
  92. $.get("system/permission/listgroup",function(data){
  93. $("#usergroups").html("");
  94. for(var i = 0; i < data.length; i++){
  95. $("#usergroups").append(`<option value="${data[i]}">${data[i]}</option>`);
  96. }
  97. });
  98. //Detect on enter keypress
  99. $("input").on("keydown",function(event){
  100. if (event.keyCode === 13) {
  101. event.preventDefault();
  102. createUser();
  103. }
  104. });
  105. //Hide the cancel button if not in VDI
  106. if ((!(!parent.isDesktopMode)) == false){
  107. $("#cancelbtn").hide();
  108. }
  109. //Create the new user
  110. function createUser(){
  111. var username = $("#username").val();
  112. var password = $("#magic").val();
  113. var usergroup = $("#usergroups").val();
  114. var valud = true;
  115. //Clear previous error record
  116. $("#magic").parent().removeClass("error");
  117. $("#repeatMagic").parent().removeClass("error");
  118. $("#username").parent().removeClass("error");
  119. //Check if the username is correct
  120. if (username == ""){
  121. $("#username").parent().addClass("error");
  122. valud = false;
  123. }
  124. //Check if the password match with the confirm
  125. if (password != $("#repeatMagic").val()){
  126. //Confirm password not match
  127. $("#repeatMagic").parent().addClass("error");
  128. valud = false;
  129. }
  130. if (password == ""){
  131. //Password cannot be empty
  132. $("#magic").parent().addClass("error");
  133. $("#repeatMagic").parent().addClass("error");
  134. valud = false;
  135. }
  136. if (!valud){
  137. //Current input is invalid.
  138. return;
  139. }
  140. //Create post reqest for user registering
  141. $.post("system/auth/register",{username: username, password: password, group:usergroup}).done(function(data){
  142. console.log(data);
  143. if (data.includes("Error") == false){
  144. //Everyhing is ok
  145. //Check if user already logged in. If no, redirect to login interface
  146. $.get("system/auth/checkLogin",function(data){
  147. if (data == true){
  148. if (!(!parent.isDesktopMode)){
  149. //Perform a parent callback to check if there are any functions that requires update
  150. ao_module_parentCallback(true);
  151. parent.closeFwProcess($(window.frameElement).parent().parent().attr("windowId"));
  152. }else{
  153. //Tell the user to close this UI
  154. window.location.href = "SystemAO/closeTabInsturction.html"
  155. }
  156. }else{
  157. window.location.href = "/login.system";
  158. }
  159. });
  160. }else{
  161. //There are errors.
  162. $("#errmsg").text(data);
  163. $("#err").slideDown('fast');
  164. }
  165. });
  166. }
  167. function cancel(){
  168. if (!(!parent.isDesktopMode)){
  169. parent.closeFwProcess($(window.frameElement).parent().parent().attr("windowId"));
  170. }
  171. }
  172. </script>
  173. </body>
  174. </html>