admin photos for board members

.vscode/extensions.json

@@ -1,20 +1,20 @@
 {
-	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
-	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
-	// List of extensions which should be recommended for users of this workspace.
-	"recommendations": [
-		"esbenp.prettier-vscode",
-		"rvest.vs-code-prettier-eslint",
-		"dbaeumer.vscode-eslint",
-		"stylelint.vscode-stylelint",
-		"hex-ci.stylelint-plus",
-		"formulahendry.auto-rename-tag",
-		"formulahendry.auto-close-tag",
-		"vincaslt.highlight-matching-tag",
-		"christian-kohler.npm-intellisense",
-		"christian-kohler.path-intellisense",
-		"burkeholland.simple-react-snippets"
-	],
-	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-	"unwantedRecommendations": []
-}
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "rvest.vs-code-prettier-eslint",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "hex-ci.stylelint-plus",
+    "formulahendry.auto-rename-tag",
+    "formulahendry.auto-close-tag",
+    "vincaslt.highlight-matching-tag",
+    "christian-kohler.npm-intellisense",
+    "christian-kohler.path-intellisense",
+    "burkeholland.simple-react-snippets"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}

cypress/tsconfig.json

@@ -1,16 +1,8 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "es5",
-      "dom"
-    ],
-    "types": [
-      "cypress",
-      "node"
-    ]
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
   },
-  "include": [
-    "**/*.ts"
-  ]
-}
+  "include": ["**/*.ts"]
+}

public/site.webmanifest

@@ -1,19 +1,19 @@
 {
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
 }

src/components/common/Cropper/index.tsx

@@ -80,6 +80,7 @@ const Cropper = ({
   const handleImageError = useCallback(() => {
     if (file !== null) {
       showToast('This image format is not supported.');
+
       onClose();
     }
   }, [file, onClose]);

src/components/common/VerticalFormItem/style.module.scss

@@ -60,11 +60,7 @@
       padding: 2px;
       transition: 0.3s ease;
       width: 100%;
-
-
     }
-
-
   }
 
   .formError {

src/lib/api/KlefkiAPI.ts

@@ -114,3 +114,17 @@ export const generateACMURL = async (acmurlInfo: GenerateACMURLRequest): Promise
     },
   });
 };
+
+export const uploadBoardPhoto = async (file: File): Promise<KlefkiAPIResponse> => {
+  const { klefki } = config;
+  const formData = new FormData();
+  formData.append('file', file);
+  const requestUrl = `${klefki.baseUrl}${klefki.endpoints.board.photoUpload}`;
+  const response = await axios.post<KlefkiAPIResponse>(requestUrl, formData, {
+    headers: {
+      Authorization: `Bearer ${generateToken(klefki.key)}`,
+    },
+  });
+
+  return response.data;
+};

src/lib/config.ts

@@ -73,6 +73,9 @@ const config = {
       acmurl: {
         generate: '/acmurl/generate',
       },
+      board: {
+        photoUpload: '/board/uploadPhoto',
+      },
     },
   },
   defaultEventImage: Cat,
