Update unlock page

public/style.css

@@ -24,7 +24,7 @@ html {
     }
     #lightgallery img {
         width: 100%;
-        height: auto;
+        height: 100%;
         object-fit: cover;
         object-position: center;
     }

src/immich.ts

@@ -37,6 +37,10 @@ class Immich {
       if (!sharedLinkRes.valid) {
         // This isn't a valid request - check the console for more information
         res.status(404).send()
+      } else if (sharedLinkRes.passwordRequired && request.password) {
+        // Invalid password
+        log('Invalid password for key ' + request.key)
+        res.status(401).send()
       } else if (sharedLinkRes.passwordRequired) {
         // Password required - show the visitor the password page
         // `req.params.key` should already be sanitised at this point, but it never hurts to be explicit
@@ -159,7 +163,11 @@ class Immich {
     params = Object.fromEntries(Object.entries(params).filter(([_, value]) => !!value))
     let query = ''
     // Safely encode query parameters
-    if (Object.entries(params).length) query = '?' + (new URLSearchParams(params as { [key: string]: string })).toString()
+    if (Object.entries(params).length) {
+      query = '?' + (new URLSearchParams(params as {
+        [key: string]: string
+      })).toString()
+    }
     return baseUrl + query
   }
 
@@ -167,7 +175,7 @@ class Immich {
    * Return the image data URL for a photo
    */
   photoUrl (key: string, id: string, size?: ImageSize, password?: string) {
-    const params = { key }
+    const params = { key, size }
     if (password) {
       Object.assign(params, encrypt(password))
     }

views/password.ejs

@@ -41,20 +41,19 @@
 </main>
 <script src="/web.js"></script>
 <script>
-  function submitForm (formElement) {
+  async function submitForm (formElement) {
     const formData = new FormData(formElement)
-
-    fetch('/unlock', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(Object.fromEntries(formData.entries()))
-    })
-      .then(response => response.text())
-      .then(html => {
-        document.documentElement.innerHTML = html
-        initLightGallery() // from web.js
+    try {
+      const res = await fetch('/unlock', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(Object.fromEntries(formData.entries()))
       })
-      .catch(error => console.error('Error:', error))
+      if (res.status === 200) {
+        document.documentElement.innerHTML = await res.text()
+        initLightGallery() // from web.js
+      }
+    } catch (e) { }
   }
 
   document.getElementById('unlock')