feat: tempcommit

src/app/api/logout/route.ts

@@ -0,0 +1,8 @@
+import { signOut } from '@/auth';
+import { NextResponse } from 'next/server';
+
+export const GET = async () => {
+  await signOut();
+
+  return NextResponse.redirect('/login');
+};

src/components/custom-ui/labeled-input.tsx

@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils';
 export default function LabeledInput({
   type,
   label,
+  subtext,
   placeholder,
   value,
   name,
@@ -16,8 +17,8 @@ export default function LabeledInput({
   error,
   ...rest
 }: {
-  type: 'text' | 'email' | 'password' | 'file';
   label: string;
+  subtext?: string;
   placeholder?: string;
   value?: string;
   name?: string;
@@ -30,6 +31,11 @@ export default function LabeledInput({
   return (
     <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
+      {subtext && (
+        <Label className='text-sm text-muted-foreground' htmlFor={name}>
+          {subtext}
+        </Label>
+      )}
       {variantSize === 'textarea' ? (
         <Textarea
           placeholder={placeholder}

src/components/misc/settings-page.tsx

@@ -22,17 +22,20 @@ import {
 } from '@/components/ui/select';
 import { SettingsDropdown } from '@/components/misc/settings-dropdown';
 import { useRouter } from 'next/navigation';
-import { useGetApiUserMe } from '@/generated/api/user/user';
+import { useDeleteApiUserMe, useGetApiUserMe } from '@/generated/api/user/user';
 import { ThemePicker } from './theme-picker';
 import LabeledInput from '../custom-ui/labeled-input';
 import { GroupWrapper } from '../wrappers/group-wrapper';
 
 import ProfilePictureUpload from './profile-picture-upload';
+import { LogOut } from 'lucide-react';
+import { signOut } from '@/auth';
 
 export default function SettingsPage() {
   const router = useRouter();
   const [currentSection, setCurrentSection] = useState('general');
   const { data } = useGetApiUserMe();
+  const deleteUser = useDeleteApiUserMe();
 
   const renderSettingsContent = () => {
     switch (currentSection) {
@@ -145,7 +148,13 @@ export default function SettingsPage() {
                 </GroupWrapper>
                 <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
                   <Button
-                    // onClick={() => DeleteAccount }
+                    onClick={() => {
+                      deleteUser.mutate(undefined, {
+                        onSuccess: () => {
+                          router.push('/api/logout');
+                        },
+                      });
+                    }}
                     variant='destructive'
                   >
                     Delete Account
@@ -259,9 +268,10 @@ export default function SettingsPage() {
                 <CardTitle>Calendar & Availability</CardTitle>
               </CardHeader>
               <CardContent className='space-y-6'>
-                <fieldset className='space-y-4 p-4 border rounded-md'>
+                {/*--------------------* Calendar --------------------*/}
-                  <legend className='text-sm font-medium px-1'>Display</legend>
+                <GroupWrapper title='Calendar'>
-                  <div className='space-y-2'>
+                  <div className='space-y-4'>
+                    <div className='grid grid-cols-1 gap-1'>
                       <Label htmlFor='defaultCalendarView'>
                         Default Calendar View
                       </Label>
@@ -276,7 +286,7 @@ export default function SettingsPage() {
                         </SelectContent>
                       </Select>
                     </div>
-                  <div className='space-y-2'>
+                    <div className='grid grid-cols-1 gap-1'>
                       <Label htmlFor='weekStartsOn'>Week Starts On</Label>
                       <Select>
                         <SelectTrigger id='weekStartsOn'>
@@ -294,63 +304,58 @@ export default function SettingsPage() {
                       </Label>
                       <Switch id='showWeekends' defaultChecked />
                     </div>
-                </fieldset>
+                  </div>
+                </GroupWrapper>
+                {/*--------------------* Calendar --------------------*/}
 
-                <fieldset className='space-y-4 p-4 border rounded-md'>
+                {/*--------------------* Availability --------------------*/}
-                  <legend className='text-sm font-medium px-1'>
+                <GroupWrapper title='Availability'>
-                    Availability
+                  <div className='space-y-4'>
-                  </legend>
                     <div className='space-y-2'>
                       <Label>Working Hours</Label>
                       <span className='text-sm text-muted-foreground'>
-                      Define your typical available hours (e.g., Monday-Friday,
+                        Define your typical available hours (e.g.,
-                      9 AM - 5 PM).
+                        Monday-Friday, 9 AM - 5 PM).
                       </span>
                       <Button variant='outline_muted' size='sm'>
                         Set Working Hours
                       </Button>
                     </div>
                     <div className='space-y-2'>
-                    <Label htmlFor='minNoticeBooking'>
+                      <LabeledInput
-                      Minimum Notice for Bookings
-                    </Label>
-                    <span className='text-sm text-muted-foreground'>
-                      Min time before a booking can be made.
-                    </span>
-                    <div className='space-y-2'>
-                      <Input
-                        id='bookingWindow'
                         type='text'
+                        label='Minimum Notice for Bookings'
+                        subtext='Min time before a booking can be made.'
                         placeholder='e.g., 1h'
-                      />
+                        defaultValue={''}
-                    </div>
+                      ></LabeledInput>
                     </div>
                     <div className='space-y-2'>
-                    <Label htmlFor='bookingWindow'>
+                      <LabeledInput
-                      Booking Window (days in advance)
+                        type='text'
-                    </Label>
+                        label='Booking Window (days in advance)'
-                    <span className='text-sm text-muted-foreground'>
+                        subtext='Max time in advance a booking can be made.'
-                      Max time in advance a booking can be made.
-                    </span>
-                    <Input
-                      id='bookingWindow'
-                      type='number'
                         placeholder='e.g., 30d'
-                    />
+                        defaultValue={''}
+                      ></LabeledInput>
                     </div>
-                </fieldset>
+                  </div>
+                </GroupWrapper>
+                {/*--------------------* Availability --------------------*/}
 
+                {/*--------------------* iCalendar Integration --------------------*/}
                 <fieldset className='space-y-4 p-4 border rounded-md'>
                   <legend className='text-sm font-medium px-1'>
                     iCalendar Integration
                   </legend>
                   <div className='space-y-2'>
-                    <Label htmlFor='icalImport'>Import iCal Feed URL</Label>
+                    <LabeledInput
-                    <Input
-                      id='icalImport'
                       type='url'
+                      label='Import iCal Feed URL'
+                      subtext='Max time in advance a booking can be made.'
                       placeholder='https://calendar.example.com/feed.ics'
-                    />
+                      defaultValue={''}
+                    ></LabeledInput>
                     <Button size='sm' className='mt-1'>
                       Add Feed
                     </Button>
@@ -365,6 +370,7 @@ export default function SettingsPage() {
                     </Button>
                   </div>
                 </fieldset>
+                {/*--------------------* iCalendar Integration --------------------*/}
               </CardContent>
             </ScrollableSettingsWrapper>
           </Card>