@@ -110,6 +113,7 @@ const config = {
     awardMilestone: '/admin/milestone',
     viewResumes: '/admin/resumes',
     manageUserAccess: '/admin/access',
+    updateProfile: '/admin/profile',
     store: {
       items: '/admin/store/items',
       pickup: '/admin/store/pickup',

src/lib/types/apiResponses.ts

@@ -529,6 +529,7 @@ export interface DeleteResumeResponse extends ApiResponse {}
 export interface KlefkiAPIResponse {
   message: string;
   error: string;
+  url?: string;
 }
 
 export interface NotionEventDetails {

src/pages/admin/index.tsx

@@ -99,6 +99,7 @@ const AdminPage = ({ user: { accessType }, preview }: AdminProps) => {
           <>
             <LinkButton href={config.admin.viewResumes}>View User Resumes</LinkButton>
             <LinkButton href={config.admin.manageUserAccess}>Manage User Access</LinkButton>
+            <LinkButton href={config.admin.updateProfile}>Update Board Website Photo</LinkButton>
           </>
         ) : (
           'Restricted Access'

src/pages/admin/profile.tsx

@@ -0,0 +1,163 @@
+import { VerticalForm, VerticalFormButton, VerticalFormTitle, Cropper } from '@/components/common';
+import { showToast, config } from '@/lib';
+import withAccessType, { GetServerSidePropsWithAuth } from '@/lib/hoc/withAccessType';
+import { PermissionService } from '@/lib/services';
+import { PrivateProfile } from '@/lib/types/apiResponses';
+import { reportError } from '@/lib/utils';
+import { KlefkiAPI } from '@/lib/api';
+
+import type { NextPage } from 'next';
+import Image from 'next/image';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import { ChangeEvent, useEffect, useState, useRef } from 'react';
+
+interface UploadBoardPhotoProps {
+  user: PrivateProfile;
+}
+interface FormValues {
+  photo: File;
+}
+const UpdateProfilePage: NextPage<UploadBoardPhotoProps> = ({
+  user: { firstName, lastName },
+}: UploadBoardPhotoProps) => {
+  const { handleSubmit } = useForm<FormValues>();
+  const [file, setFile] = useState<Blob | null>(null);
+  const [croppedImg, setCroppedImg] = useState<Blob | null>(null);
+  const [uploadedURL, setUploadedURL] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null); // Reference to the hidden file input
+  const [previewURL, setPreviewURL] = useState<string>('');
+
+  const handleUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const uploadedFile = e.target.files?.[0] || null;
+    e.currentTarget.value = '';
+    const maxFileSize = 5 * 1024 * 1024;
+
+    if (uploadedFile) {
+      if (!uploadedFile.type.startsWith('image/')) {
+        showToast('Unsupported file type. Please upload an image.');
+        return;
+      }
+      if (uploadedFile.size > maxFileSize) {
+        showToast('File size exceeds the 5MB limit. Please upload a smaller image.');
+        return;
+      }
+      setUploadedURL(null);
+      setFile(uploadedFile);
+    }
+  };
+
+  const handleCrop = async (croppedFile: Blob) => {
+    setCroppedImg(croppedFile);
+
+    setPreviewURL(URL.createObjectURL(croppedFile));
+  };
+
+  const triggerFileInput = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click(); // Simulate a click on the hidden file input
+    }
+  };
+
+  const onSubmit: SubmitHandler<FormValues> = async () => {
+    if (!croppedImg) {
+      showToast('Please crop your image to submit!');
+      return;
+    }
+    try {
+      const croppedFile = new File(
+        [croppedImg],
+        `${firstName}_${lastName}.${croppedImg.type.split('/')[1]}`,
+        {
+          type: croppedImg.type,
+        }
+      );
+
+      const response = await KlefkiAPI.uploadBoardPhoto(croppedFile);
+      showToast('Photo uploaded successfully!');
+      if (response.url) {
+        setUploadedURL(response.url);
+      }
+    } catch (error) {
+      reportError('Error found!', error);
+      setUploadedURL(null);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (previewURL) {
+        URL.revokeObjectURL(previewURL); // Clean up the blob URL
+      }
+    };
+  }, [previewURL]);
+
+  return (
+    <VerticalForm onEnterPress={handleSubmit(onSubmit)}>
+      <VerticalFormTitle
+        text="Upload Board Photo"
+        description="Upload your Board Photo on the ACM Website"
+      />
+      {uploadedURL && (
+        <div>
+          <h1>Your Image URL is: </h1>
+          <a href={uploadedURL}>{uploadedURL}</a>
+        </div>
+      )}
+      {!uploadedURL && croppedImg && (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <Image src={previewURL} width={200} height={200} alt="preview photo" />
+        </div>
+      )}
+
+      <VerticalFormButton
+        type="button"
+        display="button2"
+        text="Upload New Photo"
+        onClick={triggerFileInput}
+      />
+
+      <input
+        type="file"
+        accept="image/*"
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        onChange={handleUpload}
+      />
+
+      <Cropper
+        file={file}
+        aspectRatio={1}
+        circle={false}
+        maxFileHeight={5000}
+        maxSize={5 * 1024 * 1024}
+        onCrop={handleCrop}
+        onClose={() => setFile(null)}
+      />
+
+      {!uploadedURL && croppedImg && (
+        <VerticalFormButton
+          type="button"
+          display="button1"
+          text="Submit Photo"
+          onClick={handleSubmit(onSubmit)}
+        />
+      )}
+    </VerticalForm>
+  );
+};
+export default UpdateProfilePage;
+
+const getServerSidePropsFunc: GetServerSidePropsWithAuth = async () => {
+  return {
+    props: {
+      title: 'Upload Board Photo',
+    },
+  };
+};
+
+export const getServerSideProps = withAccessType(
+  getServerSidePropsFunc,
+  PermissionService.canViewAdminPage,
+  { redirectTo: config.admin.homeRoute }
+);