From b191090f900933b416eb3f5215bb3107c38103ad Mon Sep 17 00:00:00 2001
From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:08:56 +0200
Subject: [PATCH] feat: tempcommit

---
 src/components/buttons/icon-button.tsx     |   2 +-
 src/components/custom-ui/labeled-input.tsx |   2 +-
 src/components/misc/settings-page.tsx      | 180 ++++++++++++++-------
 src/components/ui/dialog.tsx               |   2 +-
 4 files changed, 124 insertions(+), 62 deletions(-)

diff --git a/src/components/buttons/icon-button.tsx b/src/components/buttons/icon-button.tsx
index 7a88800..4b50e90 100644
--- a/src/components/buttons/icon-button.tsx
+++ b/src/components/buttons/icon-button.tsx
@@ -10,7 +10,7 @@ export function IconButton({
   icon?: ForwardRefExoticComponent<
     Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
   >;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 } & React.ComponentProps<typeof Button>) {
   return (
     <Button type='button' variant='secondary' {...props}>
diff --git a/src/components/custom-ui/labeled-input.tsx b/src/components/custom-ui/labeled-input.tsx
index 8c15514..a3cafcd 100644
--- a/src/components/custom-ui/labeled-input.tsx
+++ b/src/components/custom-ui/labeled-input.tsx
@@ -69,7 +69,7 @@ export default function LabeledInput({
             )}
             type={passwordVisible ? 'text' : type}
             placeholder={placeholder}
-            value={inputValue}
+            defaultValue={inputValue}
             id={name}
             name={name}
             autoComplete={autocomplete}
diff --git a/src/components/misc/settings-page.tsx b/src/components/misc/settings-page.tsx
index df37608..60dc7d9 100644
--- a/src/components/misc/settings-page.tsx
+++ b/src/components/misc/settings-page.tsx
@@ -29,6 +29,7 @@ import { GroupWrapper } from '../wrappers/group-wrapper';
 
 import ProfilePictureUpload from './profile-picture-upload';
 import {
+  BookKey,
   CalendarArrowDown,
   CalendarArrowUp,
   CalendarCheck,
@@ -46,6 +47,14 @@ import {
   UserPen,
 } from 'lucide-react';
 import { IconButton } from '../buttons/icon-button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog';
 
 export default function SettingsPage() {
   const router = useRouter();
@@ -53,6 +62,11 @@ export default function SettingsPage() {
   const { data } = useGetApiUserMe();
   const deleteUser = useDeleteApiUserMe();
 
+  // Move password state hooks here
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [repeatPassword, setRepeatPassword] = useState('');
+
   const renderSettingsContent = () => {
     switch (currentSection) {
       case 'general':
@@ -109,27 +123,52 @@ export default function SettingsPage() {
                 {/*-------------------- General Settings --------------------*/}
                 {/*-------------------- Reset Password --------------------*/}
                 <GroupWrapper title='Reset Password'>
-                  <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
-                    <div>
-                      <LabeledInput
-                        type='password'
-                        label='Current Password'
-                        icon={FileKey}
-                      ></LabeledInput>
-                    </div>
-                    <div>
-                      <LabeledInput
-                        type='password'
-                        label='New Password'
-                        icon={FileKey2}
-                      ></LabeledInput>
-                    </div>
-                    <div>
-                      <LabeledInput
-                        type='password'
-                        label='Repeat Password'
-                        icon={RotateCcwKey}
-                      ></LabeledInput>
+                  <div className='flex flex-col sm:flex-row items-center gap-6'>
+                    <div className='flex flex-col sm:flex-row gap-6 w-full'>
+                      {/* Use the state variables directly */}
+                      <div className='flex-1'>
+                        <LabeledInput
+                          type='password'
+                          label='Current Password'
+                          icon={FileKey}
+                          value={currentPassword}
+                          onChange={(e) => setCurrentPassword(e.target.value)}
+                        />
+                      </div>
+                      <div className='flex-1'>
+                        <LabeledInput
+                          type='password'
+                          label='New Password'
+                          icon={FileKey2}
+                          value={newPassword}
+                          onChange={(e) => setNewPassword(e.target.value)}
+                        />
+                      </div>
+                      <div className='flex-1'>
+                        <LabeledInput
+                          type='password'
+                          label='Repeat Password'
+                          icon={RotateCcwKey}
+                          value={repeatPassword}
+                          onChange={(e) => setRepeatPassword(e.target.value)}
+                        />
+                      </div>
+                      <div className='flex items-end'>
+                        <Button
+                          variant={
+                            currentPassword || newPassword || repeatPassword
+                              ? 'outline_secondary'
+                              : 'outline_muted'
+                          }
+                          size='icon'
+                          className='w-full md:size-9'
+                          disabled={
+                            !(currentPassword || newPassword || repeatPassword)
+                          }
+                        >
+                          <BookKey className='h-[1.2rem] w-[1.2rem]' />
+                        </Button>
+                      </div>
                     </div>
                   </div>
                 </GroupWrapper>
@@ -170,25 +209,49 @@ export default function SettingsPage() {
                   </div>
                 </GroupWrapper>
                 {/*-------------------- Regional Settings --------------------*/}
-                <GroupWrapper title='DANGER ZONE - INSTANT DELETE - NO CONFIRMATION'>
+                {/*-------------------- DANGER ZONE --------------------*/}
+                <GroupWrapper
+                  title='DANGER ZONE'
+                  className='border-destructive'
+                >
                   <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
-                    <Button
-                      onClick={() => {
-                        deleteUser.mutate(undefined, {
-                          onSuccess: () => {
-                            router.push('/api/logout');
-                          },
-                        });
-                      }}
-                      variant='destructive'
-                    >
-                      Delete Account
-                    </Button>
+                    <Dialog>
+                      <DialogTrigger>
+                        <Button variant='destructive'>Delete Account</Button>
+                      </DialogTrigger>
+                      <DialogContent>
+                        <DialogHeader>
+                          <div className='space-y-4'>
+                            <DialogTitle>Are you absolutely sure?</DialogTitle>
+                            <div className='space-y-4'>
+                              <DialogDescription>
+                                This action cannot be undone. This will
+                                permanently delete your account and remove your
+                                data from our servers.
+                              </DialogDescription>
+                              <Button
+                                variant='destructive'
+                                onClick={() => {
+                                  deleteUser.mutate(undefined, {
+                                    onSuccess: () => {
+                                      router.push('/api/logout');
+                                    },
+                                  });
+                                }}
+                              >
+                                Confirm Delete
+                              </Button>
+                            </div>
+                          </div>
+                        </DialogHeader>
+                      </DialogContent>
+                    </Dialog>
                     <span className='text-sm text-muted-foreground pt-1'>
                       Permanently delete your account and all associated data.
                     </span>
                   </div>
                 </GroupWrapper>
+                {/*-------------------- DANGER ZONE --------------------*/}
               </CardContent>
             </ScrollableSettingsWrapper>
           </Card>
@@ -236,35 +299,34 @@ export default function SettingsPage() {
                       </Label>
                       <Switch id='meetingConfirmations' />
                     </div>
-                    <div className='space-y-4 grid grid-cols-[1fr_1fr_auto] items-center'>
-                      <div className='flex items-center justify-between space-x-2'>
-                        <Label
-                          htmlFor='enableMeetingReminders'
-                          className='font-normal'
-                        >
-                          Meeting Reminders
-                        </Label>
-                      </div>
-                      <div>
-                        <Label className='text-sm' htmlFor='remindBefore'>
-                          Remind me before
-                        </Label>
-                        <Select>
-                          <SelectTrigger id='remindBefore'>
-                            <SelectValue placeholder='Select reminder time' />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value='15m'>15 minutes</SelectItem>
-                            <SelectItem value='30m'>30 minutes</SelectItem>
-                            <SelectItem value='1h'>1 hour</SelectItem>
-                            <SelectItem value='1d'>1 day</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
+                    <div className='flex items-center justify-between space-x-2'>
+                      <Label
+                        htmlFor='enableMeetingReminders'
+                        className='font-normal'
+                      >
+                        Meeting Reminders
+                      </Label>
                       <div>
                         <Switch id='enableMeetingReminders' />
                       </div>
                     </div>
+
+                    <div className='flex items-center justify-between space-x-2'>
+                      <Label className='font-normal' htmlFor='remindBefore'>
+                        Remind me before
+                      </Label>
+                      <Select>
+                        <SelectTrigger id='remindBefore'>
+                          <SelectValue placeholder='Select reminder time' />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value='15m'>15 minutes</SelectItem>
+                          <SelectItem value='30m'>30 minutes</SelectItem>
+                          <SelectItem value='1h'>1 hour</SelectItem>
+                          <SelectItem value='1d'>1 day</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
                   </div>
                 </GroupWrapper>
                 {/*-------------------- Meetings --------------------*/}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index e481c76..5f6b7c5 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -69,7 +69,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot='dialog-close'
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className='sr-only'>Close</span>