Restricted usernames to be unique, removes the potential for username conflicts

components/ui/UsernameInput.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export const UsernameInput = React.forwardRef( (props, ref) => (
+  // todo, check if username is already taken here?
+  <div>
+    <label htmlFor="username" className="block text-sm font-medium text-gray-700">
+      Username
+    </label>
+    <div className="mt-1 rounded-md shadow-sm flex">
+      <span className="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm">
+        {typeof window !== "undefined" && window.location.hostname}/
+      </span>
+      <input ref={ref} type="text" name="username" id="username" autoComplete="username" required defaultValue={props.defaultValue}
+             className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"/>
+    </div>
+  </div>
+));

components/ui/alerts/Error.tsx

@@ -0,0 +1,22 @@
+
+import { XCircleIcon } from '@heroicons/react/solid'
+
+export default function ErrorAlert(props) {
+  return (
+    <div className="rounded-md bg-red-50 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-red-800">Something went wrong</h3>
+          <div className="text-sm text-red-700">
+            <p>
+              {props.message}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}