Include profile button in the UI

Add shortcut to secure-index for each profile
thevickypedia · Mar 11, 2024 · 825c2a7 · 825c2a7
1 parent 9f0ec95
commit 825c2a7
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 57 deletions.
diff --git a/src/routes/auth.rs b/src/routes/auth.rs
@@ -169,9 +169,10 @@ pub async fn home(request: HttpRequest,
         .body(
             listing.render(minijinja::context!(
                 files => listing_page.files,
+                user => auth_response.username,
+                secure_index => constant::SECURE_INDEX,
                 directories => listing_page.directories,
-                secured_directories => listing_page.secured_directories,
-                USER => auth_response.username
+                secured_directories => listing_page.secured_directories
             )).unwrap()
         )
 }

diff --git a/src/routes/media.rs b/src/routes/media.rs
@@ -179,12 +179,14 @@ pub async fn stream(request: HttpRequest,
         let render_path = format!("/media?file={}", url_encode(&filepath));
         let prev = rust_iter.previous.unwrap_or_default();
         let next = rust_iter.next.unwrap_or_default();
+        let secure_index = constant::SECURE_INDEX.to_string();
         let mut context_builder = vec![
             ("media_title", &__filename),
             ("path", &render_path),
             ("previous", &prev),
             ("next", &next),
-            ("USER", &auth_response.username)
+            ("user", &auth_response.username),
+            ("secure_index", &secure_index)
         ].into_iter().collect::<HashMap<_, _>>();
         if constant::IMAGE_FORMATS
             .contains(&render_path.split('.')
@@ -218,13 +220,23 @@ pub async fn stream(request: HttpRequest,
         let child_dir = __target.iter().last().unwrap().to_string_lossy().to_string();
         let listing_page = squire::content::get_dir_stream_content(&__target_str, &child_dir, &config.file_formats);
         let listing = template.get_template("listing").unwrap();
+        let custom_title = if child_dir.ends_with(constant::SECURE_INDEX) {
+            format!(
+                "<i class='fa-solid fa-lock'></i>&nbsp;&nbsp;{}",
+                child_dir.strip_suffix(&format!("_{}", constant::SECURE_INDEX)).unwrap()
+            )
+        } else {
+            child_dir.clone()
+        };
         return HttpResponse::build(StatusCode::OK)
             .content_type("text/html; charset=utf-8")
             .body(listing.render(minijinja::context!(
-                custom_title => child_dir,
+                custom_title => custom_title,
                 files => listing_page.files,
+                user => auth_response.username,
+                secure_index => constant::SECURE_INDEX,
                 directories => listing_page.directories,
-                USER => auth_response.username
+                secured_directories => listing_page.secured_directories
             )).unwrap());
     }
     log::error!("Something went really wrong");

diff --git a/src/routes/upload.rs b/src/routes/upload.rs
@@ -109,5 +109,8 @@ pub async fn upload_files(request: HttpRequest,
     let landing = template.get_template("upload").unwrap();
     HttpResponse::build(http::StatusCode::OK)
         .content_type("text/html; charset=utf-8")
-        .body(landing.render(minijinja::context!(USER => auth_response.username)).unwrap())
+        .body(landing.render(minijinja::context!(
+            user => auth_response.username,
+            secure_index => constant::SECURE_INDEX
+        )).unwrap())
 }
diff --git a/src/squire/authenticator.rs b/src/squire/authenticator.rs
@@ -219,7 +219,7 @@ pub fn verify_secure_index(path: &PathBuf, username: &String) -> bool {
         if child.ends_with(constant::SECURE_INDEX) && child != format!("{}_{}", username, constant::SECURE_INDEX) {
             let user_dir = child
                 .strip_suffix(constant::SECURE_INDEX).unwrap()
-                .strip_suffix("_").unwrap();
+                .strip_suffix('_').unwrap();
             log::warn!("'{}' tried to access {:?} that belongs to '{}'", username, path, user_dir);
             return false;
         }

diff --git a/src/squire/content.rs b/src/squire/content.rs
@@ -95,7 +95,7 @@ fn get_file_font(extn: &str) -> String {
 /// # Returns
 ///
 /// A string with the `fa` value based on the folder depth.
-fn get_folder_font(structure: &PathBuf,
+fn get_folder_font(structure: &Path,
                    auth_response: &authenticator::AuthToken) -> HashMap<String, String> {
     let directory = structure.to_string_lossy().to_string();
     let mut entry_map = HashMap::new();
@@ -118,7 +118,7 @@ fn get_folder_font(structure: &PathBuf,
     } else {
         entry_map.insert("font".to_string(), "fa fa-folder".to_string());
     }
-    return entry_map
+    entry_map
 }
 
 /// Retrieves content information for all streams.
@@ -163,7 +163,7 @@ pub fn get_all_stream_content(config: &settings::Config, auth_response: &authent
                         let skimmed = path.components().rev().skip(1)
                             .collect::<Vec<_>>().iter().rev()
                             .collect::<PathBuf>();
-                        let entry_map = get_folder_font(&skimmed, &auth_response);
+                        let entry_map = get_folder_font(&skimmed, auth_response);
                         if payload.directories.contains(&entry_map) || entry_map.is_empty() { continue; }
                         if payload.secured_directories.contains(&entry_map) || entry_map.is_empty() { continue; }
                         if entry_map.get("font").unwrap_or(&"".to_string()) == "fa-solid fa-lock" {

diff --git a/src/templates/index.rs b/src/templates/index.rs
@@ -28,8 +28,11 @@ pub fn get_content() -> String {
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/solid.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/regular.min.css">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
+        * {
+            font-family: 'Ubuntu', 'PT Serif', sans-serif;
+        }
         body {
-            font-family: 'Arial', sans-serif;
             margin: 0;
             padding: 0;
             background-color: #151515;
@@ -67,7 +70,6 @@ pub fn get_content() -> String {
             margin-top: 10px;
             color: #000000;
             font-size: large;
-            font-family: 'Courier New', sans-serif;
             font-weight: normal;
         }
 

diff --git a/src/templates/landing.rs b/src/templates/landing.rs
@@ -31,6 +31,11 @@ pub fn get_content() -> String {
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/solid.css">
     <!-- Button CSS -->
     <style>
+        /* Google fonts with a backup alternative */
+        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
+        * {
+            font-family: 'Ubuntu', 'PT Serif', sans-serif;
+        }
         .iter {
             border: none;
             padding: 10px 14px;
@@ -64,19 +69,10 @@ pub fn get_content() -> String {
             font-size: 16px;
             cursor: pointer;
         }
-        .logout {
-            position: absolute;
-            top: 3.8%;
-            right: 30px;
-            border: none;
-            padding: 10px 14px;
-            font-size: 16px;
-            cursor: pointer;
-        }
         body {
             background-color: #151515;
         }
-        title, h1, h2, h3, h4, h5, h6, p {
+        title, h1, h2, h3, h4, h5, h6, p, a {
             color: #f0f0f0;
         }
         button {
@@ -91,9 +87,6 @@ pub fn get_content() -> String {
     </style>
     <!-- Container, title and body CSS -->
     <style>
-        body {
-            font-family: 'PT Serif', serif;
-        }
         h1 {
             text-align: center;
         }
@@ -149,6 +142,40 @@ pub fn get_content() -> String {
             }
         }
     </style>
+    <style>
+        .dropbtn {
+            position: absolute;
+            top: 3.8%;
+            right: 30px;
+            padding: 10px 24px;
+            font-size: 16px;
+            border: none;
+            cursor: pointer;
+        }
+        .dropdown {
+            position: absolute;
+            top: 3.8%;
+            right: 30px;
+            padding: 10px 24px;
+            display: inline-block;
+        }
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            top: 40px;  /* Distance from the user icon button */
+            right: 30px;
+            width: 160px;
+            min-width: auto;
+            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);  /* Basically, black with 20% opacity */
+            z-index: 1;
+        }
+        .dropdown-content a {
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+        }
+        .dropdown:hover .dropdown-content {display: block;}
+    </style>
     <noscript>
         <style>
             body {
@@ -173,9 +200,14 @@ pub fn get_content() -> String {
     <button class="upload" onclick="upload()"><i class="fa-solid fa-cloud-arrow-up"></i> Upload</button>
     <button class="home" onclick="goHome()"><i class="fa fa-home"></i> Home</button>
     <button class="back" onclick="goBack()"><i class="fa fa-backward"></i> Back</button>
-    <!-- todo: convert this to a user icon and expose logout button as a pop up menu -->
-    <button class="logout" onclick="logOut()" title="Logged in as {{ USER }}"><i class="fa fa-sign-out"></i> Logout</button>
-    <br><br>
+    <div class="dropdown">
+        <button class="dropbtn"><i class="fa fa-user"></i></button>
+        <div class="dropdown-content">
+            <a onclick="goSecure()" style="cursor: pointer;"><i class="fa-solid fa-user-lock"></i> {{ user }}</a>
+            <a onclick="logOut()" style="cursor: pointer"><i class="fa fa-sign-out"></i> logout</a>
+        </div>
+    </div>
+    <br><br><br>
     <h1>{{ media_title }}</h1>
     {% if render_image %}
         <img id="image-source" src="" onclick="fullScreen()">
@@ -248,12 +280,15 @@ pub fn get_content() -> String {
         {% endif %}
     </script>
     <script>
-        function logOut() {
-            window.location.href = window.location.origin + "/logout";
-        }
         function goHome() {
             window.location.href = window.location.origin + "/home";
         }
+        function goSecure() {
+            window.location.href = window.location.origin + '/stream/{{ user }}_{{ secure_index }}';
+        }
+        function logOut() {
+            window.location.href = window.location.origin + "/logout";
+        }
         function upload() {
             window.location.href = window.location.origin + "/upload";
         }

diff --git a/src/templates/listing.rs b/src/templates/listing.rs
@@ -30,6 +30,11 @@ pub fn get_content() -> String {
     <link rel="stylesheet" type="text/css" href="https://thevickypedia.github.io/open-source/nightmode/night.css">
     <!-- Button CSS -->
     <style>
+        /* Google fonts with a backup alternative */
+        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
+        * {
+            font-family: 'Ubuntu', 'PT Serif', sans-serif;
+        }
         body {
             margin-left: 1%;  /* 1% away from left corner */
             padding: 0.5%  /* 0.5% away from any surrounding elements */
@@ -61,15 +66,40 @@ pub fn get_content() -> String {
             font-size: 16px;
             cursor: pointer;
         }
-        .logout {
+    </style>
+    <style>
+        .dropbtn {
             position: absolute;
             top: 3.8%;
             right: 30px;
-            border: none;
-            padding: 10px 14px;
+            padding: 10px 24px;
             font-size: 16px;
+            border: none;
             cursor: pointer;
         }
+        .dropdown {
+            position: absolute;
+            top: 3.8%;
+            right: 30px;
+            padding: 10px 24px;
+            display: inline-block;
+        }
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            top: 40px;  /* Distance from the user icon button */
+            right: 30px;
+            width: 160px;
+            min-width: auto;
+            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);  /* Basically, black with 20% opacity */
+            z-index: 1;
+        }
+        .dropdown-content a {
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+        }
+        .dropdown:hover .dropdown-content {display: block;}
     </style>
     <!-- Title list CSS -->
     <style>
@@ -95,9 +125,6 @@ pub fn get_content() -> String {
             text-align: center;
             margin-right: 0.5rem;
         }
-        body {
-            font-family: 'PT Serif', serif;
-        }
     </style>
 </head>
 <noscript>
@@ -121,18 +148,23 @@ pub fn get_content() -> String {
 </noscript>
 <body translate="no">
     <div class="toggler fa fa-moon-o"></div>
-    <br><br>
+    <button class="upload" onclick="upload()"><i class="fa-solid fa-cloud-arrow-up"></i> Upload</button>
+    <button class="home" onclick="goHome()"><i class="fa fa-home"></i> Home</button>
+    <button class="back" onclick="goBack()"><i class="fa fa-backward"></i> Back</button>
+    <div class="dropdown">
+        <button class="dropbtn"><i class="fa fa-user"></i></button>
+        <div class="dropdown-content">
+            <a onclick="goSecure()" style="cursor: pointer;"><i class="fa-solid fa-user-lock"></i> {{ user }}</a>
+            <a onclick="logOut()" style="cursor: pointer"><i class="fa fa-sign-out"></i> logout</a>
+        </div>
+    </div>
+    <br><br><br><br>
     {% if custom_title %}
         <h1>{{ custom_title }}</h1>
     {% else %}
         <h1>RuStream - Self-hosted Streaming Engine</h1>
     {% endif %}
     <hr>
-    <button class="upload" onclick="upload()"><i class="fa-solid fa-cloud-arrow-up"></i> Upload</button>
-    <button class="home" onclick="goHome()"><i class="fa fa-home"></i> Home</button>
-    <button class="back" onclick="goBack()"><i class="fa fa-backward"></i> Back</button>
-    <!-- todo: convert this to a user icon and expose logout button as a pop up menu -->
-    <button class="logout" onclick="logOut()" title="Logged in as {{ USER }}"><i class="fa fa-sign-out"></i> Logout</button>
     {% if dir_name or files or directories or secured_directories %}
         <!-- Display directory name if within subdir -->
         {% if dir_name %}
@@ -166,6 +198,9 @@ pub fn get_content() -> String {
         function goHome() {
             window.location.href = window.location.origin + "/home";
         }
+        function goSecure() {
+            window.location.href = window.location.origin + '/stream/{{ user }}_{{ secure_index }}';
+        }
         function logOut() {
             window.location.href = window.location.origin + "/logout";
         }

diff --git a/src/templates/logout.rs b/src/templates/logout.rs
@@ -21,6 +21,11 @@ pub fn get_content() -> String {
     <link rel="icon" href="https://thevickypedia.github.io/open-source/images/logo/actix.ico">
     <link rel="apple-touch-icon" href="https://thevickypedia.github.io/open-source/images/logo/actix.png">
     <style>
+        /* Google fonts with a backup alternative */
+        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
+        * {
+            font-family: 'Ubuntu', 'PT Serif', sans-serif;
+        }
         img {
             display: block;
             margin-left: auto;
@@ -30,7 +35,6 @@ pub fn get_content() -> String {
         :is(h1, h2, h3, h4, h5, h6) {
             text-align: center;
             color: #F0F0F0;
-            font-family: 'Courier New', sans-serif;
         }
 
         button {

diff --git a/src/templates/session.rs b/src/templates/session.rs
@@ -22,6 +22,11 @@ pub fn get_content() -> String {
     <link rel="icon" href="https://thevickypedia.github.io/open-source/images/logo/actix.ico">
     <link rel="apple-touch-icon" href="https://thevickypedia.github.io/open-source/images/logo/actix.png">
     <style>
+        /* Google fonts with a backup alternative */
+        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
+        * {
+            font-family: 'Ubuntu', 'PT Serif', sans-serif;
+        }
         img {
             display: block;
             margin-left: auto;
@@ -31,7 +36,6 @@ pub fn get_content() -> String {
         :is(h1, h2, h3, h4, h5, h6) {
             text-align: center;
             color: #F0F0F0;
-            font-family: 'Courier New', sans-serif;
         }
 
         button {