Confirmation modal

README.md

@@ -48,7 +48,7 @@ _**On first login, new user must change password by using the `passwd` command**
 
 - ### Using Local Setup
   - Run `install.ps1` (recommended) or `install.bat` (legacy) or `install.sh` (on linux) to get dependencies set up locally
-    - `install.ps1` supports performing a clean installation by using the `-CleanInstall` flag. Use this if you encounter a `npm install` failure. Caution: Ensure you have commited/pushed any important changes before running this command.
+    - `install.ps1` supports performing a clean installation by using the `-CleanInstall` flag. Use this if you encounter a `npm install` failure. **Caution:** Ensure you have commited/pushed any important changes before running this command with the `-CleanInstall` flag.
     - `install.ps1` also supports skipping initializing the server or the ui, using the `-SkipServer` and `-SkipUI` flags.
   - You will need to manually install the Prettier extension on your IDE ([for VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) ([for IntelliJ](https://plugins.jetbrains.com/plugin/10456-prettier)).
 
@@ -87,3 +87,18 @@ After sshing into the server, cd into either prod or test project. Then run resp
 ## Backend Documentation
 
 [Swagger Link](https://petstore.swagger.io/?url=https%3A%2F%2Fraw.githubusercontent.com%2FRIT-Software-Engineering%2FRIT-SE-Senior-Project%2Frefs%2Fheads%2Fdev%2Fui%2Fpublic%2Fapi-docs%2Fserver_doc.yaml)
+
+## Content Editor
+
+The site includes a Content Editor that allows administrators to edit HTML fragments stored in the database. These fragments are used to render portions of the site such as the homepage panel, sponsor information, and the logged-in/logged-out footers.
+
+### Accessing the Content Editor
+- Log into the site with an account that has admin privileges.
+- Navigate to the Admin Tab -> Content Editor -> Page Editor
+
+### Editing Content
+- The editor displays a list of named HTML blocks (e.g., `homePagePanel`, `sponsor`, `loggedInFooter`, `loggedOutFooter`).
+- Select the block you want to edit. The existing HTML will be displayed in a text box.
+- Make your changes directly in the editor.
+- Click **Update HTML** to save your changes. The update is written directly into the database.
+- Refresh the site to see your changes in action.

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "ajv": "^8.17.1",
-    "html-to-text": "^9.0.5"
+    "html-to-text": "^9.0.5",
+    "react-confirm-alert": "^3.0.6"
   }
 }

server/server/database/test_data/page_html_dummy.sql

@@ -1,5 +1,9 @@
-INSERT INTO page_html (name, html) VALUES
-('homePagePanel', '<div class="row">
+INSERT INTO
+    page_html (name, html)
+VALUES
+    (
+        'homePagePanel',
+        '<div class="row">
                                    <h2>Overview</h2>
                                </div>
                                <div class="row">
@@ -15,8 +19,11 @@ INSERT INTO page_html (name, html) VALUES
                                        inception through an entire software development lifecycle. The end result is a functional software
                                        tool ready for use by the sponsor''s organization.
                                    </p>
-                               </div>'),
-('sponsor', '<div class="row">
+                               </div>'
+    ),
+    (
+        'sponsor',
+        '<div class="row">
                              <h2 class="ui header">Become a Project Sponsor</h2>
                          </div>
                          <div class="row">
@@ -213,4 +220,45 @@ INSERT INTO page_html (name, html) VALUES
                                  </ol>
                </div>
              </div>
-                         </div>');
+                         </div>'
+    ),
+    (
+  'loggedOutFooter',
+  "<div id='bringMeDownSignedIn' class='ui container stackable grid'>
+      <div class='three column row'>
+          <div class='column'>
+              <img src='/assets/logo.jpg' alt='Logo' style='max-width:200px; width:100%; height:auto;' />
+          </div>
+          <div class='column'>
+              <p>
+                  Department of Software Engineering<br/>
+                  Golisano Building 70, Room 1690<br/>
+                  134 Lomb Memorial Drive<br/>
+                  Rochester, NY 14623-5608
+              </p>
+          </div>
+          <div class='column'>
+              <p>
+                  <i class='ui mail icon'></i>
+                  <a href='mailto:[email protected]'>[email protected]</a>
+              </p>
+          </div>
+      </div>
+      <div class='centered row' style='text-align:center;'>
+          <p>&copy; " || strftime('%Y','now') || " Rochester Institute of Technology, All Rights Reserved</p>
+      </div>
+  </div>"
+),
+(
+  'loggedInFooter',
+  "<div id='bringMeDown' class='ui container stackable grid'>
+      <div class='two column row'>
+          <div class='column'>
+              <h5 id='copyright'>
+                <i class='ui icon copyright'></i>
+                " || strftime('%Y','now') || " Rochester Institute of Technology, All Rights Reserved
+              </h5>
+          </div>
+      </div>
+  </div>"
+);

test_cases/admin.md

@@ -120,5 +120,13 @@
 5. Upon successful updating of the HTMLs a little “Success!” should appear just above the “Update HTML” button
    ![Content Editor 5](images/contenteditor5.png)
 
-6. To view these changes simply sign out of admin by using the developer sign in menu in the top right or press on the RIT logo in the top left. The UI routing should remain the same and the changes made to the HTML should be visible immediately.
+6. To view these changes simply sign out of admin by using the developer sign in menu in the top right or press on the RIT logo in the top left. The UI routing should remain the same and the changes made to the HTML should be visible immediately after refreshing.
    ![Content Editor 6](images/contenteditor6.png)
+
+7. In addtion to the overview and project sponser sections, Content editor includes two other editable sections: "loggedOutFooter" and "loggedInFooter".
+   ![Content Editor 7](images/contenteditor7.png)
+
+8. Just like with the Overview and Sponsor sections, you can edit the "loggedOutFooter"
+   and "loggedInFooter" HTML directly. After making your changes, click "Update HTML"
+   and check the footer on the corresponding page (signed in vs. signed out) to confirm
+   the updates appear.

ui/src/components/Tabs/ActionSubmissionsTab/WeeklyHoursViewer.js

@@ -28,6 +28,7 @@ export default function WeeklyHoursViewer(props) {
     <Modal
       closeOnDimmerClick={false}
       className={"sticky"}
+      closeIcon={true}
       onClose={() => {
         setOpen(false);
         props?.isOpenCallback(false);

ui/src/components/Tabs/AdminTab/ArchiveEditor/UniqueArchivePage.js

@@ -122,6 +122,7 @@ function UniqueProjectPage({ projectData }) {
             <Modal
               closeOnDocumentClick={false}
               className={"sticky"}
+              closeIcon={true}
               size={"large"}
               open={posterOpen}
               onClose={() => setPosterOpen(false)}
@@ -167,6 +168,7 @@ function UniqueProjectPage({ projectData }) {
             <Modal
               closeOnDimmerClick={false}
               className={"sticky"}
+              closeIcon={true}
               size={"large"}
               open={imageOpen}
               onClose={() => setImageOpen(false)}

ui/src/components/Tabs/AdminTab/ContentEditor/FileEditor.js

@@ -190,6 +190,7 @@ export default function FileEditor() {
                     closeOnDimmerClick={false}
                     closeOnEscape={false}
                     className={"sticky"}
+                    closeIcon={true}
                     open={addFileOpen}
                     onClose={() => setAddFileOpen(false)}
                     onOpen={() => setAddFileOpen(true)}

ui/src/components/Tabs/AdminTab/UserEditor/BatchUserPanel.js

@@ -155,6 +155,7 @@ export default function BatchUserPanel({ callback }) {
   return (
     <Modal
       className={"sticky"}
+      closeIcon={true}
       trigger={<Button icon="upload" />}
       header="Upload users (Untested for large number of users)"
       content={{ content: modalContent, scrolling: true }}

ui/src/components/Tabs/CoachesTab/ViewProjectMembers.js

@@ -89,6 +89,7 @@ export default function ViewProjectMembers(props) {
     <Modal
       closeOnDimmerClick={false}
       className={"sticky"}
+      closeIcon={true}
       trigger={
         <Button onClick={fetchProjectCoaches} icon={<Icon name="eye" />} />
       }