Merge pull request '2601/ui-imprv - UI Improvements, Code Cleanup' (#2) from 2601a/ui-imprv into main

Reviewed-on: #2

app.py

@@ -11,7 +11,6 @@ from utils import redirect, dbload, dbsave, udbload, udbsave
 from werkzeug.exceptions import RequestEntityTooLarge
 from werkzeug.utils import secure_filename
 
-import sys
 import os
 import random
 import threading
@@ -39,32 +38,51 @@ def index():
 
 @app.route('/dashboard')
 def dashboard():
+    # Load Databases
+    db = dbload()
+    udb = udbload()
+    
+    # Check if user is a guest
     if session.get('loggedIn', False) == False:
         flash('You must be signed in to view the dashboard!', 'error')
         return redirect(url_for('upload'))
-    db = dbload()
-    udb = udbload()
+    
+    # Get user quota, usage, and files
     username = session.get('username')
     userfiles = []
     quota_usage_gb = 0
+    
     if not username:
         flash('An error occurred. Please sign in again.', 'error')
         session['loggedIn'] = False
         session.pop('username', None)
         return redirect(url_for('upload'))
+    
     for file in db['files']:
         if db['files'][file].get('owner') == username:
             db['files'][file]['file'] = file
             db['files'][file]['code'] = file.split('_')[-1]
             userfiles.append(db['files'][file])
+            
     for userfile in userfiles:
         usf_mb = userfile['size_megabytes']
         if usf_mb:
             quota_usage_gb += usf_mb / 1024
+            
     quota_usage_gb = round(quota_usage_gb, 1)
-    return render_template('dashboard.html', files=userfiles, username=username, quota_gb=udb[[user['username'] for user in udb].index(username)]['quota_gb'], quota_usage=quota_usage_gb)
+    
+    # Render template with variables
+    return render_template(
+        'dashboard.html',
+        files=userfiles,
+        username=username,
+        quota_gb=udb[[user['username'] for user in udb].index(username)]['quota_gb'],
+        quota_usage=quota_usage_gb
+    )
+
 @app.route('/logout')
 def logout():
+    # Sign out user and redirect to upload page
     session['loggedIn'] = False
     session.pop('username', None)
     flash('Successfully signed out!', 'info')
@@ -72,43 +90,53 @@ def logout():
 
 @app.route('/login', methods=['GET', 'POST'])
 def login():
+    # Load User Database (UDB)
     udb = udbload()
     
     if request.method == 'GET':
         return render_template('login.html')
     if request.method == 'POST':
+        # Get data from form
         username = request.form.get('username')
         password = request.form.get('password')
 
+        # Check if user exists and password matches, log them in
         for user in udb:
             if user['username'] == username and user['password'] == password:
                 session['loggedIn'] = True
                 session['username'] = username
                 flash('Successfully signed in!', 'info')
                 return redirect(url_for('upload'))
+    
+    # If still here, login failed
     flash('Invalid username or password!', 'error')
     return redirect(url_for('login'))
 
 @app.route('/register', methods=['GET', 'POST'])
 def register():
+    # Load User Database (UDB)
     udb = udbload()
     
     if request.method == 'GET':
         return render_template('register.html')
     if request.method == 'POST':
+        # Get data from form
         username = request.form.get('username')
         password = request.form.get('password')
 
+        # Check if username is already taken
         for user in udb:
             if user['username'] == username:
                 flash('Username already taken!', 'error')
                 return redirect(url_for('register'))
         
+        # Create new user with default quota of 3GB
         udb.append({
             'username': username,
             'password': password,
             'quota_gb': 3
         })
+        
         udbsave(udb)
         flash('Successfully registered! You can now sign in.', 'info')
         return redirect(url_for('login'))

static/script.js

@@ -19,6 +19,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     const fileInput = document.getElementById('fileUpload');
     const progress = document.getElementById('uploadProgress');
+    const progressContainer = document.getElementById('uploadProgressContainer');
     const progressText = document.getElementById('uploadProgressText');
     const uploadBtn = document.getElementById('uploadBtn');
 
@@ -42,8 +43,10 @@ document.addEventListener('DOMContentLoaded', function() {
             if (ev.lengthComputable) {
                 const percent = Math.round((ev.loaded / ev.total) * 100);
                 if (progress) {
-                    progress.style.display = 'block';
-                    progress.value = percent;
+                    if (progressContainer) progressContainer.style.display = 'block';
+                    progress.style.width = percent + '%';
+                    progress.setAttribute('aria-valuenow', percent);
+                    progress.textContent = percent + '%';
                 }
                 if (progressText) {
                     progressText.style.display = 'block';
@@ -76,13 +79,18 @@ document.addEventListener('DOMContentLoaded', function() {
                 } catch (e) {
                     window.location.href = '/upload';
                     return;
-                } finally {
+                    } finally {
                     if (uploadBtn) {
                         uploadBtn.disabled = false;
                         uploadBtn.classList.remove('yellowBtn');
                         uploadBtn.value = 'Upload';
                     }
-                    if (progress) { progress.style.display = 'none'; progress.value = 0; }
+                    if (progress) {
+                        if (progressContainer) progressContainer.style.display = 'none';
+                        progress.style.width = '0%';
+                        progress.setAttribute('aria-valuenow', 0);
+                        progress.textContent = '0%';
+                    }
                     if (progressText) { progressText.style.display = 'none'; progressText.textContent = '0%'; }
                     // clear file input and reusable checkbox after successful upload
                     if (fileInput) fileInput.value = '';
@@ -110,7 +118,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 uploadBtn.value = 'Upload';
             }
             if (fileInput) fileInput.value = '';
-            if (progress) { progress.style.display = 'none'; progress.value = 0; }
+            if (progress) {
+                if (progressContainer) progressContainer.style.display = 'none';
+                progress.style.width = '0%';
+                progress.setAttribute('aria-valuenow', 0);
+                progress.textContent = '0%';
+            }
             if (progressText) progressText.style.display = 'none';
         });
 

static/styles.css

@@ -35,14 +35,15 @@ body,html {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    width: 50%;
+    width: 80%;
     border: 1px solid rgb(40, 40, 40);
     padding-bottom: 40px;
+    padding: 50px;
 }
 
 .form-section {
     padding: 15px 0 0 15px;
-    width: 50%;
+    width: 100%;
     color: var(--light);
     flex-shrink: 0;
 }
@@ -116,6 +117,8 @@ button[type='button']:hover,
     display: flex;
     flex-direction: column;
     gap: 15px;
+    padding: 10px;
+    
 }
 .flashes li {
     list-style-type: none;

templates/upload.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,58 +8,87 @@
     <title>ADrive Share</title>
     <script src="https://kit.fontawesome.com/972393379b.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
+
 <body>
     <div class="app">
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
-            <ul class="flashes">
-                {% for category, message in messages %}
-                <!-- category: message, error, info, warning -->
-                    <li class="{{ category }}"><strong>{{ message }}</strong></li>
-                {% endfor %}
-            </ul>
+        <ul class="flashes">
+            {% for category, message in messages %}
+            <!-- category: message, error, info, warning -->
+            {% if category == 'message' %}
+                {% set category = 'primary' %}
+            {% endif %}
+            {% if category == 'error' %}
+                {% set category = 'danger' %}
+            {% endif %}
+            {% if category == 'info' %}
+                {% set category = 'info' %}
+            {% endif %}
+            {% if category == 'warning' %}
+                {% set category = 'warning' %}
+            {% endif %}
+            <li class="alert alert-{{ category }}">{{ message }}</li>
+            {% endfor %}
+        </ul>
         {% endif %}
         {% endwith %}
 
         <div class="form-section">
             <form id="uploadForm" action="/sendfile" method="post" enctype="multipart/form-data">
                 {% if loggedIn %}
-                <h4>You are currently logged in as {{ username }}.</h4>
+                <h1>ADrive File Sharing <span class="badge text-bg-primary">{{ username }}</span></h1>
                 {% else %}
-                <h4>You are currently not logged in.</h4>
+                <h1>ADrive File Sharing <span class="badge text-bg-primary">Guest</span></h1>
                 {% endif %}
                 <span style="font-size: 20px;">
-                    <i class="fa-solid fa-server fa-xs" style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
-                    <span id="mirrorText">Finding Nearby Mirror</span> <i class="fa-solid fa-circle-dot fa-beat-fade fa-2xs" style="color: #ff9500;" id="mirrorLogo"></i>
+                    <i class="fa-solid fa-server fa-xs"
+                        style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
+                    <span id="mirrorText">Finding Nearby Mirror</span> <i
+                        class="fa-solid fa-circle-dot fa-beat-fade fa-2xs" style="color: #ff9500;" id="mirrorLogo"></i>
                 </span>
                 <span style="font-size: 20px;">
-                    <i class="fa-solid fa-server fa-xs" style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
+                    <i class="fa-solid fa-server fa-xs"
+                        style="line-height: 25px; font-size: 15px; display: inline-block;"></i>
                     Location Not Found <i class="fa-solid fa-circle-dot fa-2xs" style="color: #c10101;"></i>
                 </span>
-                <input type="file" name="file" id="fileUpload" required aria-required>
+                <input type="file" name="file" id="fileUpload" class="form-control" required aria-required>
                 <input type="hidden" id="quotaGB" value="{{ quota_gb }}">
                 <input type="hidden" id="quotaUsedGB" value="{{ quota_usage }}">
-                <progress id="uploadProgress" value="0" max="100" style="display:none;width:100%;margin-top:8px"></progress>
-                <div id="uploadProgressText" style="display:none;font-size:13px;margin-top:4px">0%</div>
-                <div style="display: flex; flex-direction: row;">
-                    <input type="checkbox" name="reusable" style="display: inline-block;">
-                    <span>Reusable?</span>
+                    <div class="progress" id="uploadProgressContainer" style="display:none;width:100%;margin-top:8px">
+                        <div id="uploadProgress" class="progress-bar bg-success" role="progressbar" style="width:0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+                    </div>
+                    <div id="uploadProgressText" style="display:none;font-size:13px;margin-top:4px">0%</div>
+                <div class="input-group mb-3">
+                    <div class="input-group-text">
+                        <input class="form-check-input mt-0" type="checkbox" value="" name="reusable"
+                            aria-label="Checkbox for following text input" style="border: 1px solid rgb(106, 106, 106);">
+                        <label for="reusable" style="margin-left: 6px; margin-bottom: 0;">Reusable
+                            Link</label>
+                    </div>
                 </div>
-                <input type="submit" value="Upload" id="uploadBtn" onclick="uploadAnim()" style="transition-duration: 400ms;">
+                <input type="submit" class="" value="Upload" id="uploadBtn" onclick="uploadAnim()"
+                    style="transition-duration: 400ms;">
             </form>
-            
+
             <form>
                 <input type="text" id="codeInput">
-                <button type="button" value="Download" onclick="downloadClick()">Download</button>
+                <button type="button" value="Download" class="btn btn-primary" onclick="downloadClick()">Download</button>
             </form>
             {% if not loggedIn %}
-            <a href="/login" class="sign-in-button" style="text-decoration: none; background: rgb(0, 81, 139)">Sign In</a>
-            <a href="/register" class="sign-in-button" style="text-decoration: none; background: rgb(32, 0, 139)">Register</a><br> 
-            <p style="color: gray; font-size: 11px; text-align: center;">Signing in is not required. You can at any time register and sign in to manage your existing codes for free. You can manage up to 1GB of files.</p>
+            <a href="/login" class="sign-in-button" style="text-decoration: none; background: rgb(0, 81, 139)">Sign
+                In</a>
+            <a href="/register" class="sign-in-button"
+                style="text-decoration: none; background: rgb(32, 0, 139)">Register</a><br><br>
+            <p style="color: gray; font-size: 11px; text-align: center;">Signing in is not required. You can at any time
+                register and sign in to manage your existing codes for free. You can manage up to 1GB of files.</p>
             {% else %}
-            <a href="/dashboard" class="sign-in-button" style="text-decoration: none; background: blue">View Dashboard</a>
-            <a href="/logout" class="sign-in-button" style="text-decoration: none; background: rgb(79, 92, 178)">Sign Out</a>
+            <a href="/dashboard" class="sign-in-button" style="text-decoration: none; background: blue">View
+                Dashboard</a>
+            <a href="/logout" class="sign-in-button" style="text-decoration: none; background: rgb(79, 92, 178)">Sign
+                Out</a>
             {% endif %}
 
         </div>
@@ -69,7 +99,7 @@
     <script>
         //document.getElementById("uploadBtn").addEventListener("click", uploadAnim);
 
-        function downloadClick(){
+        function downloadClick() {
             const codeEl = document.getElementById("codeInput");
             const code = codeEl.value;
             // clear input when clicked
@@ -95,16 +125,16 @@
 
     <script>
         // Client-side quota check before uploading large files
-        (function(){
+        (function () {
             const fileInput = document.getElementById('fileUpload');
             const uploadBtn = document.getElementById('uploadBtn');
             const quotaGB = parseFloat(document.getElementById('quotaGB').value) || 0;
             const usedGB = parseFloat(document.getElementById('quotaUsedGB').value) || 0;
             const remainingGB = Math.max(0, quotaGB - usedGB);
 
-            function ensureFlashesContainer(){
+            function ensureFlashesContainer() {
                 let flashes = document.querySelector('.flashes');
-                if (!flashes){
+                if (!flashes) {
                     flashes = document.createElement('ul');
                     flashes.className = 'flashes';
                     const app = document.querySelector('.app');
@@ -113,12 +143,12 @@
                 return flashes;
             }
 
-            function clearClientFlash(){
+            function clearClientFlash() {
                 const flashes = document.querySelectorAll('.flashes li.client-quota-warning');
                 flashes.forEach(n => n.remove());
             }
 
-            function showClientFlash(message){
+            function showClientFlash(message) {
                 clearClientFlash();
                 const flashes = ensureFlashesContainer();
                 const li = document.createElement('li');
@@ -129,14 +159,14 @@
                 flashes.prepend(li);
             }
 
-            if (fileInput){
-                fileInput.addEventListener('change', function(e){
+            if (fileInput) {
+                fileInput.addEventListener('change', function (e) {
                     clearClientFlash();
                     uploadBtn.disabled = false;
                     const f = fileInput.files && fileInput.files[0];
                     if (!f) return;
                     const fileGB = f.size / (1024 * 1024 * 1024);
-                    if (fileGB > remainingGB){
+                    if (fileGB > remainingGB) {
                         showClientFlash('You do not have sufficient quota to manage this file. If you choose to upload this file, you will not be able to manage it through your dashboard.');
                         // still allow upload; server will accept but will not set owner when quota insufficient
                     } else {
@@ -148,5 +178,10 @@
     </script>
 
     <script src="{{ url_for('static', filename='script.js') }}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
+    crossorigin="anonymous"></script>
 </body>
-</html>
+
+</html>
+