fix / ui changes to user settings and add username to db

diggerhq · Aug 7, 2024 · 4a109a0 · 4a109a0
1 parent 6e1b94a
commit 4a109a0
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 142 deletions.
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/AccountSettings.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/AccountSettings.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { UpdateAvatarAndNameBody } from '@/components/UpdateAvatarAndName';
 import {
   updateUserProfileNameAndAvatar,
@@ -95,30 +95,29 @@ export function AccountSettings({
 
   return (
     <div
-      className="space-y-6"
+      className="space-y-6 max-w-xl"
     >
       <Card>
         <CardHeader>
           <CardTitle>Account Settings</CardTitle>
           <CardDescription>Update your account settings here.</CardDescription>
         </CardHeader>
-        <CardContent>
-          <UpdateAvatarAndNameBody
-            onSubmit={(fullName: string) => mutate({ fullName, avatarUrl })}
-            onFileUpload={(file: File) => upload(file)}
-            userId={userProfile.id}
-            userEmail={userEmail}
-            isNewAvatarImageLoading={isNewAvatarImageLoading}
-            setIsNewAvatarImageLoading={setIsNewAvatarImageLoading}
-            isUploading={isUploading}
-            isLoading={isLoading ?? isUploading}
-            profileAvatarUrl={avatarUrl}
-            profileFullname={userProfile.full_name ?? undefined}
-          />
-        </CardContent>
+        <UpdateAvatarAndNameBody
+          onSubmit={(fullName: string) => mutate({ fullName, avatarUrl })}
+          onFileUpload={(file: File) => upload(file)}
+          userId={userProfile.id}
+          userEmail={userEmail}
+          profileUserName={userProfile.user_name ?? undefined}
+          isNewAvatarImageLoading={isNewAvatarImageLoading}
+          setIsNewAvatarImageLoading={setIsNewAvatarImageLoading}
+          isUploading={isUploading}
+          isLoading={isLoading ?? isUploading}
+          profileAvatarUrl={avatarUrl}
+          profileFullname={userProfile.full_name ?? undefined}
+        />
       </Card>
 
-      <Card className='w-full  max-w-5xl border-destructive/50 bg-destructive/5'>
+      <Card className='w-full border-destructive/50 bg-destructive/5'>
         <CardHeader>
           <CardTitle>Danger Zone</CardTitle>
           <CardDescription>

diff --git a/...p/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/UpdatePassword.tsx b/...p/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/UpdatePassword.tsx
@@ -1,10 +1,10 @@
 'use client';
 import { Button } from '@/components/ui/button';
+import { CardContent, CardFooter } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { updatePasswordAction } from '@/data/user/security';
 import { useSAToastMutation } from '@/hooks/useSAToastMutation';
-import { classNames } from '@/utils/classNames';
 import { useInput } from 'rooks';
 
 export const UpdatePassword = () => {
@@ -31,8 +31,8 @@ export const UpdatePassword = () => {
   );
 
   return (
-    <div className="space-y-4">
-      <div className="flex flex-col gap-2 w-1/3">
+    <>
+      <CardContent className="flex flex-col gap-2 w-full">
         <Label htmlFor="email" className="text-muted-foreground">
           Password
         </Label>
@@ -42,26 +42,25 @@ export const UpdatePassword = () => {
             name="password"
             type="password"
             autoComplete="password"
+            className='w-full'
             required
             {...passwordInput}
           />
         </div>
+      </CardContent>
+      <CardFooter>
         <Button
           aria-disabled={isLoading}
           type="button"
+          className="w-full"
           onClick={() => {
             updatePassword();
           }}
-          className={classNames(
-            'flex w-fit justify-center rounded-lg border border-transparent py-3 text-white dark:text-black px-4 text-sm font-medium  shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2',
-            isLoading
-              ? 'bg-yellow-300 dark:bg-yellow-700 '
-              : 'bg-black dark:bg-white hover:bg-gray-900 dark:hover:bg-gray-100  ',
-          )}
+          disabled={isLoading}
         >
           {isLoading ? 'Updating...' : 'Update Password'}
         </Button>
-      </div>
-    </div>
+      </CardFooter>
+    </>
   );
 };
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(user-pages)/settings/security/page.tsx
@@ -1,14 +1,11 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { T } from '@/components/ui/Typography';
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { serverGetLoggedInUser } from '@/utils/server/serverGetLoggedInUser';
 import { UpdatePassword } from './UpdatePassword';
 
 export default async function SecuritySettings() {
   const user = await serverGetLoggedInUser();
   return (
-    <div className="space-y-6 max-w-5xl">
+    <div className="space-y-6 max-w-xl">
       <Card>
         <CardHeader>
           <CardTitle>
@@ -18,29 +15,9 @@ export default async function SecuritySettings() {
             Update your email and password
           </CardDescription>
         </CardHeader>
-        <CardContent className='space-y-6'>
-          <div className="space-y-1">
-            <Label htmlFor="email" className="text-muted-foreground">
-              Email
-            </Label>
-            <div className="flex flex-col gap-2 w-1/3 ">
-              <Input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                value={user.email}
-                readOnly
-                disabled
-                className='mb-1'
-              />
-            </div>
-            <T.Small className=" text-muted-foreground font-normal">
-              Email cannot be changed
-            </T.Small>
-          </div>
-          <UpdatePassword />
-        </CardContent>
+
+        <UpdatePassword />
+
       </Card>
     </div>
   );

diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/OrganizationCreation.tsx
@@ -63,7 +63,7 @@ export function OrganizationCreation({ onSuccess }: OrganizationCreationProps) {
             <p className="text-sm text-destructive">{errors.organizationTitle.message}</p>
           )}
         </div>
-        <div className="space-y-2">
+        {/* <div className="space-y-2">
           <Label htmlFor="organizationSlug">Organization Slug</Label>
           <Input
             id="organizationSlug"
@@ -73,7 +73,7 @@ export function OrganizationCreation({ onSuccess }: OrganizationCreationProps) {
           {errors.organizationSlug && (
             <p className="text-sm text-destructive">{errors.organizationSlug.message}</p>
           )}
-        </div>
+        </div> */}
       </CardContent>
       <CardFooter>
         <Button

diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/ProfileUpdate.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/onboarding/ProfileUpdate.tsx
@@ -22,6 +22,7 @@ export function ProfileUpdate({
   userEmail,
 }: ProfileUpdateProps) {
   const [fullName, setFullName] = useState(userProfile.full_name ?? "");
+  const [userName, setUserName] = useState(userProfile.user_name ?? userProfile.full_name ?? "");
   const [avatarUrl, setAvatarUrl] = useState(userProfile.avatar_url ?? undefined);
   const { toast } = useToast();
 
@@ -31,7 +32,7 @@ export function ProfileUpdate({
   });
 
   const updateProfileMutation = useMutation({
-    mutationFn: () => updateUserProfileNameAndAvatar({ fullName, avatarUrl }, { isOnboardingFlow: true }),
+    mutationFn: () => updateUserProfileNameAndAvatar({ fullName, userName, avatarUrl }, { isOnboardingFlow: true }),
     onSuccess: () => {
       toast({ title: "Profile updated!", description: "Your profile has been successfully updated." });
       onSuccess();
@@ -100,6 +101,16 @@ export function ProfileUpdate({
             </Label>
           </div>
         </div>
+        <div className="space-y-2">
+          <Label htmlFor="user-name">User Name</Label>
+          <Input
+            id="user-name"
+            value={userName}
+            onChange={(e) => setUserName(e.target.value)}
+            placeholder="Your user name"
+            disabled={updateProfileMutation.isLoading}
+          />
+        </div>
         <div className="space-y-2">
           <Label htmlFor="full-name">Full Name</Label>
           <Input