Merge pull request #36 from jhotmann/1.0.0-tweaks

Validation of device initials before add/edit

Author: jhotmann

src/public/javascripts/user.js

@@ -17,4 +17,14 @@ $(() => {
       $('#password2').addClass('is-invalid');
     }
   });
+
+  document.body.addEventListener('invalidInitials', () => {
+    $('#initials-feedback').text('Initials taken');
+    $('#initials').addClass('is-invalid');
+  });
+
+  const addEditModal = new bootstrap.Modal(document.getElementById('add-edit-device-modal'));
+  document.body.addEventListener('deviceSave', () => {
+    addEditModal.hide();
+  });
 });

src/routes/user.js

@@ -53,13 +53,17 @@ router.post('/add-device', upload.single('avatar'), userMw.one, async (req, res)
     fs.unlink(req.file.path, () => { console.log('Temp file deleted') });
   }
   const existingInitials = await Device.findOne({ initials: req.body.initials });
-  if (existingInitials) return res.send('Initials Invalid');
+  if (existingInitials) {
+    res.header('HX-Trigger', 'invalidInitials');
+    return res.status(400).send('Initials Invalid');
+  }
   const device = await Device.create(req.body.deviceName, req.body.initials, card, req.User);
   if (device) {
     if (req.envSettings.mqttEnabled) publishDeviceCards(req.User.username, req.User.friends, [ device ]);
   }
-  const userDevices = await Device.getByUserId(req.User._id);
-  res.render('user-devices.html', { userDevices });
+  req.pageData.userDevices = await Device.getByUserId(req.User._id);
+  res.header('HX-Trigger', 'deviceSave');
+  res.render('user-devices.html', req.pageData);
 });
 
 router.get('/edit-device/:deviceId', userMw.one, devMw.one, async (req, res) => {
@@ -82,11 +86,17 @@ router.post('/edit-device/:deviceId', upload.single('avatar'), userMw.one, devMw
     fs.unlink(req.file.path, () => { console.log('Temp file deleted') });
   }
   if (req.Device && req.Device.userId === req.User._id) {
+    const existingInitials = await Device.findOne({ initials: req.body.initials });
+    if (existingInitials && existingInitials._id !== req.Device._id) {
+      res.header('HX-Trigger', 'invalidInitials');
+      return res.status(400).send('Initials Invalid');
+    }
     req.Device = await req.Device.update(req.body.deviceName, req.body.initials, card, req.User);
     await CardSeen.update({ deviceId: req.params.deviceId }, { $set: { seen: false } }); // Force friends to re-download card data (HTTP mode)
     if (req.envSettings.mqttEnabled) publishDeviceCards(req.User.username, req.User.friends, [ req.Device ]); // Send card (MQTT mode)
   }
   req.pageData.userDevices = await Device.getByUserId(req.User._id);
+  res.header('HX-Trigger', 'deviceSave');
   res.render('user-devices.html', req.pageData);
 });
 
@@ -96,8 +106,8 @@ router.get('/delete-device/:deviceId', userMw.one, devMw.one, async (req, res) =
     await req.Device.remove();
     await CardSeen.remove({ deviceId: req.params.deviceId }, { multi: true });
   }
-  const userDevices = await Device.getByUserId(req.User._id);
-  res.render('user-devices.html', { userDevices });
+  req.pageData.userDevices = await Device.getByUserId(req.User._id);
+  res.render('user-devices.html', req.pageData);
 });
 
 // !!!! friends !!!!

src/views/form-add-edit-device.html

@@ -17,8 +17,8 @@ <h5 class="modal-title" id="create-group-modal-label">{{ "Edit" if deviceData el
       </div>
       <div class="form-floating mt-3">
         <input type="text" class="form-control" id="initials" name="initials" placeholder="AA" pattern="[A-Z]{2}" value="{{ deviceData.initials }}" required>
-        <label for="initials">Initials</label>
-        <div class="invalid-feedback">
+        <label for="initials">Initials (two uppercase letters)</label>
+        <div id="initials-feedback" class="invalid-feedback">
           Initials must be two uppercase letters
         </div>
       </div>
@@ -40,11 +40,10 @@ <h5 class="modal-title" id="create-group-modal-label">{{ "Edit" if deviceData el
       <div class="container pt-3">
         <div class="row justify-items-start">
           <div class="col-3">
-            <button id="device-save" class="btn btn-primary" type="submit" data-bs-dismiss="modal">Save</button>
+            <button id="device-save" class="btn btn-primary" type="submit">Save</button>
           </div>
           {% if deviceData %}
           <div class="col-2">
-            <!--<a id="delete-button" class="btn btn-danger" href="#" role="button" data-bs-dismiss="modal">Delete</a>-->
             <button id="delete-button" class="btn btn-danger" role="button" data-bs-dismiss="modal"
                 hx-get="/user/delete-device/{{ deviceData._id }}" hx-target="#devices-table-body">Delete</button>
           </div>