DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions 2

feat: tempcommit

Browse source
This commit is contained in:
Maximilian Liebmann 2025-06-26 20:25:13 +02:00
parent f658a95b16
commit a308158ca7
4 changed files with 102 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/custom-ui/labeled-input.tsx
View file

@ -1,5 +1,9 @@
import { Input, Textarea } from '@/components/ui/input'; import { Input, Textarea } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import React from 'react';
import { Button } from '../ui/button';
import { Eye, EyeOff } from 'lucide-react';
import { cn } from '@/lib/utils';
export default function LabeledInput({ export default function LabeledInput({
type, type,
@ -12,7 +16,7 @@ export default function LabeledInput({
error, error,
...rest ...rest
}: { }: {
type: 'text' | 'email' | 'password'; type: 'text' | 'email' | 'password' | 'file';
label: string; label: string;
placeholder?: string; placeholder?: string;
value?: string; value?: string;
@ -21,6 +25,8 @@ export default function LabeledInput({
autocomplete?: string; autocomplete?: string;
error?: string; error?: string;
} & React.InputHTMLAttributes<HTMLInputElement>) { } & React.InputHTMLAttributes<HTMLInputElement>) {
const [passwordVisible, setPasswordVisible] = React.useState(false);
return ( return (
<div className='grid grid-cols-1 gap-1'> <div className='grid grid-cols-1 gap-1'>
<Label htmlFor={name}>{label}</Label> <Label htmlFor={name}>{label}</Label>
@ -33,21 +39,36 @@ export default function LabeledInput({
rows={3} rows={3}
/> />
) : ( ) : (
<Input <span className='relative'>
type={type} <Input
placeholder={placeholder} className={cn(
defaultValue={value} type === 'password' ? 'pr-[50px]' : '',
id={name} variantSize === 'big'
name={name} ? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl'
className={ : '',
variantSize === 'big' )}
? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl' type={passwordVisible ? 'text' : type}
: '' placeholder={placeholder}
} defaultValue={value}
autoComplete={autocomplete} id={name}
{...rest} name={name}
/> autoComplete={autocomplete}
{...rest}
/>
{type === 'password' && (
<Button
className='absolute right-0 top-0 w-[36px] h-[36px]'
type='button'
variant={'outline_muted'}
onClick={() => setPasswordVisible((visible) => !visible)}
>
{passwordVisible ? <Eye /> : <EyeOff />}
</Button>
)}
</span>
)} )}
{error && <p className='text-red-500 text-sm mt-1'>{error}</p>} {error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
</div> </div>
); );

4
src/components/misc/settings-dropdown.tsx
View file

@ -45,13 +45,13 @@ const settingsSections: SettingsSection[] = [
{ {
label: 'Account', label: 'Account',
value: 'general', value: 'general',
description: 'Manage your account details and preferences', description: 'Manage account details',
icon: User, icon: User,
}, },
{ {
label: 'Notifications', label: 'Notifications',
value: 'notifications', value: 'notifications',
description: 'Choose how you want to be notified', description: 'Choose notification Preferences',
icon: Bell, icon: Bell,
}, },
{ {

107
src/components/misc/settings-page.tsx
View file

@ -27,6 +27,9 @@ import { useGetApiUserMe } from '@/generated/api/user/user';
import { ThemePicker } from './theme-picker'; import { ThemePicker } from './theme-picker';
import LabeledInput from '../custom-ui/labeled-input'; import LabeledInput from '../custom-ui/labeled-input';
import { GroupWrapper } from '../wrappers/group-wrapper'; import { GroupWrapper } from '../wrappers/group-wrapper';
import { Avatar } from '../ui/avatar';
import Image from 'next/image';
import { User } from 'lucide-react';
export default function SettingsPage() { export default function SettingsPage() {
const router = useRouter(); const router = useRouter();
@ -43,51 +46,50 @@ export default function SettingsPage() {
<CardTitle>Account Settings</CardTitle> <CardTitle>Account Settings</CardTitle>
</CardHeader> </CardHeader>
<CardContent className='space-y-6 mt-2'> <CardContent className='space-y-6 mt-2'>
<GroupWrapper legend='General Settings'> <GroupWrapper title='General Settings'>
<div className='space-y-4'> <div className='space-y-4'>
<div className='flex items-center justify-evenly'> <div className='flex items-center justify-evenly'>
<div> <div>
<Label htmlFor='displayName'>First Name</Label> <LabeledInput
<Input label='First Name'
id='displayName' type='text'
placeholder='Your Name' placeholder='First Name'
defaultValue={data?.data.user.first_name ?? ''} defaultValue={data?.data.user.first_name ?? ''}
/> ></LabeledInput>
</div> </div>
<div> <div>
<Label htmlFor='displayName'>Last Name</Label> <LabeledInput
<Input label='Last Name'
id='displayName' type='text'
placeholder='Your Name' placeholder='Last Name'
defaultValue={data?.data.user.last_name ?? ''} defaultValue={data?.data.user.last_name ?? ''}
/> ></LabeledInput>
</div> </div>
</div> </div>
<div className='space-y-2'> <div className='space-y-2'>
<Label htmlFor='displayName'>Display Name</Label> <LabeledInput
<Input label='Display Name'
id='displayName' type='text'
placeholder='Your Name' placeholder='Display Name'
defaultValue={data?.data.user.name} defaultValue={data?.data.user.name}
/> ></LabeledInput>
</div> </div>
<div className='space-y-2'> <div className='space-y-2 space-b-2'>
<Label htmlFor='email'>Email Address</Label> <LabeledInput
<Input
id='email'
type='email' type='email'
placeholder='your.email@example.com' label='Email Address'
readOnly placeholder='Your E-Mail'
defaultValue={data?.data.user.email} defaultValue={data?.data.user.email ?? ''}
/> ></LabeledInput>
<p className='text-sm text-muted-foreground'>
<span className='text-sm text-muted-foreground'>
Email might be managed by your SSO provider. Email might be managed by your SSO provider.
</p> </span>
</div> </div>
</div> </div>
</GroupWrapper> </GroupWrapper>
<GroupWrapper legend='Reset Password'> <GroupWrapper title='Reset Password'>
<div className='flex items-center justify-evenly'> <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
<div> <div>
<LabeledInput <LabeledInput
type='password' type='password'
@ -114,12 +116,25 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
</GroupWrapper> </GroupWrapper>
<div className='space-y-2'> <div className='space-y-2 grid grid-cols-[1fr_auto] gap-4'>
<Label htmlFor='profilePicture'>Profile Picture</Label> <LabeledInput
<Input id='profilePicture' type='file' /> label='Profile Picture'
<p className='text-sm text-muted-foreground'> type='file'
Upload a new profile picture. placeholder='Upload Profile Picture'
</p> defaultValue={data?.data.user.image ?? ''}
></LabeledInput>
<Avatar className='flex justify-center items-center'>
{data?.data.user.image ? (
<Image
src={data?.data.user.image}
alt='Avatar'
width='20'
height='20'
/>
) : (
<User />
)}
</Avatar>
</div> </div>
<div className='space-y-2'> <div className='space-y-2'>
<Label htmlFor='timezone'>Timezone</Label> <Label htmlFor='timezone'>Timezone</Label>
@ -143,9 +158,9 @@ export default function SettingsPage() {
</div> </div>
<div className='pt-4'> <div className='pt-4'>
<Button variant='secondary'>Delete Account</Button> <Button variant='secondary'>Delete Account</Button>
<p className='text-sm text-muted-foreground pt-1'> <span className='text-sm text-muted-foreground pt-1'>
Permanently delete your account and all associated data. Permanently delete your account and all associated data.
</p> </span>
</div> </div>
</CardContent> </CardContent>
</ScrollableSettingsWrapper> </ScrollableSettingsWrapper>
@ -277,10 +292,10 @@ export default function SettingsPage() {
</legend> </legend>
<div className='space-y-2'> <div className='space-y-2'>
<Label>Working Hours</Label> <Label>Working Hours</Label>
<p className='text-sm text-muted-foreground'> <span className='text-sm text-muted-foreground'>
Define your typical available hours (e.g., Monday-Friday, Define your typical available hours (e.g., Monday-Friday,
9 AM - 5 PM). 9 AM - 5 PM).
</p> </span>
<Button variant='outline_muted' size='sm'> <Button variant='outline_muted' size='sm'>
Set Working Hours Set Working Hours
</Button> </Button>
@ -289,9 +304,9 @@ export default function SettingsPage() {
<Label htmlFor='minNoticeBooking'> <Label htmlFor='minNoticeBooking'>
Minimum Notice for Bookings Minimum Notice for Bookings
</Label> </Label>
<p className='text-sm text-muted-foreground'> <span className='text-sm text-muted-foreground'>
Min time before a booking can be made. Min time before a booking can be made.
</p> </span>
<div className='space-y-2'> <div className='space-y-2'>
<Input <Input
id='bookingWindow' id='bookingWindow'
@ -304,9 +319,9 @@ export default function SettingsPage() {
<Label htmlFor='bookingWindow'> <Label htmlFor='bookingWindow'>
Booking Window (days in advance) Booking Window (days in advance)
</Label> </Label>
<p className='text-sm text-muted-foreground'> <span className='text-sm text-muted-foreground'>
Max time in advance a booking can be made. Max time in advance a booking can be made.
</p> </span>
<Input <Input
id='bookingWindow' id='bookingWindow'
type='number' type='number'
@ -378,7 +393,7 @@ export default function SettingsPage() {
<Label htmlFor='whoCanSeeFull'> <Label htmlFor='whoCanSeeFull'>
Who Can See Your Full Calendar Details? Who Can See Your Full Calendar Details?
</Label> </Label>
<p className='text-sm text-muted-foreground'> <span className='text-sm text-muted-foreground'>
(Override for Default Visibility) (Override for Default Visibility)
<br /> <br />
<span className='text-sm text-muted-foreground'> <span className='text-sm text-muted-foreground'>
@ -386,7 +401,7 @@ export default function SettingsPage() {
calendar. You can set specific friends or groups to see calendar. You can set specific friends or groups to see
your full calendar details. your full calendar details.
</span> </span>
</p> </span>
<Select> <Select>
<SelectTrigger id='whoCanSeeFull'> <SelectTrigger id='whoCanSeeFull'>
<SelectValue placeholder='Select audience' /> <SelectValue placeholder='Select audience' />
@ -420,10 +435,10 @@ export default function SettingsPage() {
<div className='space-y-2'> <div className='space-y-2'>
<Label>Blocked Users</Label> <Label>Blocked Users</Label>
<Button variant='outline_muted'>Manage Blocked Users</Button> <Button variant='outline_muted'>Manage Blocked Users</Button>
<p className='text-sm text-muted-foreground'> <span className='text-sm text-muted-foreground'>
Prevent specific users from seeing your calendar or booking Prevent specific users from seeing your calendar or booking
time. time.
</p> </span>
</div> </div>
</CardContent> </CardContent>
</ScrollableSettingsWrapper> </ScrollableSettingsWrapper>

6
src/components/wrappers/group-wrapper.tsx
View file

@ -3,20 +3,20 @@ import type * as React from 'react';
interface ScrollableSettingsWrapperProps { interface ScrollableSettingsWrapperProps {
className?: string; className?: string;
legend?: string; title?: string;
children: React.ReactNode; children: React.ReactNode;
} }
export function GroupWrapper({ export function GroupWrapper({
className, className,
legend, title,
children, children,
}: ScrollableSettingsWrapperProps) { }: ScrollableSettingsWrapperProps) {
return ( return (
<fieldset <fieldset
className={cn('space-t-4 p-4 border rounded-md shadow-md', className)} className={cn('space-t-4 p-4 border rounded-md shadow-md', className)}
> >
<legend className='text-sm font-medium px-1'>{legend}</legend> <legend className='text-sm font-medium px-1'>{title}</legend>
{children} {children}
</fieldset> </fieldset>
); );