+ var appendUsersPanel = function ($area) {
+ $area.append($.H2({}, "Users"));
+ $area.append($.H3({}, "Existing Users"));
+
+ var tbody = $.TBODY();
+
+ var usersPanel
+ = $.TABLE({className: "pageEditor"},
+ $.THEAD({},
+ $.TR({},
+ $.TH({}, "User ID"),
+ $.TH({}, "Change Password"),
+ $.TH({}, "Delete User")
+ )
+ ),
+ tbody
+ );
+
+ var updateUserList = function () {
+ var users = Rakka.getUserList();
+
+ $(tbody).empty();
+
+ for (var i = 0; i < users.length; i++) {
+ var pass1 = $.INPUT({type: "password"});
+ var pass2 = $.INPUT({type: "password"});
+ var change = $.INPUT({type: "button", value: "Change"});
+
+ var chpass = $.TABLE({className: "pageEditor"},
+ $.TR({},
+ $.TD({}, pass1),
+ $.TD({rowSpan: 2}, change)),
+ $.TR({},
+ $.TD({}, pass2)));
+
+ var delUser = $.INPUT({type: "button", value: "Delete"});
+
+ $.each(users, function () {
+ var id = users[i];
+ var tr = $.TR({},
+ $.TD({}, id),
+ $.TD({}, chpass),
+ $.TD({}, delUser)
+ );
+ tbody.appendChild(tr);
+ });
+ }
+ };
+ updateUserList();
+
+ $area.append(usersPanel);
+
+ $area.append($.H3({}, "Add new user"));
+
+ var userID = $.INPUT({type: "text"});
+ var pass1 = $.INPUT({type: "password"});
+ var pass2 = $.INPUT({type: "password"});
+ var addUser = $.INPUT({type: "button", value: "Add"});
+ var addUserPanel = $.TABLE({className: "pageEditor"},
+ $.TR({},
+ $.TH({}, "User ID"),
+ $.TD({}, userID)),
+ $.TR({},
+ $.TH({}, "Password"),
+ $.TD({}, pass1)),
+ $.TR({},
+ $.TH({}, "Password (retype)"),
+ $.TD({}, pass2)),
+ $.TR({},
+ $.TH({}),
+ $.TD({}, addUser)));
+
+ $area.append(addUserPanel);
+ };
+
+ Rakka.showConfigPanel = function () {
+ var $area = Rakka.switchScreen();
+
+ appendConfigPanel($area);
+ appendUsersPanel($area);
+ };