Skip to content

Commit

Permalink
style: upload user profile pic
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amama-Fatima
Amama-Fatima committed May 3, 2024
1 parent 0915fe9 commit 3bdf085
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 89 deletions.
2 changes: 1 addition & 1 deletion src/app/(lobby)/create-account/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import PageDescriptionHeader from '@/components/layout/page-description-header';

const CreateAccountPage = () => {
return (
<div className='flex flex-col gap-6 mt-8'>
<div className='flex flex-col gap-6 mt-8 mb-6'>
<div className='ml-6'>
<PageDescriptionHeader
title='Sign Up Form'
Expand Down
133 changes: 71 additions & 62 deletions src/components/forms/user-signup-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import UploadFile from '@/components/upload-file';

const UserSignupForm = () => {
const [isLoading, setIsLoading] = useState(false);
Expand All @@ -33,6 +34,7 @@ const UserSignupForm = () => {
name: '',
email: '',
password: '',
file: '',
},
});

Expand Down Expand Up @@ -64,70 +66,77 @@ const UserSignupForm = () => {
onSubmit={form.handleSubmit(onSubmit)}
className='mx-auto grid w-full max-w-md gap-6'
>
<div className='flex flex-col justify-between gap-1'>
<div className=''>
<FormField
control={form.control}
name='name'
render={({ field }) => (
<FormItem>
<FormLabel>Full Name</FormLabel>
<FormControl>
<Input
id='add-name'
type='text'
placeholder='Your Name'
required
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className='flex flex-col justify-between gap-3'>
<FormField
control={form.control}
name='name'
render={({ field }) => (
<FormItem>
<FormLabel>Full Name</FormLabel>
<FormControl>
<Input
id='add-name'
type='text'
placeholder='Your Name'
required
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='file'
render={() => (
<FormItem className='flex flex-col gap-2'>
<FormLabel>Profile Picture</FormLabel>
<FormControl>
<UploadFile setValue={form.setValue} name='file' />
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<div className=''>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
id='add-email'
type='text'
placeholder='Your Email'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
id='add-email'
type='text'
placeholder='Your Email'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<div className=''>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
id='add-password'
type='password'
placeholder='Enter Password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
id='add-password'
type='password'
placeholder='Enter Password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className='flex justify-end'>
<Button type='submit' disabled={isLoading} size='sm'>
Expand Down
59 changes: 33 additions & 26 deletions src/lib/schemas.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,37 @@
import { z } from 'zod';

export const userSignupFormSchema = z.object({
const MAX_FILE_SIZE = 700000;
function checkFileType(file: File) {
if (file?.name) {
const fileType = file.name.split('.').pop();
if (
fileType === 'docx' ||
fileType === 'pdf' ||
fileType === 'jpeg' ||
fileType === 'png'
)
return true;
return false;
}
}

export const fileSchema = z.object({
file: z
.any()
.refine((file: File) => file?.size !== 0, 'File is required')
.refine((file: File) => {
if (file?.size) {
return file.size <= MAX_FILE_SIZE;
}
return false;
}, `File size should be less than ${MAX_FILE_SIZE / 1000}KB`)
.refine(
(file: File) => checkFileType(file),
'File should be of type docx or pdf'
),
});

export const userSignupFormSchema = fileSchema.extend({
name: z.string(),
// image: z.string(),
email: z.string().email(),
Expand Down Expand Up @@ -92,30 +123,6 @@ export const projectSchema = z.object({
.default('IN_PROGRESS'),
});

const MAX_FILE_SIZE = 700000;
function checkFileType(file: File) {
if (file?.name) {
const fileType = file.name.split('.').pop();
if (fileType === 'docx' || fileType === 'pdf') return true;
return false;
}
}

export const fileSchema = z.object({
file: z
.any()
.refine((file: File) => file?.size !== 0, 'File is required')
.refine((file: File) => {
if (file?.size) {
return file.size <= MAX_FILE_SIZE;
}
return false;
}, `File size should be less than ${MAX_FILE_SIZE / 1000}KB`)
.refine(
(file: File) => checkFileType(file),
'File should be of type docx or pdf'
),
});
//task schema extends file schema
export const taskFormSchema = fileSchema.extend({
title: z.string(),
Expand All @@ -136,6 +143,7 @@ const fileRecordSchema = z.object({
uploader_id: z.string().uuid(),
});

export type fileSchemaType = z.infer<typeof fileSchema>;
export type userSignupFormSchemaType = z.infer<typeof userSignupFormSchema>;
export type userProfileSchemaType = z.infer<typeof userProfileSchema>;
export type memberFormSchemaType = z.infer<typeof memberFormSchema>;
Expand All @@ -147,7 +155,6 @@ export type notificationSchemaType = z.infer<typeof notificationSchema>;
export type invitationSchemaType = z.infer<typeof invitationSchema>;
export type projectFormSchemaType = z.infer<typeof projectFormSchema>;
export type projectSchemaType = z.infer<typeof projectSchema>;
export type fileSchemaType = z.infer<typeof fileSchema>;
export type taskFormSchemaType = z.infer<typeof taskFormSchema>;
export type taskSchemaType = z.infer<typeof taskSchema>;
export type fileRecordSchemaType = z.infer<typeof fileRecordSchema>;
5 changes: 5 additions & 0 deletions supabase/migrations/20240427202604_storage-and-tasks-table.sql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,9 @@ CREATE POLICY "Enable all operations to authenticated users 2lrraq_2" ON storage
CREATE POLICY "Enable all operations to authenticated users 2lrraq_3" ON storage.objects FOR DELETE TO authenticated USING (bucket_id = 'taskFiles');


insert into storage.buckets
(id, name, public)
values
('userImages', 'userImages', false);

CREATE POLICY "Enable insert for all lhb5lv_0" ON storage.objects FOR INSERT TO public WITH CHECK (bucket_id = 'userImages');

0 comments on commit 3bdf085

Please sign in to comment.