🛂 add login component

src/app.css

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

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