🛂 add login component

package.json

@@ -20,9 +20,9 @@
 		"@typescript-eslint/eslint-plugin": "^5.10.1",
 		"@typescript-eslint/parser": "^5.10.1",
 		"autoprefixer": "^10.4.5",
-		"eslint": "^7.32.0",
+		"eslint": "^8.14.0",
 		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-svelte3": "^3.2.1",
+		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.12",
 		"prettier": "^2.5.1",
 		"prettier-plugin-svelte": "^2.5.0",

postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+		autoprefixer: {}
+	}
+};

src/components/Login.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import api from '$lib/api';
+	import { tokenStore, userStore } from '../stores';
+
+	const INSTANCE_URL = 'http://localhost:4000';
+
+	let username = '';
+	let password = '';
+
+	const onLogin = async () => {
+		const app = await api.oauth.createApp(INSTANCE_URL);
+		const result = await api.oauth.getTokenFromCredentials(INSTANCE_URL, app, username, password);
+		tokenStore.set(result.access_token);
+		const user = await api.user.verifyCredentials(INSTANCE_URL, result.access_token);
+		console.log('user', user);
+		userStore.set(user);
+	};
+</script>
+
+<form on:submit|preventDefault={onLogin}>
+	<label>
+		Username
+		<input type="text" name="" placeholder="username" bind:value={username} required />
+	</label>
+	<label>
+		Password
+		<input type="password" name="password" bind:value={password} required />
+	</label>
+	<button>Login</button>
+</form>

src/lib/api.ts

@@ -0,0 +1,7 @@
+import oauth from './api/oauth';
+import user from './api/user';
+
+export default {
+	oauth,
+	user
+};

src/lib/api/oauth.ts

@@ -0,0 +1,50 @@
+type App = {
+	client_id: string;
+	client_secret: string;
+	id: string;
+	name: string;
+};
+
+const createApp = async (instance: string): Promise<App> => {
+	const url = `${instance}/api/v1/apps`;
+	const form = new window.FormData();
+
+	form.append('client_name', `scuffs`);
+	form.append('redirect_uris', `${window.location.origin}/oauth-callback`);
+	form.append('scopes', 'read write follow push');
+
+	const response = await fetch(url, {
+		method: 'POST',
+		body: form
+	});
+	return await response.json();
+};
+
+const getTokenFromCredentials = async (
+	instance: string,
+	app: App,
+	username: string,
+	password: string
+) => {
+	const url = `${instance}/oauth/token`;
+	const form = new window.FormData();
+
+	form.append('client_id', app.client_id);
+	form.append('client_secret', app.client_secret);
+	form.append('grant_type', 'password');
+	form.append('username', username);
+	form.append('password', password);
+
+	const response = await fetch(url, {
+		method: 'POST',
+		body: form
+	});
+	return await response.json();
+};
+
+const oauth = {
+	createApp,
+	getTokenFromCredentials
+};
+
+export default oauth;

src/lib/api/user.ts

@@ -0,0 +1,17 @@
+
+const verifyCredentials = async(instance: string, token: string) => {
+	const url = `${instance}/api/v1/accounts/verify_credentials`;
+  
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${token}`
+    }
+	});
+	return await response.json();
+}
+
+const user = {
+  verifyCredentials
+};
+
+export default user;

src/routes/index.svelte

@@ -1 +1,10 @@
+<script lang="ts">
+	import Login from '$components/Login.svelte';
+</script>
+
+<svelte:head>
+	<title>Scuff</title>
+</svelte:head>
+
 <h1 class="text-3xl font-bold text-center m-8">Hello world!</h1>
+<Login />

src/stores.ts

@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store'
+import type { Writable } from 'svelte/store'
+
+export const userStore: Writable<object | null> = writable(null);
+
+export const tokenStore: Writable<string | null> = writable(null);

svelte.config.js

@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-auto';
 import preprocess from 'svelte-preprocess';
+import path from 'path';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,7 +9,14 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
+		vite: {
+			resolve: {
+				alias: {
+					$components: path.resolve('./src/components')
+				}
+			}
+		}
 	}
 };
 

tailwind.config.cjs

@@ -1,7 +1,7 @@
 module.exports = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-    extend: {},
+		extend: {}
 	},
-  plugins: [],
-}
+	plugins: []
+};