+ nickname

src/Components/AuthForm.js

@@ -87,7 +87,12 @@ export function AuthForm({ setSession }) {
 }
 
 const AuthInputs = ({ tabIndex, setTabIndex }) => {
-  const initial = { email: '', password: '', confirmPassword: '' };
+  const initial = {
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  };
   const [credentials, setCredentials] = useState(initial);
   const [loading, setLoading] = useState(false);
   const { showSnackBar } = useSnackbar();
@@ -107,7 +112,20 @@ const AuthInputs = ({ tabIndex, setTabIndex }) => {
       e.preventDefault();
       setLoading(true);
 
-      if (credentials.email === '' || credentials.password === '') {
+      if (
+        tabIndex === 0 &&
+        (credentials.email === '' || credentials.password === '')
+      ) {
+        setLoading(false);
+        return showSnackBar('error', 'missing inputs');
+      }
+
+      if (
+        tabIndex === 1 &&
+        (credentials.username === '' ||
+          credentials.email === '' ||
+          credentials.password === '')
+      ) {
         setLoading(false);
         return showSnackBar('error', 'missing inputs');
       }
@@ -123,7 +141,11 @@ const AuthInputs = ({ tabIndex, setTabIndex }) => {
       const { user, error } =
         tabIndex === 0
           ? await signIn(credentials.email, credentials.password)
-          : await signUp(credentials.email, credentials.password);
+          : await signUp(
+              credentials.email,
+              credentials.password,
+              credentials.username
+            );
 
       if (error) {
         setLoading(false);
@@ -156,6 +178,17 @@ const AuthInputs = ({ tabIndex, setTabIndex }) => {
       <Typography component={'span'} variant={'body2'}>
         supachat 👋
       </Typography>
+      {tabIndex === 1 ? (
+        <TextField
+          name="username"
+          label="username"
+          value={credentials.username}
+          type="text"
+          onChange={handleValueChanged}
+          required
+          autoComplete="username"
+        />
+      ) : null}
       <TextField
         name="email"
         label="email"

src/Components/UserProfile.js

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import {
   Drawer,
   Button,
@@ -13,8 +14,23 @@ import { useSnackbar } from '../Contexts/SnackbarContext';
 import CloseIcon from '@mui/icons-material/Close';
 
 export const UserProfile = ({ showDrawer, toggleDrawer }) => {
-  const { user, signOut } = useAuth();
+  const { user, signOut, updateUserMetaData } = useAuth();
   const { showSnackBar } = useSnackbar();
+  const [profileInputs, setProfileInputs] = useState({ username: '' });
+
+  useEffect(() => {
+    setProfileInputs({ username: user.user_metadata.username });
+  }, [showDrawer, user]);
+
+  const handleChange = ({ target: { name, value } }) => {
+    setProfileInputs({ ...profileInputs, [name]: value });
+  };
+
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    const res = await updateUserMetaData({ username: profileInputs.username });
+    if (res) showSnackBar('success', 'nickname updated');
+  };
 
   const handleSignOut = (e) => {
     e.preventDefault();
@@ -41,9 +57,21 @@ export const UserProfile = ({ showDrawer, toggleDrawer }) => {
         </IconButton>
       </Toolbar>
       <Divider />
-      <Stack m={2} spacing={1}>
-        <TextField fullWidth label="email" value={user.email} />
-
+      <Stack m={2} spacing={2}>
+        <TextField
+          name="username"
+          label="username"
+          value={profileInputs.username}
+          type="text"
+          onChange={handleChange}
+          required
+          autoComplete="username"
+        />
+        {/** TODO: add update email fnc*/}
+        <TextField fullWidth label="email" value={user.email} disabled />
+        <Button fullWidth onClick={(e) => handleUpdate(e)}>
+          update profile
+        </Button>
         <Button fullWidth onClick={(e) => handleSignOut(e)}>
           signout
         </Button>

src/Contexts/AuthContext.js

@@ -23,11 +23,18 @@ const AuthProvider = ({ children }) => {
     };
   }, []);
 
-  const signUp = async (email, password) => {
-    const { user, session, error } = await supabase.auth.signUp({
-      email,
-      password,
-    });
+  const signUp = async (email, password, username) => {
+    const { user, session, error } = await supabase.auth.signUp(
+      {
+        email,
+        password,
+      },
+      {
+        data: {
+          username,
+        },
+      }
+    );
 
     if (error) return { error };
 
@@ -52,7 +59,16 @@ const AuthProvider = ({ children }) => {
     return { status: 'success' };
   };
 
-  const value = { signUp, signIn, signOut, user };
+  const updateUserMetaData = async (newMetaData) => {
+    const { error } = await supabase.auth.update({
+      data: { ...newMetaData },
+    });
+
+    if (error) return error.message;
+    return { status: 'success' };
+  };
+
+  const value = { user, signUp, signIn, signOut, updateUserMetaData };
 
   return (
     <AuthContext.Provider value={value}>