From c2f3ee12c5ee6a367e112d5a101e1df99bab4a57 Mon Sep 17 00:00:00 2001
From: Alaister Young <a@alaisteryoung.com>
Date: Wed, 9 Nov 2022 13:57:06 -0800
Subject: [PATCH] add link for logged in users to change their password

---
 .../interfaces/SignIn/ResetPasswordForm.tsx   | 12 +--
 .../interfaces/SignIn/SignUpForm.tsx          |  8 +-
 studio/lib/schemas.ts                         |  9 +++
 studio/pages/account/me.tsx                   | 80 +++++++++++++++++--
 4 files changed, 85 insertions(+), 24 deletions(-)
 create mode 100644 studio/lib/schemas.ts

diff --git a/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index 82a50d7b071..993fda7b2ed 100644
--- a/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -1,16 +1,8 @@
 import { useStore } from 'hooks'
 import { auth } from 'lib/gotrue'
+import { passwordSchema } from 'lib/schemas'
 import { useRouter } from 'next/router'
 import { Button, Form, Input } from 'ui'
-import * as yup from 'yup'
-import YupPassword from 'yup-password'
-
-// extend yup with password validation
-YupPassword(yup)
-
-const resetPasswordSchema = yup.object({
-  password: yup.string().password().required().label('Password'),
-})
 
 const ResetPasswordForm = () => {
   const { ui } = useStore()
@@ -46,7 +38,7 @@ const ResetPasswordForm = () => {
       validateOnBlur
       id="reset-password-form"
       initialValues={{ password: '' }}
-      validationSchema={resetPasswordSchema}
+      validationSchema={passwordSchema}
       onSubmit={onResetPassword}
     >
       {({ isSubmitting }: { isSubmitting: boolean }) => {
diff --git a/studio/components/interfaces/SignIn/SignUpForm.tsx b/studio/components/interfaces/SignIn/SignUpForm.tsx
index 9e74474c4da..8cfdf8889a0 100644
--- a/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -2,18 +2,14 @@ import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
+import { passwordSchema } from 'lib/schemas'
 import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
 import { Button, Form, Input } from 'ui'
 import * as yup from 'yup'
-import YupPassword from 'yup-password'
 
-// extend yup with password validation
-YupPassword(yup)
-
-const signUpSchema = yup.object({
+const signUpSchema = passwordSchema.shape({
   email: yup.string().email().required().label('Email'),
-  password: yup.string().password().required().label('Password'),
 })
 
 const SignUpForm = () => {
diff --git a/studio/lib/schemas.ts b/studio/lib/schemas.ts
new file mode 100644
index 00000000000..16cdc6231d4
--- /dev/null
+++ b/studio/lib/schemas.ts
@@ -0,0 +1,9 @@
+import * as yup from 'yup'
+import YupPassword from 'yup-password'
+
+// extend yup with password validation
+YupPassword(yup)
+
+export const passwordSchema = yup.object({
+  password: yup.string().password().required().label('Password'),
+})
diff --git a/studio/pages/account/me.tsx b/studio/pages/account/me.tsx
index c307bb6902b..8b8675b40b8 100644
--- a/studio/pages/account/me.tsx
+++ b/studio/pages/account/me.tsx
@@ -1,14 +1,17 @@
-import React from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconMoon, IconSun, Input, Listbox } from 'ui'
+import { useEffect, useState } from 'react'
+import { IconArrowRight, IconMoon, IconSun, Input, Listbox } from 'ui'
 
+import { Session } from '@supabase/supabase-js'
+import { AccountLayout } from 'components/layouts'
+import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
+import Panel from 'components/ui/Panel'
 import { useProfile, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import { AccountLayout } from 'components/layouts'
-import Panel from 'components/ui/Panel'
-import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
+import { auth } from 'lib/gotrue'
 import { NextPageWithLayout } from 'types'
+import Link from 'next/link'
 
 const User: NextPageWithLayout = () => {
   return (
@@ -54,12 +57,72 @@ const ProfileCard = observer(() => {
     }
   }
 
+  const [session, setSession] = useState<Session | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      const {
+        data: { session },
+      } = await auth.getSession()
+
+      if (session) {
+        setSession(session)
+      }
+    })()
+  }, [])
+
+  // const updatePassword = async (model: { password: string }) => {
+  //   try {
+  //     const { password } = await passwordSchema.validate(model)
+
+  //     console.log('password:', password)
+
+  //     ui.setNotification({ category: 'success', message: 'Successfully updated password' })
+  //   } catch (error) {
+  //     if (error instanceof ValidationError) {
+  //       return ui.setNotification({
+  //         category: 'error',
+  //         message: error.message,
+  //       })
+  //     }
+
+  //     ui.setNotification({
+  //       category: 'error',
+  //       message: 'Something went wrong. Please try again later',
+  //     })
+  //   }
+  // }
+
   return (
     <article className="max-w-4xl p-4">
       <section>
-        <GithubProfile />
+        <Profile />
       </section>
-      <section className="">
+
+      {session?.user.app_metadata.provider === 'email' && (
+        <section>
+          <Panel
+            title={
+              <h5 key="panel-title" className="mb-0">
+                Password
+              </h5>
+            }
+          >
+            <Panel.Content>
+              <div>
+                You can change your password on the{' '}
+                <Link href="/reset-password">
+                  <a className="text-blue-1000 hover:text-blue-1100 transition">
+                    password reset page <IconArrowRight width={16} height={16} className="inline" />
+                  </a>
+                </Link>
+              </div>
+            </Panel.Content>
+          </Panel>
+        </section>
+      )}
+
+      <section>
         {/* @ts-ignore */}
         <SchemaFormPanel
           title="Profile"
@@ -78,6 +141,7 @@ const ProfileCard = observer(() => {
           onSubmit={updateUser}
         />
       </section>
+
       <section>
         <ThemeSettings />
       </section>
@@ -85,7 +149,7 @@ const ProfileCard = observer(() => {
   )
 })
 
-const GithubProfile = observer(() => {
+const Profile = observer(() => {
   const { ui } = useStore()
 
   return (