Add remember me option to login page

gallery/auth.py

@@ -30,6 +30,7 @@ def login():
 
     username = request.form['username'].strip()
     password = request.form['password'].strip()
+    remember = True if request.form.get('remember') else False
 
     user = db_session.query(db.Users).filter_by(username=username).first()
 
@@ -40,7 +41,7 @@ def login():
     if error:
         abort(403)
 
-    login_user(user)
+    login_user(user, remember=remember)
 
     logging.info('User %s logged in from %s', username, request.remote_addr)
     flash(['Logged in successfully!', '4'])

gallery/static/js/post/login.js

@@ -30,8 +30,24 @@ function showLogin() {
     passwordInput.placeholder = 'Passywassy';
     passwordInput.id = 'password';
 
+    // Container for remember me checkbox
+    rememberMeSpan = document.createElement('span');
+    rememberMeSpan.classList.add('input-checkbox');
+
+    rememberMeInput = document.createElement('input');
+    rememberMeInput.type = 'checkbox';
+    rememberMeInput.id = 'remember-me';
+
+    rememberMeLabel = document.createElement('label');
+    rememberMeLabel.innerHTML = 'No forgetty me pls';
+    rememberMeLabel.setAttribute('for', 'remember-me');
+
+    rememberMeSpan.appendChild(rememberMeInput);
+    rememberMeSpan.appendChild(rememberMeLabel);
+
     loginForm.appendChild(usernameInput);
     loginForm.appendChild(passwordInput);
+    loginForm.appendChild(rememberMeSpan);
 
     popUpShow(
         'Login!',
@@ -47,6 +63,7 @@ function login(event) {
 
     let formUsername = document.querySelector("#username").value;
     let formPassword = document.querySelector("#password").value;
+    let formRememberMe = document.querySelector("#remember-me").checked;
 
     if (formUsername === "" || formPassword === "") {
         addNotification("Please fill in all fields!!!!", 3);
@@ -57,6 +74,7 @@ function login(event) {
     const formData = new FormData();
     formData.append("username", formUsername);
     formData.append("password", formPassword);
+    formData.append("remember-me", formRememberMe);
 
     fetch('/auth/login', {
         method: 'POST',

gallery/static/sass/components/buttons/block.sass

@@ -57,6 +57,21 @@
     &.black
         @include btn-block($black)
 
+.input-checkbox
+    padding: 0
+    display: flex
+    justify-content: flex-start
+    align-items: center
+    gap: 0.5rem
+
+    position: relative
+
+    label
+        font-size: 1rem
+        font-weight: 600
+        text-align: left
+        
+        color: RGB($fg-white)
 
 .input-block
     padding: 0.5rem 1rem