Lock screen (#132)

black-backdoor · Jan 3, 2025 · fc15a99 · fc15a99
1 parent 4a23d92
commit fc15a99
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 118 deletions.
diff --git a/src/lock/index.html b/src/lock/index.html
@@ -31,27 +31,37 @@
     <script src="/pwa/register.js"></script>
 </head>
 
-<body>
-    <div id="lock-screen">
-        <widget-clock></widget-clock>
+<body data-lock-screen="active">
+    <div id="lock-screen" class="lock-screen">
+        <widget-clock class="lock-screen__clock"></widget-clock>
     </div>
     <div class="menubar">
         <applet-network></applet-network>
         <applet-battery data-content="fill"></applet-battery>
         <applet-clock></applet-clock>
     </div>
-    <div class="container">
-        <img id="avatar" src="/lock/user.svg" alt="user">
-        <h1 id="username">MeOS</h1>
-        <input id="password" type="password" placeholder="Enter Password" autocomplete="current-password" autocorrect="off" autocapitalize="none" spellcheck="false" required>
-        <button id="show-password" title="Show Password"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5c-4.027 0-7.484 2.881-9 7 1.516 4.119 4.973 7 9 7s7.484-2.881 9-7c-1.516-4.119-4.973-7-9-7zm0 10a3 3 0 1 1 3-3 3 3 0 0 1-3 3z" /></svg></button>
+    <div class="lock-screen__element--hidden auth-container">
+        <img id="avatar" class="auth-container__avatar" src="/lock/user.svg" alt="user">
+        <h1 id="username" class="auth-container__username">MeOS</h1>
+        <input
+            id="password"
+            class="auth-container__password" 
+            type="password"
+            placeholder="Enter Password"
+            autocomplete="current-password"
+            autocorrect="off"
+            autocapitalize="none"
+            spellcheck="false"
+            required
+        >
+        <button id="show-password" class="auth-container__show-password" title="Show Password"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5c-4.027 0-7.484 2.881-9 7 1.516 4.119 4.973 7 9 7s7.484-2.881 9-7c-1.516-4.119-4.973-7-9-7zm0 10a3 3 0 1 1 3-3 3 3 0 0 1-3 3z" /></svg></button>
     </div>
     <div class="applets">
         <applet-network></applet-network>
         <applet-battery data-content="fill"></applet-battery>
         <button-power></button-power>
     </div>
-    <div class="users"></div>
+    <div class="lock-screen__element--hidden users"></div>
 </body>
 
 </html>
diff --git a/src/lock/lock-screen.css b/src/lock/lock-screen.css
@@ -2,51 +2,48 @@ body {
     overflow: hidden;
 }
 
-/*
-    .hidden => hide
-    .appear => fade in
-*/
-
-body.hidden > * { display: none;}
-body.hidden #lock-screen { display: block; }
-#lock-screen.hidden { display: none; }
-
-body.appear > * { animation: appear 0.5s ease-out; animation-fill-mode: forwards; }
-@keyframes appear {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+body[data-lock-screen="active"] .lock-screen__element--hidden {
+    display: none;
 }
 
-
-#lock-screen {
+.lock-screen {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    z-index: 9999;
+    z-index: 1000;
+
     /* background: linear-gradient(to right, purple, rgb(35, 192, 204)); */
 }
 
-#lock-screen.top {
+body[data-lock-screen="active"] .lock-screen {
+    display: block;
+}
+
+body[data-lock-screen="hidden"] .lock-screen {
     animation: slideToTop 0.5s ease-out;
     animation-fill-mode: forwards;
 }
+
 @keyframes slideToTop {
     0% {
         transform: translateY(0);
     }
+
     100% {
         transform: translateY(-100vh);
+        display: none;
     }
 }
 
+.lock-screen--force-hidden {
+    display: none;
+}
 
-#lock-screen widget-clock {
+/* content */
+.lock-screen__clock {
+    display: block;
     position: absolute;
     text-align: center;
     user-select: none;

diff --git a/src/lock/lock-screen.js b/src/lock/lock-screen.js
@@ -1,28 +1,34 @@
 const lockScreen = document.getElementById('lock-screen');
+
+const urlParams = new URLSearchParams(window.location.search);
+const isLockScreenSkipped = urlParams.has('skip-lockscreen');
+
+if (isLockScreenSkipped) {
+    document.body.setAttribute("data-lock-screen", "hidden");
+    lockScreen.classList.add('lock-screen--force-hidden');
+}
+
+
+
 const passwordInput = document.getElementById('password');
 
-document.body.classList.add('hidden');
+const lockScreenHide = function () {
+    document.body.setAttribute("data-lock-screen", "hidden");
+    passwordInput.focus();
+};
 
-document.addEventListener('keypress', function(event) {
-    if (lockScreen.classList.contains('hidden')) {
+document.addEventListener('keypress', function (event) {
+    if (document.body.getAttribute('data-lock-screen') === 'hidden') {
         return;
     }
 
     if (event.code === 'Space') {
-        lockScreen.classList.add('top');
-        document.body.classList.remove('hidden');
-        document.body.classList.add('appear');
-        setTimeout(() => { lockScreen.classList.add('hidden'); }, 500);
-        passwordInput.focus();
+        lockScreenHide();
     }
 });
-lockScreen.addEventListener('click', function() {
-    lockScreen.classList.add('top');
-    document.body.classList.remove('hidden');
-    document.body.classList.add('appear');
-    setTimeout(() => { lockScreen.classList.add('hidden'); }, 500);
-    passwordInput.focus();
-}, { once: true });
+lockScreen.addEventListener('click', function () {
+    lockScreenHide();
+});
 
 
 
@@ -62,10 +68,8 @@ lockScreen.addEventListener('touchend', () => {
     const diffX = endX - startX;
     const diffY = endY - startY;
 
-    const show = function() {
-        lockScreen.classList.add('hidden');
-        document.body.classList.remove('hidden');
-        document.body.classList.add('appear');
+    const show = function () {
+        document.body.setAttribute("data-lock-screen", "hidden");
     };
 
     if (Math.abs(diffX) > window.innerWidth / 4) {

diff --git a/src/lock/script.js b/src/lock/script.js
@@ -25,8 +25,8 @@ document.addEventListener('DOMContentLoaded', () => {
         const userElement = document.createElement('div');
         userElement.classList.add('user');
         userElement.innerHTML = `
-            <p class="avatar">${username[0].toUpperCase()}</p>
-            <div class="username">${username}</div>
+            <span class="avatar">${username[0].toUpperCase()}</span>
+            <span class="username">${username}</span>
         `;
         usersElement.appendChild(userElement);
     });