client now fetches user information from Drop server

app.vue

@@ -1,22 +1,26 @@
 <template>
-  <NuxtLayout class="select-none">
+  <NuxtLayout class="select-none w-screen h-screen">
     <NuxtPage />
   </NuxtLayout>
-  {{ state }}
-  <input type="text" v-model="debugLocation" />
-  <NuxtLink :to="debugLocation">Go</NuxtLink>
 </template>
 
 <script setup lang="ts">
 import { invoke } from "@tauri-apps/api/core";
 // @ts-expect-error
-import { AppStatus } from "./types.d.ts";
+import { AppStatus, type AppState } from "./types.d.ts";
 import { listen } from "@tauri-apps/api/event";
+import { useAppState } from "./composables/app-state.js";
 
 const router = useRouter();
 
-const state: { status: AppStatus } = await invoke("fetch_state");
-switch (state.status) {
+const state = useAppState();
+state.value = await invoke("fetch_state");
+
+router.beforeEach(async () => {
+  state.value = await invoke("fetch_state");
+});
+
+switch (state.value.status) {
   case AppStatus.NotConfigured:
     router.push("/setup");
     break;
@@ -39,6 +43,4 @@ listen("auth/failed", () => {
 listen("auth/finished", () => {
   router.push("/");
 });
-
-const debugLocation = ref("");
 </script>

components/HeaderUserWidget.vue

@@ -1,10 +1,12 @@
 <template>
-  <Menu as="div" class="relative inline-block">
+  <Menu v-if="state.user" as="div" class="relative inline-block">
     <MenuButton>
       <HeaderWidget>
         <div class="inline-flex items-center text-zinc-300 hover:text-white">
-          <img :src="userData.image" class="w-5 h-5 rounded-sm" />
-          <span class="ml-2 text-sm font-bold">{{ userData.name }}</span>
+          <img :src="profilePictureUrl" class="w-5 h-5 rounded-sm" />
+          <span class="ml-2 text-sm font-bold">{{
+            state.user.displayName
+          }}</span>
           <ChevronDownIcon class="ml-3 h-4" />
         </div>
       </HeaderWidget>
@@ -27,12 +29,25 @@
             class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
           >
             <div class="inline-flex items-center text-zinc-300">
-              <img :src="userData.image" class="w-5 h-5 rounded-sm" />
-              <span class="ml-2 text-sm font-bold">{{ userData.name }}</span>
+              <img :src="profilePictureUrl" class="w-5 h-5 rounded-sm" />
+              <span class="ml-2 text-sm font-bold">{{
+                state.user.displayName
+              }}</span>
             </div>
           </NuxtLink>
           <div class="h-0.5 rounded-full w-full bg-zinc-800" />
           <div class="flex flex-col mb-1">
+            <MenuItem v-slot="{ active }">
+              <NuxtLink
+                @click="() => openAdminUrl()"
+                :class="[
+                  active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
+                  'transition block px-4 py-2 text-sm',
+                ]"
+              >
+                Admin Dashboard
+              </NuxtLink>
+            </MenuItem>
             <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active }">
               <NuxtLink
                 :href="nav.route"
@@ -56,18 +71,22 @@ import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import { ChevronDownIcon } from "@heroicons/vue/16/solid";
 import type { NavigationItem } from "./types";
 import HeaderWidget from "./HeaderWidget.vue";
+import { useAppState } from "~/composables/app-state";
+import { invoke } from "@tauri-apps/api/core";
 
-const userData = {
-  image: "https://avatars.githubusercontent.com/u/64579723?v=4",
-  name: "DecDuck",
-};
+const state = useAppState();
+const profilePictureUrl: string = await invoke("gen_drop_url", {
+  path: `/api/v1/object/${state.value.user?.profilePicture}`,
+});
+const adminUrl: string = await invoke("gen_drop_url", {
+  path: "/admin",
+});
+
+async function openAdminUrl() {
+  await invoke("open_url", { path: adminUrl });
+}
 
 const navigation: NavigationItem[] = [
-  {
-    label: "Admin Dashboard",
-    route: "/admin",
-    prefix: "",
-  },
   {
     label: "Account settings",
     route: "/account",
@@ -78,5 +97,5 @@ const navigation: NavigationItem[] = [
     route: "/signout",
     prefix: "",
   },
-];
+].filter((e) => e !== undefined);
 </script>

composables/app-state.ts

@@ -0,0 +1,3 @@
+import type { AppState } from "~/types";
+
+export const useAppState = () => useState<AppState>("state");

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-zinc-900 h-screen w-screen overflow-hidden">
+  <div class="flex flex-col bg-zinc-900 overflow-hidden">
     <Header class="select-none" />
     <div class="grow overflow-y-scroll">
       <slot />

layouts/mini.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-zinc-950 h-screen w-screen overflow-hidden">
+  <div class="flex flex-col bg-zinc-950 overflow-hidden">
     <MiniHeader />
     <div class="grow overflow-y-scroll">
       <slot />

pages/index.vue

@@ -1 +1,5 @@
-<template></template>
+<template>{{state}}</template>
+
+<script setup lang="ts">
+const state = useAppState();
+</script>

src-tauri/src/auth.rs

@@ -185,7 +185,6 @@ pub fn setup() -> Result<(AppStatus, Option<User>), Error> {
         let user_result = fetch_user();
         if user_result.is_err() {
             return Ok((AppStatus::SignedInNeedsReauth, None));
-
         }
         return Ok((AppStatus::SignedIn, Some(user_result.unwrap())))
     }

src-tauri/src/lib.rs

@@ -12,7 +12,7 @@ use std::{
 use auth::{auth_initiate, recieve_handshake};
 use data::DatabaseInterface;
 use log::info;
-use remote::use_remote;
+use remote::{gen_drop_url, open_url, use_remote};
 use serde::{Deserialize, Serialize};
 use structured_logger::{json::new_writer, Builder};
 use tauri_plugin_deep_link::DeepLinkExt;
@@ -24,10 +24,16 @@ pub enum AppStatus {
     SignedIn,
     SignedInNeedsReauth,
 }
-#[derive(Clone, Copy, Serialize, Deserialize)]
-pub struct User {}
+#[derive(Clone, Serialize, Deserialize)]
+pub struct User {
+    id: String,
+    username: String,
+    admin: bool,
+    displayName: String,
+    profilePicture: String,
+}
 
-#[derive(Clone, Copy, Serialize)]
+#[derive(Clone, Serialize)]
 pub struct AppState {
     status: AppStatus,
     user: Option<User>,
@@ -83,7 +89,9 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             fetch_state,
             auth_initiate,
-            use_remote
+            use_remote,
+            gen_drop_url,
+            open_url,
         ])
         .plugin(tauri_plugin_shell::init())
         .setup(|app| {

src-tauri/src/remote.rs

@@ -4,7 +4,9 @@ use std::{
 };
 
 use log::{info, warn};
+use openssl::x509::store::HashDir;
 use serde::Deserialize;
+use tauri::async_runtime::handle;
 use url::Url;
 
 use crate::{AppState, AppStatus, DB};
@@ -59,3 +61,26 @@ pub async fn use_remote<'a>(
 
     return Ok(());
 }
+
+#[tauri::command]
+pub fn open_url(path: String) -> Result<(), String> {
+    webbrowser::open(&path).unwrap();
+    Ok(())
+}
+
+#[tauri::command]
+pub fn gen_drop_url(app: tauri::AppHandle, path: String) -> Result<String, String> {
+    let base_url = {
+        let handle = DB.borrow_data().unwrap();
+
+        if handle.base_url.is_empty() {
+            return Ok("".to_string());
+        };
+
+        Url::parse(&handle.base_url).unwrap()
+    };
+
+    let url = base_url.join(&path).unwrap();
+
+    return Ok(url.to_string());
+}

src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://schema.tauri.app/config/2.0.0",
-  "productName": "drop",
+  "productName": "Drop Desktop Client",
   "version": "0.1.0",
   "identifier": "dev.drop.app",
   "build": {

types.d.ts

@@ -1,6 +1,20 @@
+export type AppState = {
+  status: AppStatus;
+  user?: User;
+};
+
 export enum AppStatus {
-    NotConfigured = "NotConfigured",
-    SignedOut = "SignedOut",
-    SignedIn = "SignedIn",
-    SignedInNeedsReauth = "SignedInNeedsReauth",
-}
+  NotConfigured = "NotConfigured",
+  SignedOut = "SignedOut",
+  SignedIn = "SignedIn",
+  SignedInNeedsReauth = "SignedInNeedsReauth",
+}
+
+export type User = {
+  id: string;
+  username: string;
+  admin: boolean;
+  email: string;
+  displayName: string;
+  profilePicture: string;
+};