init

src/App.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { RouterView } from "vue-router";
+</script>
+
+<template>
+	<header class="m-8">awawawawa</header>
+	<Suspense>
+		<RouterView />
+
+		<template #fallback> Loading... </template>
+	</Suspense>
+</template>

src/assets/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/api-fetch.ts

@@ -0,0 +1,40 @@
+import { useAccountStore } from "@/stores/account";
+import axios from "axios";
+
+export type FetchParams = {
+	method?: string;
+	body?: any;
+};
+
+export default async function apiFetch<T>(path: string, params: FetchParams = {}): Promise<T> {
+	const method = params.method ?? "GET";
+	const token = useAccountStore().token;
+	const headers = token
+		? {
+				Authorization: token,
+		  }
+		: {};
+
+	try {
+		const resp = await axios<T>({
+			method,
+			url: path,
+			headers: {
+				...headers,
+				"Content-Type": "application/json",
+			},
+			responseType: "json",
+			data: params.body || undefined,
+		});
+
+		return resp.data;
+	} catch (e: any) {
+		console.log(`Error fetching "${path}": ${e}`);
+
+		console.log(e);
+		console.log(e.response);
+		console.log(e.response.data);
+
+		throw e.response.data;
+	}
+}

src/lib/api/entities/account.ts

@@ -0,0 +1,48 @@
+import type { CustomEmoji } from "./custom_emoji";
+
+	export interface Account {
+	  id: string;
+	  /** Username, not including domain */
+	  username: string;
+	  /** Webfinger account URI */
+	  acct: string;
+	  /** The user's profile page */
+	  url: string;
+	  /** The user's nickname/display name */
+	  display_name: string;
+	  /** The user's bio */
+	  note: string;
+	  /** The user's avatar URL */
+	  avatar: string;
+	  /** The user's avatar URL as a static image. Same as `avatar` if the avatar is not animated */
+	  avatar_static: string;
+	  /** The user's header URL */
+	  header: string;
+	  /** The user's header URL as a static image. Same as `header` if the header is not animated */
+	  header_static: string;
+	  /** Whether the account manually approves follow requests */
+	  locked: boolean;
+	  /** Additional metadata attached to a profile as name-value pairs */
+	  fields: Field[];
+	  /** Custom emoji entities to be used when rendering the profile */
+	  emojis: CustomEmoji[];
+	  /** Indicates that the account may perform automated actions, may not be monitored, or identifies as a robot */
+	  bot: boolean;
+	  /** When the account was created */
+	  created_at: string;
+	  /** When the most recent status was posted */
+	  last_status_at: string | null;
+	  /** How many statuses are attached to this account */
+	  statuses_count: number;
+	  /** The reported followers of this profile */
+	  followers_count: number;
+	  /** The reported follows of this profile */
+	  following_count: number;
+	}
+
+	export interface Field {
+  /** The key of a given field’s key-value pair */
+	  name: string;
+	  /** The value associated with the name key */
+	  value: string;
+	}

src/lib/api/entities/application.ts

@@ -0,0 +1,6 @@
+export default interface Application {
+	name: string;
+	redirect_uri: string;
+	client_id?: string;
+	client_secret?: string;
+}

src/lib/api/entities/custom_emoji.ts

@@ -0,0 +1,12 @@
+export interface CustomEmoji {
+	/** The name of the custom emoji */
+	shortcode: string;
+	/** A link to the custom emoji */
+	url: string;
+	/** A link to a static copy of the custom emoji */
+	static_url: string;
+	/** Whether this Emoji should be visible in the picker or unlisted */
+	visible_in_picker: boolean;
+	/** Used for sorting custom emoji in the picker */
+	category?: string;
+}

src/main.ts

@@ -0,0 +1,14 @@
+import "./assets/style.css";
+
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import App from "./App.vue";
+import router from "./router";
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const router = createRouter({
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes: [
+		{
+			path: "/",
+			name: "home",
+			component: HomeView,
+		},
+		{
+			path: "/auth/login",
+			name: "auth-login",
+			component: () => import("../views/LoginView.vue"),
+		},
+	],
+});
+
+export default router;

src/stores/account.ts

