Add github username and email to account preferences page

studio/pages/account/me.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconMoon, IconSun, Select, Typography } from '@supabase/ui'
+import { IconMoon, IconSun, Select, Typography, Input } from '@supabase/ui'
 
 import { useProfile, useStore, withAuth } from 'hooks'
 import { post } from 'lib/common/fetch'
@@ -32,8 +32,10 @@ export default withAuth(User)
 const ProfileCard = observer(() => {
   const { ui } = useStore()
   const { mutateProfile } = useProfile()
-
   const user = ui.profile
+
+  console.log('User', user?.username, user?.primary_email)
+
   const updateUser = async (model: any) => {
     try {
       const updatedUser = await post(`${API_URL}/profile/update`, model)
@@ -51,6 +53,9 @@ const ProfileCard = observer(() => {
 
   return (
     <article className="p-4 max-w-4xl">
+      <section>
+        <GithubProfile />
+      </section>
       <section className="">
         {/* @ts-ignore */}
         <SchemaFormPanel
@@ -77,6 +82,41 @@ const ProfileCard = observer(() => {
   )
 })
 
+const GithubProfile = observer(() => {
+  const { ui } = useStore()
+
+  return (
+    <Panel
+      title={[
+        <Typography.Title key="panel-title" level={5} className="mb-0">
+          Account Information
+        </Typography.Title>,
+      ]}
+    >
+      <Panel.Content>
+        <div className="space-y-2">
+          <Input
+            readOnly
+            disabled
+            label="Username"
+            layout="horizontal"
+            value=""
+            placeholder={ui.profile?.username ?? ''}
+          />
+          <Input
+            readOnly
+            disabled
+            label="Email"
+            layout="horizontal"
+            value=""
+            placeholder={ui.profile?.primary_email ?? ''}
+          />
+        </div>
+      </Panel.Content>
+    </Panel>
+  )
+})
+
 const ThemeSettings = observer(() => {
   const { ui } = useStore()