From d9cc274673bfc917ce017a1b1b3b8eb07c2da233 Mon Sep 17 00:00:00 2001
From: James Culveyhouse <jculveyhouse@cloudflare.com>
Date: Tue, 28 Feb 2023 00:22:19 -0600
Subject: [PATCH] Integration alias api endpoint

---
 .../routes/(admin)/settings/aliases/index.tsx | 148 +++++++++++-------
 .../src/routes/(admin)/settings/layout.tsx    |   6 +-
 .../(admin)/settings/migration/index.tsx      |  21 ++-
 3 files changed, 106 insertions(+), 69 deletions(-)

diff --git a/frontend/src/routes/(admin)/settings/aliases/index.tsx b/frontend/src/routes/(admin)/settings/aliases/index.tsx
index 1d28fd6..4a5d1e3 100644
--- a/frontend/src/routes/(admin)/settings/aliases/index.tsx
+++ b/frontend/src/routes/(admin)/settings/aliases/index.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik'
+import { component$, useStore, useSignal, $ } from '@builder.io/qwik'
 import { loader$ } from '@builder.io/qwik-city'
 import { WildebeestEnv } from '~/types'
 import { checkAuth } from '~/utils/checkAuth'
@@ -12,65 +12,97 @@ export const loader = loader$<WildebeestEnv, void>(async ({ request, platform, r
 })
 
 export default component$(() => {
+	const ref = useSignal<Element>()
+	const state = useStore({ alias: '' })
+	const toast = useSignal<'success' | 'failure' | null>(null)
+
+	const handleInput = $((event: Event) => {
+		state.alias = (event.target as HTMLInputElement).value
+	})
+
+	const handleSubmit = $(async () => {
+		const res = await fetch('/api/wb/settings/account/alias', { method: 'POST', body: JSON.stringify(state) })
+		if (res.status == 200) {
+			toast.value = 'success'
+		} else {
+			toast.value = 'failure'
+		}
+	})
+
 	return (
-		<div class="max-w-4xl py-14 px-8">
-			<h2 class="text-2xl font-bold mb-6">Account Aliases</h2>
+		<form ref={ref} class="login-form" preventdefault:submit onSubmit$={handleSubmit}>
+			<div class="max-w-4xl py-14 px-8">
+				<h2 class="text-2xl font-bold mb-6">Account Aliases</h2>
 
-			<div class="bg-green-800 border-green-700 text-green-100 border mb-5 p-5 text-center rounded">
-				Successfully created a new alias. You can now initiate the move from the old account.
+				{toast.value === 'success' && (
+					<div class="bg-green-800 border-green-700 text-green-100 border mb-5 p-5 text-center rounded">
+						Successfully created a new alias. You can now initiate the move from the old account.
+					</div>
+				)}
+
+				{toast.value === 'failure' && (
+					<div class="bg-red-800 border-red-700 text-red-100 border mb-5 p-5 text-center rounded">
+						Failed to create alias.
+					</div>
+				)}
+
+				<p class="text-sm text-wildebeest-400 mb-10">
+					If you want to move from another account to this one, here you can create an alias, which is required before
+					you can proceed with moving followers from the old account to this one. This action by itself is harmless and
+					reversible. The account migration is initiated from the old account.
+				</p>
+
+				<div class="my-5">
+					<label class="font-semibold mb-3" for="alias">
+						Handle of the old account
+						<span class="ml-1 text-red-500">*</span>
+					</label>
+					<div class="text-sm text-wildebeest-400">
+						Specify the username@domain of the account you want to move from
+					</div>
+				</div>
+				<input
+					class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 w-full mb-5"
+					type="text"
+					id="alias"
+					name="alias"
+					value={state.alias}
+					onInput$={handleInput}
+				/>
+				<button
+					type="submit"
+					class="w-full uppercase mb-9 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
+				>
+					Create Alias
+				</button>
+
+				{/* <table class="table-auto w-full">
+					<thead class="border-gray-600 border-b-2">
+						<th class="text-left py-2">Handle of the old account</th>
+						<th></th>
+					</thead>
+					<tbody>
+						<tr class="border-gray-600 border-t">
+							<td class="py-2">test</td>
+							<td class="py-2">
+								<div class="text-wildebeest-400 hover:text-white cursor-pointer">
+									<i class="fa fa-trash fa-fw fa-xs mr-1" />
+									Unlink Alias
+								</div>
+							</td>
+						</tr>
+						<tr class="border-gray-600 border-t">
+							<td class="py-2">test 2</td>
+							<td class="py-2">
+								<div class="text-wildebeest-400 hover:text-white cursor-pointer">
+									<i class="fa fa-trash fa-fw fa-xs mr-1" />
+									Unlink Alias
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table> */}
 			</div>
-
-			<p class="text-sm text-wildebeest-400 mb-10">
-				If you want to move from another account to this one, here you can create an alias, which is required before you
-				can proceed with moving followers from the old account to this one. This action by itself is harmless and
-				reversible. The account migration is initiated from the old account.
-			</p>
-
-			<div class="my-5">
-				<label class="font-semibold mb-3" for="old-account">
-					Handle of the old account
-					<span class="ml-1 text-red-500">*</span>
-				</label>
-				<div class="text-sm text-wildebeest-400">Specify the username@domain of the account you want to move from</div>
-			</div>
-			<input
-				class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 w-full mb-5"
-				type="text"
-				name="old-account"
-			/>
-			<button
-				type="submit"
-				class="w-full uppercase mb-9 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
-			>
-				Create Alias
-			</button>
-
-			<table class="table-auto w-full">
-				<thead class="border-gray-600 border-b-2">
-					<th class="text-left py-2">Handle of the old account</th>
-					<th></th>
-				</thead>
-				<tbody>
-					<tr class="border-gray-600 border-t">
-						<td class="py-2">test</td>
-						<td class="py-2">
-							<div class="text-wildebeest-400 hover:text-white cursor-pointer">
-								<i class="fa fa-trash fa-fw fa-xs mr-1" />
-								Unlink Alias
-							</div>
-						</td>
-					</tr>
-					<tr class="border-gray-600 border-t">
-						<td class="py-2">test 2</td>
-						<td class="py-2">
-							<div class="text-wildebeest-400 hover:text-white cursor-pointer">
-								<i class="fa fa-trash fa-fw fa-xs mr-1" />
-								Unlink Alias
-							</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+		</form>
 	)
 })
diff --git a/frontend/src/routes/(admin)/settings/layout.tsx b/frontend/src/routes/(admin)/settings/layout.tsx
index 9ff3fde..db131f0 100644
--- a/frontend/src/routes/(admin)/settings/layout.tsx
+++ b/frontend/src/routes/(admin)/settings/layout.tsx
@@ -3,7 +3,7 @@ import { WildebeestLogo } from '~/components/MastodonLogo'
 
 export default component$(() => {
 	return (
-		<div class="flex w-screen h-screen justify-center">
+		<div class="flex w-screen min-h-screen justify-center">
 			<AccountSidebar />
 			<div class="flex-auto">
 				<Slot />
@@ -25,11 +25,11 @@ export const AccountSidebar = component$(() => {
 					<span class="hover:underline">Back to Wildebeest</span>
 				</a>
 				<ul class="mr-5">
-					<li class="mb-3">
+					{/* <li class="mb-3">
 						<a class="no-underline text-right text-wildebeest-400 hover:text-wildebeest-200" href="/settings/migration">
 							Account Migration
 						</a>
-					</li>
+					</li> */}
 					<li class="mb-3">
 						<a class="no-underline text-right text-wildebeest-400 hover:text-wildebeest-200" href="/settings/aliases">
 							Account Aliases
diff --git a/frontend/src/routes/(admin)/settings/migration/index.tsx b/frontend/src/routes/(admin)/settings/migration/index.tsx
index 624aad3..56c793c 100644
--- a/frontend/src/routes/(admin)/settings/migration/index.tsx
+++ b/frontend/src/routes/(admin)/settings/migration/index.tsx
@@ -1,14 +1,17 @@
 import { component$ } from '@builder.io/qwik'
 import { loader$ } from '@builder.io/qwik-city'
 import { WildebeestEnv } from '~/types'
-import { checkAuth } from '~/utils/checkAuth'
+// import { checkAuth } from '~/utils/checkAuth'
 
-export const loader = loader$<WildebeestEnv, void>(async ({ request, platform, redirect }) => {
-	const isAuthorized = await checkAuth(request, platform)
+export const loader = loader$<WildebeestEnv, void>(async ({ redirect }) => {
+	// Hiding this page for now
+	redirect(303, '/explore')
 
-	if (!isAuthorized) {
-		redirect(303, '/explore')
-	}
+	// const isAuthorized = await checkAuth(request, platform)
+
+	// if (!isAuthorized) {
+	// 	redirect(303, '/explore')
+	// }
 })
 
 export default component$(() => {
@@ -55,11 +58,12 @@ export default component$(() => {
 						class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 w-full mb-5"
 						type="text"
 						name="old-account"
+						id="old-account"
 					/>
 				</div>
 				<div class="pl-3">
 					<div class="my-5">
-						<label class="font-semibold mb-3" for="old-account">
+						<label class="font-semibold mb-3" for="password">
 							Current Password
 							<span class="ml-1 text-red-500">*</span>
 						</label>
@@ -70,7 +74,8 @@ export default component$(() => {
 					<input
 						class="bg-black text-white p-3 rounded outline-none border border-red-500 hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 w-full mb-5"
 						type="password"
-						name="old-account"
+						name="password"
+						id="password"
 					/>
 				</div>
 			</div>