ShareQuizModal and able to copy quiz URL

client/src/components/ShareQuizModal/ShareQuizModal.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Dialog, DialogTitle, DialogActions, Button, Tooltip, IconButton } from '@mui/material';
+import { Share } from '@mui/icons-material';
+import { QuizType } from '../../Types/QuizType';
+import ApiService from '../../services/ApiService';
+
+interface ShareQuizModalProps {
+    quiz: QuizType;
+}
+
+const ShareQuizModal: React.FC<ShareQuizModalProps> = ({ quiz }) => {
+    const [open, setOpen] = useState(false);
+
+    const handleOpenModal = () => setOpen(true);
+
+    const handleCloseModal = () => setOpen(false);
+
+    const handleShareByEmail = async () => {
+        const email = prompt(`Veuillez saisir l'email de la personne avec qui vous souhaitez partager ce quiz`, "");
+
+        if (email) {
+            try {
+                const result = await ApiService.ShareQuiz(quiz._id, email);
+
+                if (!result) {
+                    window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
+                    return;
+                }
+
+                window.alert(`Quiz partagé avec succès!`);
+            } catch (error) {
+                console.error('Erreur lors du partage du quiz:', error);
+            }
+        }
+
+        handleCloseModal();
+    };
+
+    const handleShareByUrl = () => {
+        const quizUrl = `${window.location.origin}/teacher/share/${quiz._id}`;
+        navigator.clipboard.writeText(quizUrl)
+            .then(() => {
+                window.alert('URL copied to clipboard!');
+            })
+            .catch(() => {
+                window.alert('Failed to copy URL to clipboard.');
+            });
+
+        handleCloseModal();
+    };
+
+    return (
+        <>
+            <Tooltip title="Partager quiz" placement="top">
+                <IconButton color="primary" onClick={handleOpenModal}>
+                    <Share />
+                </IconButton>
+            </Tooltip>
+
+            <Dialog open={open} onClose={handleCloseModal} fullWidth maxWidth="xs">
+                <DialogTitle sx={{ textAlign: "center" }}>Choisissez une méthode de partage</DialogTitle>
+                <DialogActions sx={{ display: "flex", justifyContent: "center", gap: 2 }}>
+                    <Button onClick={handleShareByEmail}>Partager par email</Button>
+                    <Button onClick={handleShareByUrl}>Partager par URL</Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+
+export default ShareQuizModal;

client/src/pages/Teacher/Dashboard/Dashboard.tsx

@@ -36,6 +36,7 @@ import {
     Share,
     // DriveFileMove
 } from '@mui/icons-material';
+import ShareQuizModal from 'src/components/ShareQuizModal/ShareQuizModal';
 
 // Create a custom-styled Card component
 const CustomCard = styled(Card)({
@@ -342,26 +343,6 @@ const Dashboard: React.FC = () => {
         navigate(`/teacher/manage-room/${quiz._id}`);
     }
 
-    const handleShareQuiz = async (quiz: QuizType) => {
-        try {
-            const email = prompt(`Veuillez saisir l'email de la personne avec qui vous souhaitez partager ce quiz`, "");
-
-            if (email) {
-                const result = await ApiService.ShareQuiz(quiz._id, email);
-
-                if (!result) {
-                    window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
-                    return;
-                }
-
-                window.alert(`Quiz partagé avec succès!`)
-            }
-
-        } catch (error) {
-            console.error('Erreur lors du partage du quiz:', error);
-        }
-    }
-
 
 
 
@@ -510,12 +491,9 @@ const Dashboard: React.FC = () => {
                                             > <DeleteOutline /> </IconButton>
                                         </Tooltip>
 
-                                        <Tooltip title="Partager quiz" placement="top">
+                                        <div className="quiz-share">
-                                            <IconButton
+                                                    <ShareQuizModal quiz={quiz} />
-                                                color="primary"
+                                        </div>
-                                                onClick={() => handleShareQuiz(quiz)}
-                                            > <Share /> </IconButton>
-                                        </Tooltip>
                                     </div>
                                 </div>
                             ))}

client/src/pages/Teacher/Share/Share.tsx

@@ -91,42 +91,39 @@ const Share: React.FC = () => {
     };
 
     return (
-        <div className='quizImport'>
+<div className='quizImport'>
-
     <div className='importHeader'>
         <ReturnButton />
-
+        <div className='titleContainer'>
-                <div className='title'>Importer quiz: {quizTitle}</div>
+            <div className='mainTitle'>Importation du Quiz: {quizTitle}</div>
-
+            <div className='subTitle'>
+                Vous êtes sur le point d'importer le quiz <strong>{quizTitle}</strong>, choisissez un dossier dans lequel enregistrer ce nouveau quiz.
+            </div>
+        </div>
         <div className='dumb'></div>
     </div>
 
     <div className='editSection'>
-
+        <div className='formContainer'>
-                <div>
-
             <NativeSelect
                 id="select-folder"
                 color="primary"
                 value={selectedFolder}
                 onChange={handleSelectFolder}
+                className="folderSelect"
             >
                 <option disabled value=""> Choisir un dossier... </option>
-
                 {folders.map((folder: FolderType) => (
                     <option value={folder._id} key={folder._id}> {folder.title} </option>
                 ))}
             </NativeSelect>
 
-                    <Button variant="contained" onClick={handleQuizSave}>
+            <Button variant="contained" onClick={handleQuizSave} className="saveButton">
                 Enregistrer
             </Button>
-
         </div>
-
-            </div>
-
     </div>
+</div>
     );
 };
 

client/src/pages/Teacher/Share/share.css

@@ -3,19 +3,58 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-content: stretch
+    align-content: stretch;
 }
+
 .quizImport .importHeader .returnButton {
     flex-basis: 10%;
-
     display: flex;
     justify-content: center;
 }
 
-.quizImport .importHeader .title {
+.quizImport .importHeader .titleContainer {
     flex-basis: auto;
+    text-align: center; /* Center the title and subtitle */
+}
+
+.quizImport .importHeader .mainTitle {
+    font-size: 44px; /* Larger font size for the main title */
+    font-weight: bold; /* Remove bold */
+    color: #333; /* Slightly paler color */
+}
+
+.quizImport .importHeader .subTitle {
+    font-size: 14px; /* Smaller font size for the subtitle */
+    color: #666; /* Pale gray color */
+    margin-top: 8px; /* Add some space between the title and subtitle */
 }
 
 .quizImport .importHeader .dumb {
     flex-basis: 10%;
 }
+
+.quizImport .editSection {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.quizImport .editSection .formContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px; /* Adds space between the select and button */
+    width: 100%;
+    max-width: 400px; /* Limits the width of the form container */
+}
+
+.quizImport .editSection .folderSelect {
+    width: 100%; /* Ensures the select element takes the full width of its container */
+}
+
+.quizImport .editSection .saveButton {
+    width: 100%; /* Makes the button take the full width of its container */
+    padding: 10px 20px; /* Increases the button's padding for a larger appearance */
+    font-size: 16px; /* Increases the font size for better visibility */
+}