From 52a7923ee52b935ed998bfb14ba8e002ef2e6ffe Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Tue, 4 Apr 2023 17:46:07 +0000
Subject: [PATCH] Add remember me option to login page

---
 gallery/auth.py                               |  3 ++-
 gallery/static/js/post/login.js               | 20 ++++++++++++++++++-
 .../static/sass/components/buttons/block.sass | 15 ++++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/gallery/auth.py b/gallery/auth.py
index 7121d66..6872c7e 100644
--- a/gallery/auth.py
+++ b/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'])
diff --git a/gallery/static/js/post/login.js b/gallery/static/js/post/login.js
index f402e45..10209a4 100644
--- a/gallery/static/js/post/login.js
+++ b/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',
@@ -129,7 +147,7 @@ function showRegister() {
     registerForm.appendChild(emailInput);
     registerForm.appendChild(passwordInput);
     registerForm.appendChild(passwordInputRepeat);
-
+    
     popUpShow(
         'Who are you?',
         'Already have an account? <span class="link" onclick="showLogin()">Login!</span>',
diff --git a/gallery/static/sass/components/buttons/block.sass b/gallery/static/sass/components/buttons/block.sass
index 78e92c6..2a7f772 100644
--- a/gallery/static/sass/components/buttons/block.sass
+++ b/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