@@ -0,0 +1,28 @@
+import apiFetch from "@/lib/api-fetch";
+import type { Account } from "@/lib/api/entities/account";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+const localStorageKey = "vulpine-current-user";
+const tokenKey = "vulpine-token";
+
+export const useAccountStore = defineStore("current-user", () => {
+	const json = localStorage.getItem(localStorageKey);
+	const user = ref<Account>(json ? JSON.parse(json) : undefined);
+	const token = ref(localStorage.getItem(tokenKey) || undefined);
+
+	function setUser(meUser: Account) {
+		user.value = meUser;
+		localStorage.setItem(localStorageKey, JSON.stringify(user.value));
+	}
+	async function fetchUser() {
+		user.value = await apiFetch<Account>("/api/v1/accounts/verify_credentials");
+		localStorage.setItem(localStorageKey, JSON.stringify(user.value));
+	}
+	function setToken(newToken: string) {
+		localStorage.setItem(tokenKey, newToken);
+		token.value = newToken;
+	}
+
+	return { user, token, setUser, setToken, fetchUser };
+});

src/stores/application.ts

@@ -0,0 +1,29 @@
+import apiFetch from "@/lib/api-fetch";
+import type Application from "@/lib/api/entities/application";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+const localStorageKey = "vulpine-oauth-app";
+
+export const useAppStore = defineStore("oauth-app", () => {
+    const json = localStorage.getItem(localStorageKey)
+    const app = ref<Application>(json ? JSON.parse(json) : undefined);
+
+    async function getApp() {
+        if (app.value) return app.value;
+
+        const resp = await apiFetch<Application>("/api/v1/apps", {
+            method: "POST",
+            body: {
+                client_name: "vulpine-fe",
+                redirect_uris: `${window.location.origin}/auth/callback`,
+                scopes: "read write follow push",
+            }
+        })
+        app.value = resp;
+        localStorage.setItem(localStorageKey, JSON.stringify(resp));
+        return app.value;
+    }
+
+    return { app, getApp }
+})

src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useCounterStore = defineStore("counter", () => {
+	const count = ref(0);
+	const doubleCount = computed(() => count.value * 2);
+	function increment() {
+		count.value++;
+	}
+
+	return { count, doubleCount, increment };
+});

src/views/HomeView.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from "flowbite-vue";
+</script>
+
+<template>
+	<fwb-dropdown text="Click me" placement="top">
+		<fwb-list-group>
+			<fwb-list-group-item>Item #1</fwb-list-group-item>
+			<fwb-list-group-item>Item #2</fwb-list-group-item>
+			<fwb-list-group-item>Item #3</fwb-list-group-item>
+		</fwb-list-group>
+	</fwb-dropdown>
+</template>

src/views/LoginView.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import apiFetch from "@/lib/api-fetch";
+import { useAccountStore } from "@/stores/account";
+import { useAppStore } from "@/stores/application";
+import { FwbInput, FwbButton } from "flowbite-vue";
+import { ref } from "vue";
+
+const appStore = useAppStore();
+const userStore = useAccountStore();
+const app = await appStore.getApp();
+
+const username = ref("");
+const password = ref("");
+
+const mfaToken = ref("");
+const mfaCode = ref("");
+
+interface Token {
+	access_token: string; // This is the only thing we care about
+}
+
+const login = async () => {
+	try {
+		const token = await apiFetch<Token>("/oauth/token", {
+			method: "POST",
+			body: {
+				grant_type: "password",
+				client_id: app.client_id,
+				client_secret: app.client_secret,
+				redirect_uri: `${window.location.origin}/auth/callback`,
+				scope: "read write follow push",
+
+				username: username.value,
+				password: password.value,
+			},
+		});
+
+		userStore.setToken(token.access_token);
+		await userStore.fetchUser();
+	} catch (e: any) {
+		// When logging in with 2FA enabled, Akkoma will return an `mfa_required` error
+		if ("error" in e && e.error === "mfa_required") {
+			mfaToken.value = e.mfa_token;
+		} else {
+			// TODO: filter out other errors we might need to communicate to the user
+			throw e;
+		}
+	}
+};
+
+const verifyMfa = async () => {
+	const token = await apiFetch<Token>("/oauth/mfa/challenge", {
+		method: "POST",
+		body: {
+			client_id: app.client_id,
+			client_secret: app.client_secret,
+			challenge_type: "totp",
+			mfa_token: mfaToken.value,
+			code: mfaCode.value,
+		},
+	});
+
+	userStore.setToken(token.access_token);
+	await userStore.fetchUser();
+};
+</script>
+
+<template>
+	<form v-if="!mfaToken" @submit.prevent="login">
+		<FwbInput v-model="username" label="Username" />
+		<FwbInput v-model="password" type="password" label="Password" />
+		<FwbButton type="submit">Login</FwbButton>
+	</form>
+	<form v-else @submit.prevent="verifyMfa">
+		<FwbInput v-model="mfaCode" label="2-factor authentication code" />
+		<FwbButton type="submit">Login</FwbButton>
+	</form>
+</template>