feat: ✨ Implement proper login and logout using UI

pages/[username]/index.vue

@@ -38,14 +38,13 @@ const route = useRoute();
 const client = useMegalodon(undefined, true);
 const username = (route.params.username as string).replace("@", "");
 
-const account: Ref<Account | null> = ref(null);
+const accounts = useAccountSearch(client, username);
+const account = computed<Account | null>(
+    () => accounts.value?.find((account) => account.acct === username) ?? null,
+);
 const accountId = computed(() => account.value?.id ?? null);
 
 onMounted(async () => {
-    const accounts = await useAccountSearch(client, username);
-    account.value =
-        (await accounts?.find((account) => account.acct === username)) ?? null;
-
     useIntersectionObserver(skeleton, async (entries) => {
         if (
             entries[0].isIntersecting &&
@@ -70,7 +69,7 @@ const isLoadingTimeline = ref(true);
 const timelineParameters = ref({});
 const hasReachedEnd = ref(false);
 const { timeline, loadNext, loadPrev } = useAccountTimeline(
-    client,
+    client.value,
     accountId,
     timelineParameters,
 );

pages/local.vue

@@ -23,7 +23,7 @@ const isLoading = ref(true);
 const timelineParameters = ref({});
 const hasReachedEnd = ref(false);
 const { timeline, loadNext, loadPrev } = useLocalTimeline(
-    client,
+    client.value,
     timelineParameters,
 );
 const skeleton = ref<HTMLSpanElement | null>(null);

pages/register/index.vue

@@ -69,7 +69,7 @@
                 </VeeField>
 
                 <ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
-            "Register" }}</ButtonsPrimary>
+                    "Register" }}</ButtonsPrimary>
             </VeeForm>
         </div>
         <div v-else>
@@ -133,14 +133,15 @@ const register = (result: {
     reason: string;
 }) => {
     isLoading.value = true;
-    client?.registerAccount(
-        result.username,
-        result.email,
-        result.password,
-        true,
-        "en",
-        result.reason || "Empty reason",
-    )
+    ref(client)
+        .value?.registerAccount(
+            result.username,
+            result.email,
+            result.password,
+            true,
+            "en",
+            result.reason || "Empty reason",
+        )
         .then(async (res) => {
             navigateTo("/register/success");
         })