add report abuse buttona and form

src/components/pages/sharedAlbum/AbuseReportForm.tsx

@@ -0,0 +1,140 @@
+import MessageDialog from 'components/MessageDialog';
+import SubmitButton from 'components/SubmitButton';
+import { Formik } from 'formik';
+import React, { useState } from 'react';
+import { Form, FormControl } from 'react-bootstrap';
+import { reportAbuse } from 'services/publicCollectionService';
+import { sleep } from 'utils/common';
+import constants from 'utils/strings/constants';
+import * as Yup from 'yup';
+
+interface Iprops {
+    show: boolean;
+    close: () => void;
+}
+
+enum REPORT_REASON {
+    COPYRIGHT = 'COPYRIGHT',
+    CHILD_ABUSE = 'CHILD_ABUSE',
+    NUDITY = 'NUDITY',
+    OTHER = 'OTHER',
+}
+interface FormValues {
+    reason: REPORT_REASON;
+    comment: string;
+}
+export function AbuseReportForm({ show, close }: Iprops) {
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async () => {
+        try {
+            setLoading(true);
+            reportAbuse();
+            await sleep(1000);
+        } finally {
+            setLoading(false);
+        }
+    };
+    console.log(typeof REPORT_REASON);
+    return (
+        <MessageDialog
+            show={show}
+            onHide={close}
+            attributes={{
+                title: 'abuse report',
+                staticBackdrop: true,
+            }}>
+            <div style={{ padding: '5px 20px' }}>
+                <p>{constants.RECOVERY_KEY_DESCRIPTION}</p>
+                <Formik<FormValues>
+                    initialValues={{
+                        reason: REPORT_REASON.COPYRIGHT,
+                        comment: '',
+                    }}
+                    validationSchema={Yup.object().shape({
+                        email: Yup.mixed<keyof typeof REPORT_REASON>()
+                            .oneOf(Object.values(REPORT_REASON))
+                            .required(constants.REQUIRED),
+                        comment: Yup.string().required(constants.REQUIRED),
+                    })}
+                    validateOnChange={false}
+                    validateOnBlur={false}
+                    onSubmit={handleSubmit}>
+                    {({
+                        values,
+                        errors,
+                        touched,
+                        handleChange,
+                        handleSubmit,
+                    }): JSX.Element => (
+                        <Form noValidate onSubmit={handleSubmit}>
+                            <Form.Group controlId="registrationForm.email">
+                                <Form.Control
+                                    as="select"
+                                    placeholder={constants.ENTER_EMAIL}
+                                    value={values.reason}
+                                    onChange={handleChange('reason')}
+                                    isInvalid={Boolean(
+                                        touched.reason && errors.reason
+                                    )}
+                                    autoFocus
+                                    disabled={loading}>
+                                    <option disabled selected>
+                                        select reason
+                                    </option>
+                                    {Object.values(REPORT_REASON).map(
+                                        (reason) => (
+                                            <option key={reason} value={reason}>
+                                                {String(
+                                                    reason
+                                                ).toLocaleLowerCase()}
+                                            </option>
+                                        )
+                                    )}
+                                </Form.Control>
+                                <FormControl.Feedback type="invalid">
+                                    {errors.reason}
+                                </FormControl.Feedback>
+                            </Form.Group>
+                            {/* <Form.Group>
+                                <Form.Control
+                                    type="text-area"
+                                    placeholder={constants.PASSPHRASE_HINT}
+                                    value={values.passphrase}
+                                    onChange={handleChange('passphrase')}
+                                    isInvalid={Boolean(
+                                        touched.passphrase && errors.passphrase
+                                    )}
+                                    disabled={loading}
+                                />
+                                <Form.Control.Feedback type="invalid">
+                                    {errors.passphrase}
+                                </Form.Control.Feedback>
+                            </Form.Group> */}
+                            {/* <Form.Group>
+                                <Form.Control
+                                    type="password"
+                                    placeholder={constants.RE_ENTER_PASSPHRASE}
+                                    value={values.confirm}
+                                    onChange={handleChange('confirm')}
+                                    isInvalid={Boolean(
+                                        touched.confirm && errors.confirm
+                                    )}
+                                    disabled={loading}
+                                />
+                                <Form.Control.Feedback type="invalid">
+                                    {errors.confirm}
+                                </Form.Control.Feedback>
+                            </Form.Group> */}
+
+                            <SubmitButton
+                                buttonText={constants.SUBMIT}
+                                loading={loading}
+                            />
+                        </Form>
+                    )}
+                </Formik>
+            </div>
+        </MessageDialog>
+    );
+}

src/components/pages/sharedAlbum/OpenInEnte.tsx

@@ -18,7 +18,7 @@ const Wrapper = styled.div`
 function OpenInEnte({ redirect }) {
     return (
         <Wrapper onClick={redirect}>
-            <Button variant="outline-success">Open in ente</Button>
+            <Button variant="outline-success">open in ente</Button>
         </Wrapper>
     );
 }

src/components/pages/sharedAlbum/ReportAbuse.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import styled from 'styled-components';
+
+const Container = styled.div`
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    align-self: flex-end;
+`;
+
+interface Iprops {
+    onClick: () => void;
+}
+
+export default function ReportAbuse(props: Iprops) {
+    return (
+        <Container>
+            <Button onClick={props.onClick}>report abuse?</Button>
+        </Container>
+    );
+}

src/pages/shared-album/index.tsx

@@ -20,6 +20,8 @@ import { mergeMetadata, sortFiles } from 'utils/file';
 import { AppContext } from 'pages/_app';
 import OpenInEnte from 'components/pages/sharedAlbum/OpenInEnte';
 import { CollectionInfo } from 'components/pages/sharedAlbum/CollectionInfo';
+import ReportAbuse from 'components/pages/sharedAlbum/ReportAbuse';
+import { AbuseReportForm } from 'components/pages/sharedAlbum/AbuseReportForm';
 
 export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryContextType =
     {
@@ -38,7 +40,10 @@ export default function PublicCollectionGallery() {
     const [publicFiles, setPublicFiles] = useState<EnteFile[]>(null);
     const [publicCollection, setPublicCollection] = useState<Collection>(null);
     const appContext = useContext(AppContext);
+    const [abuseReportFormView, setAbuseReportFormView] = useState(false);
 
+    const showReportForm = () => setAbuseReportFormView(true);
+    const closeReportForm = () => setAbuseReportFormView(false);
     useEffect(() => {
         const main = async () => {
             const urlParams = new URLSearchParams(window.location.search);
@@ -109,6 +114,11 @@ export default function PublicCollectionGallery() {
                 activeCollection={ALL_SECTION}
                 isSharedCollection
             />
+            <ReportAbuse onClick={showReportForm} />
+            <AbuseReportForm
+                show={abuseReportFormView}
+                close={closeReportForm}
+            />
         </PublicCollectionGalleryContext.Provider>
     );
 }

src/services/publicCollectionService.ts

@@ -239,3 +239,7 @@ const decryptCollectionName = async (
             collectionKey
         )));
 };
+
+export const reportAbuse = () => {
+    return;
+};