garbage-heap/vulpine-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

init

Browse source
This commit is contained in:
sam 2023-12-19 17:40:02 +01:00
commit 69b4c9116b
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
30 changed files with 3428 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.eslintrc.cjs Normal file
View file

@ -0,0 +1,15 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

31
.gitignore vendored Normal file
View file

@ -0,0 +1,31 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.env

8
.prettierrc.json Normal file
View file

@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": true,
"useTabs": true,
"singleQuote": false,
"printWidth": 100,
"trailingComma": "all"
}

8
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,8 @@
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}

46
README.md Normal file
View file

@ -0,0 +1,46 @@
# vulpine-fe
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
pnpm install
```
### Compile and Hot-Reload for Development
```sh
pnpm dev
```
### Type-Check, Compile and Minify for Production
```sh
pnpm build
```
### Lint with [ESLint](https://eslint.org/)
```sh
pnpm lint
```

1
env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

44
package.json Normal file
View file

@ -0,0 +1,44 @@
{
"name": "vulpine-fe",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"axios": "^1.6.2",
"flowbite": "^2.2.1",
"flowbite-vue": "^0.1.2",
"pinia": "^2.1.7",
"sass": "^1.69.5",
"swrv": "^1.0.4",
"vue": "^3.3.11",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.19.3",
"@vitejs/plugin-vue": "^4.5.2",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/tsconfig": "^0.5.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"npm-run-all2": "^6.1.1",
"postcss": "^8.4.32",
"prettier": "^3.0.3",
"tailwindcss": "^3.3.7",
"typescript": "~5.3.0",
"vite": "^5.0.10",
"vue-tsc": "^1.8.25"
}
}

2856
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

12
src/App.vue Normal file
View file

@ -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>

3
src/assets/style.css Normal file
View file

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

40
src/lib/api-fetch.ts Normal file
View file

@ -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;
}
}

48
src/lib/api/entities/account.ts Normal file
View file

@ -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;
}

6
src/lib/api/entities/application.ts Normal file
View file

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

12
src/lib/api/entities/custom_emoji.ts Normal file
View file

@ -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;
}

0
src/lib/auth/login.ts Normal file
View file

14
src/main.ts Normal file
View file

@ -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");

20
src/router/index.ts Normal file
View file

@ -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;

28
src/stores/account.ts Normal file
View file

@ -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 };
});

29
src/stores/application.ts Normal file
View file

@ -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 }
})

12
src/stores/counter.ts Normal file
View file

@ -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 };
});

13
src/views/HomeView.vue Normal file
View file

@ -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>

78
src/views/LoginView.vue Normal file
View file

@ -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>

14
tailwind.config.js Normal file
View file

@ -0,0 +1,14 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
'node_modules/flowbite/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {},
},
plugins: [import('flowbite/plugin')],
}

13
tsconfig.app.json Normal file
View file

@ -0,0 +1,13 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

11
tsconfig.json Normal file
View file

@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

17
tsconfig.node.json Normal file
View file

@ -0,0 +1,17 @@
{
"extends": "@tsconfig/node18/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"composite": true,
"noEmit": true,
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

30
vite.config.ts Normal file
View file

@ -0,0 +1,30 @@
import { fileURLToPath, URL } from "node:url";
import { loadEnv, defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const { INSTANCE } = loadEnv(mode, process.cwd(), "");
return {
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
proxy: {
"/api": {
target: INSTANCE,
changeOrigin: true,
},
"/oauth": {
target: INSTANCE,
changeOrigin: true,
},
},
},
};
});