[frontend] Parse JSON response and turn into a proper profile view

frontend/src/components/profile.tsx

···
 
 import { createResource, createSignal, Match, Show, Switch } from "solid-js";
 import { agent } from "./loginForm.tsx";
-import { ErrorResponse } from "../types.ts";
+import { ErrorResponse, ProfileViewQuery } from "../types.ts";
 
 const Profile = () => {
-	const fetchProfile = async (actor: any) => {
+	const fetchProfile = async (actor: any): Promise<ProfileViewQuery> => {
 		const response: Response = await fetch(
 			`${import.meta.env.VITE_CLIPPR_APPVIEW}/xrpc/social.clippr.actor.getProfile?actor=${actor}`,
 		);
···
 					<p>error: {profile.error.message}</p>
 				</Match>
 				<Match when={profile()}>
-					<p>profile: {JSON.stringify(profile())}</p>
+					<div id="profile-view">
+						<img
+							src={profile()?.avatar}
+							class="profile-picture"
+							alt="The user's avatar."
+						/>
+						<div>
+							<p>
+								<b>{profile()?.displayName}</b>
+							</p>
+							<p title={profile()?.did}>
+								{profile()?.handle.replace("at://", "@")}
+							</p>
+							<p>{profile()?.description}</p>
+						</div>
+					</div>
 				</Match>
 			</Switch>
 		</div>

frontend/src/components/profileEditor.tsx

···
 		const file = (document.getElementById("avatar") as HTMLInputElement)
 			?.files?.[0];
 		if (!file) return;
-		console.log(file);
 
 		if (!file.type.startsWith("image/")) {
 			setNotice("error: avatar must be an image");
-			console.log("error: avatar must be an image");
+			console.log(file);
 			return;
 		}
 
 		if (file.size > 1000000) {
 			setNotice("error: avatar must be less than 1MB");
-			console.log("error: avatar must be less than 1MB");
+			console.log(file);
 			return;
 		}
 
···
 		const rpc = new Client({ handler: agent! });
 		setNotice("uploading avatar...");
 		// @ts-ignore
-		const uploadRes: ClientResponse<any, any> = await rpc.post( "com.atproto.repo.uploadBlob",
+		const uploadRes: ClientResponse<any, any> = await rpc.post("com.atproto.repo.uploadBlob",
 			{
 				input: blob,
 			},
···
 			return;
 		}
 
-		if (formData.get("displayName") === null) {
+		const displayName = formData.get("displayName") as string;
+		if (
+			displayName === null ||
+			displayName === ""
+		) {
 			setNotice("error: display name is missing");
+			return;
+		}
+
+		if (displayName.length > 64) {
+			setNotice("error: display name is too long");
+			return;
+		}
+
+		let description = formData.get("description") as string;
+		if (
+			description === null ||
+			description === ""
+		) {
+			description = "This user does not have a bio.";
+		}
+
+		if (description.length > 500) {
+			setNotice("error: description is too long");
+			return;
 		}
 
 		try {
···
 						avatar: JSON.parse(avatar),
 						displayName: formData.get("displayName"),
 						description: formData.get("description") || "",
+						// TODO: Take 'createdAt' string from previous version if it exists
 						createdAt: new Date().toISOString(),
 					},
 				},
···
 		}
 
 		setNotice("profile changed!");
+		localStorage.removeItem("avatar");
 		setTimeout(() => {
 			window.location.reload();
 		}, 1000);
···
 		<div>
 			<h2>profile editor</h2>
 			<form ref={formRef}>
-				<label for="avatar">avatar</label>
+				<label for="avatar" class="file-upload">
+					upload avatar
+				</label>
 				<input
 					type="file"
 					name="avatar"
···
 					onChange={() => uploadBlob()}
 				/>
 				<label for="displayName">display name</label>
-				<input type="text" name="displayName" id="displayName" />
+				<input
+					type="text"
+					name="displayName"
+					id="displayName"
+					maxLength="64"
+					placeholder="Alice"
+				/>
 				<label for="description">bio</label>
-				<textarea name="description" id="description"></textarea>
+				<textarea
+					name="description"
+					id="description"
+					maxLength="500"
+					placeholder="describe yourself..."
+				></textarea>
 				<button
 					type="submit"
 					onClick={(e) => {

frontend/src/styles/index.css

···
 	:root {
 		--bg: #222 !important;
 		--fg: #fff !important;
+		--controls-bg: #2B2A33 !important;
+		--controls-bg-hover: #52525E !important;
+		--controls-border: #8F8F9D !important;
 	}
 }
 
···
 	:root {
 		--bg: #fff !important;
 		--fg: #222 !important;
+		--controls-bg: #E9E9ED !important;
+		--controls-bg-hover: #D0D0D7 !important;
+		--controls-border: #8F8F9D !important;
 	}
 }
 
···
 	}
 }
 
+#profile-view {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 2rem;
+
+	div {
+		text-align: left;
+	}
+
+	* {
+		margin: 0.5rem 0;
+	}
+}
+
+.profile-picture {
+	border-radius: 50%;
+	width: 150px;
+	height: 150px;
+}
+
+form input[type="file"] {
+	display: none;
+}
+
+.file-upload {
+	border: 1px solid var(--controls-border);
+	display: inline-block;
+	padding: 6px 12px;
+	background-color: var(--controls-bg);
+	border-radius: 6px;
+	margin: 0.5rem 0;
+}
+
+.file-upload:hover {
+	background-color: var(--controls-bg-hover);
+}
+
+textarea {
+	padding: 0.5rem;
+	width: 275px;
+	height: 100px;
+	font-family: Arial, sans-serif;
+}
+
 @media (max-width: 768px) {
 	body {
 		width: 90vw;
···
 
 	#content {
 		flex-direction: column;
+	}
+
+	#profile-view {
+		flex-direction: column;
+		align-items: center;
+		gap: 0.1rem;
 	}
 
 	footer {

frontend/src/types.ts

···
 	error: string;
 	message: string;
 };
+
+export type ProfileViewQuery = Object & {
+	did: string;
+	handle: string;
+	displayName: string;
+	avatar: string;
+	description: string;
+	createdAt: string;
+}

frontend/src/views/home.tsx

···
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { killSession, loginState } from "../components/loginForm.tsx";
+import { loginState } from "../components/loginForm.tsx";
 import { ProfileEditor } from "../components/profileEditor.tsx";
 import { Profile } from "../components/profile.tsx";
 
···
 					<p>OAuth!</p>
 					<Profile />
 					<ProfileEditor />
-					<button type="button" onClick={killSession}>
-						Log out
-					</button>
 				</div>
 			</div>
 		</main>