WIP - updates to admin ui

* create user with password check
* manage user updates
* changing some semantics of ui interface

main/app/routes.py

@@ -71,6 +71,18 @@ def api_user():
 
       res = api.Request(api_req)
 
+    elif args['action'] == 'update':
+
+      api_req = { "action":"update", "function":"User" }
+      for f in field_names:
+        if f in args:
+          api_req[f] = args[f]
+
+      if "userid" in args:
+        api_req["userid"] = args["userid"]
+
+      res = api.Request(api_req)
+
   return jsonify(res)
 
 @app.route("/api/v1/Card")

main/app/static/js/popufare_admin.js

@@ -1,4 +1,121 @@
 
+// example usage:
+//
+// api_req({"ui_function":"manage_card.find", "api_function":"CardInfo", "data":[ ["action","search"],["mag_token","370000000007015"]]})
+//
+function api_req(ctx) {
+  var xhr;
+  xhr = new XMLHttpRequest();
+  if (!xhr) { return false; }
+
+  var param_val = [];
+  for (var idx=0; idx<ctx.data.length; idx++) {
+    param_val.push(ctx.data[idx][0] + '=' + ctx.data[idx][1]);
+  }
+
+  var api_func = "nop";
+  if ("api_function" in ctx) { api_func = ctx["api_function"]; }
+
+  var req_str = "api/v1/" + api_func + "?" + param_val.join("&");
+
+  xhr.onreadystatechange = (function(_x,_f) {
+    return function(v) { api_resp(_x, {"ui_function":_f}); }
+  })(xhr, ctx["ui_function"])
+  xhr.open("GET", req_str);
+  xhr.send()
+
+}
+
+
+function update_message(ui_id, msg_type, msg_text) {
+
+  var ele = document.getElementById(ui_id);
+
+  if (msg_type === "error") { ele.style.color = "#f00"; }
+  else                      { ele.style.color = "#007"; }
+  ele.innerHTML = msg_text;
+}
+
+function api_resp(xhr,extra) {
+  if (xhr.readyState === XMLHttpRequest.DONE) {
+    if (xhr.status === 200) {
+
+      var dat = JSON.parse(xhr.responseText);
+
+      console.log(dat);
+
+      if (extra["ui_function"] === "manage_card.find") {
+
+        console.log("manage_card.find", dat);
+
+        if (("cards"in dat) &&
+            (dat.cards.length>0)) {
+          manage_card_find_fill(dat.cards[0]);
+        }
+
+      }
+      else if (extra["ui_function"] === "manage_card.findone") {
+
+        console.log("... manage_card.findone", dat);
+
+        manage_card_find_fill(dat);
+      }
+      else if (extra["ui_function"] === "manage_card.update") {
+
+        console.log("issuing 'manage_card.update'");
+
+        var cardid = _get_input_field("manage_card:logical_card_id");
+        api_req({"api_function":"CardInfo", "ui_function":"manage_card.findone", "data":[["logical_card_id",cardid]]});
+      }
+
+      else if (extra["ui_function"] === "create_user.finish") {
+
+        if (dat["result"] === "success") {
+          update_message("ui.manage_user.message", "success", "");
+          _redirect( "manage_user?" + "action=get&userid=" + dat["userid"]);
+        }
+        else {
+          update_message("ui.create_user.message", "error", dat.api_comment);
+          console.log("FAIL:", dat);
+        }
+      }
+
+      else if (extra["ui_function"] === "manage_user.find") {
+        console.log("manage_user.find:", dat);
+
+        if (dat["result"] === "success") {
+          update_message("ui.manage_user.message", "success", "");
+          manage_user_find_fill(dat);
+        }
+        else {
+          update_message("ui.manage_user.message", "error", dat.api_comment);
+        }
+
+      }
+      else if (extra["ui_function"] === "manage_user.update") {
+        var userid = _get_input_field("ui.manage_user.userid");
+
+        console.log("manage_user.update resp:", dat);
+
+        // After we've associated the card to the user, re-get user information to re-fill
+        // page
+        //
+        api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data":[["userid",userid]]});
+      }
+
+      else if (extra["ui_function"] === "group") {
+      }
+
+      //else if (extra["ui_function"] === "manage_card.find") { manage_card_find_fill(dat); }
+
+    }
+    else {
+      console.log("xhr error:", xhr);
+    }
+  }
+}
+
+
 function _param2hash(p) {
   var h = {};
   p = p.substring(1);
@@ -52,7 +169,7 @@ function _date_only(s) {
 }
 
 function _create_pass_row(dat) {
-  var pass_table = document.getElementById("manage_card:list_passes");
+  var pass_table = document.getElementById("ui.manage_card.list_passes");
 
   var _cb = "<input type='checkbox' id='xxx' name='xxx'>";
 
@@ -241,13 +358,13 @@ function manage_user_find_fill(data) {
     var user_data = data["user"];
     for (var idx=0; idx<fields.length; idx++) {
       if (fields[idx] in user_data) {
-        _fill_input_field("manage_user:" + fields[idx], user_data[fields[idx]])
+        _fill_input_field("ui.manage_user." + fields[idx], user_data[fields[idx]])
       }
     }
   }
 
   if ("card" in data) {
-    var card_table = document.getElementById("manage_user:list_cards");
+    var card_table = document.getElementById("ui.manage_user.list_cards");
 
     while (card_table.firstChild) {
       card_table.removeChild(card_table.lastChild);
@@ -315,96 +432,6 @@ function manage_user_find_fill(data) {
   window.history.replaceState({}, document.title, "/manage_user");
 }
 
-function api_resp(xhr,extra) {
-  if (xhr.readyState === XMLHttpRequest.DONE) {
-    if (xhr.status === 200) {
-
-      var dat = JSON.parse(xhr.responseText);
-
-      console.log(dat);
-
-      if (extra["ui_function"] === "manage_card.find") {
-
-        console.log("manage_card.find", dat);
-
-        if (("cards"in dat) &&
-            (dat.cards.length>0)) {
-          manage_card_find_fill(dat.cards[0]);
-        }
-
-      }
-      else if (extra["ui_function"] === "manage_card.findone") {
-
-        console.log("... manage_card.findone", dat);
-
-        manage_card_find_fill(dat);
-      }
-      else if (extra["ui_function"] === "manage_card.update") {
-
-        console.log("issuing 'manage_card.update'");
-
-        var cardid = _get_input_field("manage_card:logical_card_id");
-        api_req({"api_function":"CardInfo", "ui_function":"manage_card.findone", "data":[["logical_card_id",cardid]]});
-      }
-
-      else if (extra["ui_function"] === "create_user.finish") {
-        _redirect( "manage_user?" + "action=get&userid=" + dat["userid"])
-      }
-
-      else if (extra["ui_function"] === "manage_user.find") {
-        console.log("manage_user.find:", dat);
-        manage_user_find_fill(dat);
-      }
-      else if (extra["ui_function"] === "manage_user.update") {
-        var userid = _get_input_field("manage_user:userid");
-
-        console.log("manage_user.update resp:", dat);
-
-        // After we've associated the card to the user, re-get user information to re-fill
-        // page
-        //
-        api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data":[["userid",userid]]});
-      }
-
-      else if (extra["ui_function"] === "group") {
-      }
-
-      //else if (extra["ui_function"] === "manage_card.find") { manage_card_find_fill(dat); }
-
-    }
-    else {
-      console.log("xhr error:", xhr);
-    }
-  }
-}
-
-// example usage:
-//
-// api_req({"ui_function":"manage_card.find", "api_function":"CardInfo", "data":[ ["action","search"],["mag_token","370000000007015"]]})
-//
-function api_req(ctx) {
-  var xhr;
-  xhr = new XMLHttpRequest();
-  if (!xhr) { return false; }
-
-  var param_val = [];
-  for (var idx=0; idx<ctx.data.length; idx++) {
-    param_val.push(ctx.data[idx][0] + '=' + ctx.data[idx][1]);
-  }
-
-  var api_func = "nop";
-  if ("api_function" in ctx) { api_func = ctx["api_function"]; }
-
-  var req_str = "api/v1/" + api_func + "?" + param_val.join("&");
-
-  xhr.onreadystatechange = (function(_x,_f) {
-    return function(v) { api_resp(_x, {"ui_function":_f}); }
-  })(xhr, ctx["ui_function"])
-  xhr.open("GET", req_str);
-  xhr.send()
-
-}
-
 // --------------------------------------
 // --------------------------------------
 // --------------------------------------
@@ -569,27 +596,49 @@ function manage_card_toggle_pass_select() {
 
 
 function manage_user_find_userid() {
-  var userid = _get_input_field("manage_user:userid");
+  var userid = _get_input_field("ui.manage_user.userid");
   api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data": [ ["userid",userid] ] });
 }
 
 function manage_user_find_username() {
-  var ele = document.getElementById("manage_user:username");
+  var ele = document.getElementById("ui.manage_user.username");
   var username = ele.value;
   api_req({"api_function":"UserInfo", "ui_function":"manage_user.find", "data":[["username",username]]});
 }
 
+function manage_user_update_user() {
+  var ele = document.getElementById("ui.manage_user.userid");
+  var userid = ele.value;
+
+  var user_data = [["action","update"],["userid", userid]];
+  var fields = ["username", "lookup_userid", "lookup_username", "first_name", "last_name", "email", "phone",
+                "address", "city", "state", "zip", "shipping_name", "shipping_address", "shipping_city",
+                "shipping_state", "shipping_country_code", "shipping_country_name", "shipping_zip" ];
+  for (var idx=0; idx<fields.length; idx++) {
+    var _e = document.getElementById("ui.manage_user." + fields[idx]);
+    if (!_e) { continue; }
+    user_data.push([fields[idx],_e.value]);
+  }
+
+
+  var req_data = {"api_function":"User", "ui_function":"manage_user.update_finish", "data":user_data};
+
+  console.log("???", req_data);
+
+  api_req(req_data);
+}
+
 function manage_user_associate_card(data) {
-  var ele = document.getElementById("manage_user:userid");
+  var ele = document.getElementById("ui.manage_user.userid");
   var userid = ele.value;
 
-  var ele = document.getElementById("manage_user:logical_card_id");
+  var ele = document.getElementById("ui.manage_user.logical_card_id");
   var cardid = ele.value;
 
-  ele = document.getElementById("manage_user:mag_token");
+  ele = document.getElementById("ui.manage_user.mag_token");
   var mag = ele.value;
 
-  ele = document.getElementById("manage_user:rfid_token");
+  ele = document.getElementById("ui.manage_user.rfid_token");
   var rfid = ele.value;
 
   var req_dat = { "api_function":"Card", "ui_function":"manage_user.update",
@@ -609,6 +658,14 @@ function manage_user_associate_card(data) {
 // --------------------------------------
 
 
+function create_user_update_message(msg_type, msg_text) {
+  var ele = document.getElementById("ui.create_user.message");
+
+  if (msg_type === "error") { ele.style.color = "#f00"; }
+  else                      { ele.style.color = "#007"; }
+  ele.innerHTML = msg_text;
+}
+
 function create_user_process_button() {
   var val_names = ["username", "first_name", "last_name",
                    "email", "phone", "address", "city", "state", "zip",
@@ -649,9 +706,11 @@ function admin_api_init() {
   }
 
   else if (_func === "manage_user") {
-    _attach_button( "manage_user:button_lookup_userid", manage_user_find_userid);
-    _attach_button( "manage_user:button_lookup_username", manage_user_find_username);
-    _attach_button( "manage_user:button_associate_card", manage_user_associate_card);
+    _attach_button( "ui.manage_user.lookup_userid", manage_user_find_userid);
+    _attach_button( "ui.manage_user.lookup_username", manage_user_find_username);
+    _attach_button( "ui.manage_user.update_user", manage_user_update_user);
+
+    _attach_button( "ui.manage_user.associate_card", manage_user_associate_card);
 
     if ("userid" in _h) {
       console.log("sending manage_user.find request");
@@ -660,17 +719,17 @@ function admin_api_init() {
   }
 
   else if (_func === "manage_card") {
-    _attach_button( "manage_card:button_lookup_logical_card_id", manage_card_find_cardid);
-    _attach_button( "manage_card:button_lookup_mag_token", manage_card_find_magstripe);
-    _attach_button( "manage_card:button_lookup_rfid_token", manage_card_find_rfid);
-
-    _attach_button( "manage_card:button_manage_user", manage_card_redirect_manage_user);
-    _attach_button( "manage_card:button_reissue", manage_card_reissue);
-    _attach_button( "manage_card:button_add_pass_nride", manage_card_add_pass_nride);
-    _attach_button( "manage_card:button_add_pass_nday", manage_card_add_pass_nday);
-    _attach_button( "manage_card:button_add_pass_other", manage_card_add_pass_other);
-    _attach_button( "manage_card:button_delete_pass", manage_card_delete_pass);
-    _attach_button( "manage_card:button_toggle_pass_all", manage_card_toggle_pass_select);
+    _attach_button( "ui.manage_card.lookup_logical_card_id", manage_card_find_cardid);
+    _attach_button( "ui.manage_card.lookup_mag_token", manage_card_find_magstripe);
+    _attach_button( "ui.manage_card.lookup_rfid_token", manage_card_find_rfid);
+
+    _attach_button( "ui.manage_card.manage_user", manage_card_redirect_manage_user);
+    _attach_button( "ui.manage_card.reissue", manage_card_reissue);
+    _attach_button( "ui.manage_card.add_pass_nride", manage_card_add_pass_nride);
+    _attach_button( "ui.manage_card.add_pass_nday", manage_card_add_pass_nday);
+    _attach_button( "ui.manage_card.add_pass_other", manage_card_add_pass_other);
+    _attach_button( "ui.manage_card.delete_pass", manage_card_delete_pass);
+    _attach_button( "ui.manage_card.toggle_pass_all", manage_card_toggle_pass_select);
 
     if ("logical_card_id" in _h) {
       console.log("sending manage_card.find request");

main/app/templates/create_user.html

@@ -2,7 +2,18 @@
 
 {% block content %}
 
-  <h1 class="mt-4">Create User</h1>
+  <div class="row">
+    <div class="col-6">
+      <h1 class="mt-4">Create User</h1>
+    </div>
+
+    <div class="col-6">
+      <h2 class='mt-4' id='ui.create_user.message'>...</h2>
+    </div>
+
+
+  </div>
+
 
   <div class='container'>
 
@@ -121,6 +132,7 @@
               <div class='col-2'> </div>
             </div>
 
+            <!--
             <div class='row rowpop row-shade'>
               <div class='col-4'> Group </div>
               <div class='col-6'>
@@ -134,6 +146,7 @@
               </div>
               <div class='col-2'> </div>
             </div>
+            -->
 
           </div>
 

main/app/templates/manage_user.html

@@ -2,7 +2,15 @@
 
 {% block content %}
 
-  <h1 class="mt-4">Manage User</h1>
+  <div class='row'>
+    <div class='col-6'>
+      <h1 class="mt-4">Manage User</h1>
+    </div>
+
+    <div>
+      <h2 class='mt-4' id='ui.manage_user.message'>...</h2>
+    </div>
+  </div>
 
   <div class='container'>
 
@@ -21,106 +29,107 @@
 
             <div class='row row-shade rowpop'>
               <div class='col-4'> User Id </div>
-              <div class='col-6'> <input id='manage_user:userid' type='text' class='form-control form-control-sm' placeholder=''> </div>
-              <div class='col-2'> <button id='manage_user:button_lookup_userid' type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
+              <div class='col-6'> <input id='ui.manage_user.userid' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-2'> <button id='ui.manage_user.lookup_userid' type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> User Name </div>
-              <div class='col-6'> <input id='manage_user:username' type='text' class='form-control form-control-sm' placeholder=''> </div>
-              <div class='col-2'> <button id='manage_user:button_lookup_username' type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
+              <div class='col-6'> <input id='ui.manage_user.username' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-2'> <button id='ui.manage_user.lookup_username' type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> First Name </div>
-              <div class='col-6'> <input id='manage_user:first_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.first_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> Last Name </div>
-              <div class='col-6'> <input id='manage_user:last_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.last_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> E-Mail </div>
-              <div class='col-6'> <input id='manage_user:email' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.email' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> Phone </div>
-              <div class='col-6'> <input id='manage_user:phone' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.phone' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> Address </div>
-              <div class='col-6'> <input id='manage_user:address' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.address' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> City </div>
-              <div class='col-6'> <input id='manage_user:city' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.city' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> State </div>
-              <div class='col-6'> <input id='manage_user:state' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.state' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> ZIP </div>
-              <div class='col-6'> <input id='manage_user:zip' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.zip' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping Name </div>
-              <div class='col-6'> <input id='manage_user:shipping_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.shipping_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> Shipping Address </div>
-              <div class='col-6'> <input id='manage_user:shipping_address' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.shipping_address' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping City </div>
-              <div class='col-6'> <input id='manage_user:shipping_city' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.shipping_city' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> Shipping State </div>
-              <div class='col-6'> <input id='manage_user:shipping_state' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.shipping_state' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> Country Code </div>
-              <div class='col-6'> <input id='manage_user:shipping_country_code' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.shipping_country_code' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop'>
               <div class='col-4'> Country Name</div>
-              <div class='col-6'> <input id='manage_user:shipping_country_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.shipping_country_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> Shipping ZIP </div>
-              <div class='col-6'> <input id='manage_user:shipping_zip' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.shipping_zip' type='text' class='form-control form-control-sm' placeholder=''> </div>
               <div class='col-2'> </div>
             </div>
 
+            <!--
             <div class='row rowpop'>
               <div class='col-4'> Group </div>
               <div class='col-6'>
@@ -134,6 +143,16 @@
               </div>
               <div class='col-2'> </div>
             </div>
+            -->
+
+            <div class='row rowpop'>
+
+              <div class='col-4'>
+                <button type='button' class='btn btn-secondary btn-sm' id='ui.manage_user.update_user'>Update User</button>
+              </div>
+              <div class='col-8'></div>
+
+            </div>
 
           </div>
 
@@ -168,7 +187,7 @@
             <div class='row rowpop'>
 
               <div class='col-4'>
-                <button type='button' class='btn btn-secondary btn-sm'>Reset Password</button>
+                <button type='button' class='btn btn-secondary btn-sm' id='ui.manage_user.reset_password'>Reset Password</button>
               </div>
               <div class='col-8'></div>
 
@@ -194,18 +213,18 @@
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> CardId </div>
-              <div class='col-6'> <input id='manage_user:logical_card_id' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.logical_card_id' type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
 
             <div class='row rowpop row'>
               <div class='col-4'> Mag Stripe </div>
-              <div class='col-6'> <input id='manage_user:mag_token' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.mag_token' type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
             <div class='row rowpop row-shade'>
               <div class='col-4'> RFID </div>
-              <div class='col-6'> <input id='manage_user:rfid_token' type='text' class='form-control form-control-sm' placeholder=''> </div>
+              <div class='col-6'> <input id='ui.manage_user.rfid_token' type='text' class='form-control form-control-sm' placeholder=''> </div>
             </div>
 
             <!--
@@ -217,7 +236,7 @@
 
             <div class='row rowpop'>
               <div class='col-4'>
-                <button id='manage_user:button_associate_card' type='button' class='btn btn-secondary btn-sm'>Associate Card to User</button>
+                <button id='ui.manage_user.associate_card' type='button' class='btn btn-secondary btn-sm'>Associate Card to User</button>
               </div>
               <div class='col-8'></div>
             </div>
@@ -233,7 +252,7 @@
 
         <!-- user managed cards block -->
         <div class='row'>
-          <div id='manage_user:list_cards' class='col-10'>
+          <div id='ui.manage_user.list_cards' class='col-10'>
 
             <div class='row rowpop'>
               <div class='col-6'> <h3> User Owned Cards </h3> </div>