Removed unnecessary dependency. Updated dependencies. Fixed Bootstrap build. Added light / dark / auto switch. Added Bootstrap Icons. (#112)

Author: neonexus

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,69 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+name: "CodeQL"
+
+on:
+    push:
+        branches: [ "release", "master" ]
+    pull_request:
+        # The branches below must be a subset of the branches above
+        branches: [ "release", "master" ]
+    schedule:
+        - cron: '38 4 * * 5'
+
+jobs:
+    analyze:
+        name: Analyze
+        runs-on: ubuntu-latest
+        timeout-minutes: 360
+        permissions:
+            actions: read
+            contents: read
+            security-events: write
+
+        strategy:
+            fail-fast: false
+            matrix:
+                language: [ 'javascript' ]
+                # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+                # Learn more:
+                # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v3
+
+            # Initializes the CodeQL tools for scanning.
+            - name: Initialize CodeQL
+              uses: github/codeql-action/init@v2
+              with:
+                  languages: ${{ matrix.language }}
+                  # If you wish to specify custom queries, you can do so here or in a config file.
+                  # By default, queries listed here will override any specified in a config file.
+                  # Prefix the list here with "+" to use these queries and those in the config file.
+                  # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+            # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+            # If this step fails, then you should remove it and run the build manually (see below)
+            # - name: Autobuild
+            #  uses: github/codeql-action/autobuild@v1
+
+            # ℹ️ Command-line programs to run using the OS shell.
+            # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+            #   If the Autobuild fails above, remove it and uncomment the following three lines.
+            #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+            # - run: |
+            #     echo "Run, Build Application using script"
+            #     ./location_of_script_within_repo/buildscript.sh
+
+            - name: Perform CodeQL Analysis
+              uses: github/codeql-action/analyze@v2
+              with:
+                 category: "/language:${{matrix.language}}"
+

.mocharc.yml

@@ -5,7 +5,7 @@ require:
 spec:
     - 'test/unit/index.js'
     - 'test/integration/index.js'
-timeout: 10000 # Give Sails some breathing room... We are building schemas / data fixtures.
+timeout: 60000 # Give Sails some breathing room... We are building schemas / data fixtures.
 checkLeaks: true
 global:
     - '_' # Lodash global

CHANGELOG.md

@@ -1,4 +1,12 @@
 # Changelog
+
+## [v4.2.4](https://github.com/neonexus/sails-react-bootstrap-webpack/compare/v4.2.3...v4.2.4) (2023-10-30)
+### Features
+
+* Fixed Bootstrap build. (Missing dark-mode file.)
+* Built light / dark / auto switch for admin.
+* Updated dependencies.
+
 ## [v4.2.3](https://github.com/neonexus/sails-react-bootstrap-webpack/compare/v4.2.2...v4.2.3) (2023-10-03)
 ### Features
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.17
+FROM node:18-slim
 MAINTAINER NeoNexus DeMortis
 
 RUN mkdir /var/www && mkdir /var/www/myapp

README.md

@@ -89,14 +89,27 @@ I manually check the changes when a package has a new version, to verify there i
 
 ## How to Use
 
-This repo is not installable via `npm`. Instead, GitHub provides a handy "Use this template" (green) button at the top of this page. That will create a special clone of this repo (so there is a single,
-init commit, instead of the commit history from this repo).
+You can quickly download / install dependencies using [`drfg` (Download Release From GitHub)](https://www.npmjs.com/package/drfg) via NPX (if you have Node.js installed, you have NPX):
 
-Or, you can download a copy of the [latest release](https://github.com/neonexus/sails-react-bootstrap-webpack/releases/latest).
+```shell
+npx drfg neonexus/sails-react-bootstrap-webpack
+```
+
+This will download this repo's latest version, extract it, then install the dependencies into the folder `sails-react-bootstrap-webpack` in the current working directory.
+If you want to install in a different location, just supply the new folder name as the second parameter:
+
+```shell
+npx drfg neonexus/sails-react-bootstrap-webpack my-new-site
+```
+
+Or, GitHub provides a handy "Use this template" (green) button at the top of this page. That will create a special clone of this repo (so there is a single, init commit,
+instead of the commit history from this repo).
+
+Or, you can download a copy of the [latest release](https://github.com/neonexus/sails-react-bootstrap-webpack/releases/latest) manually.
 
 ## Configuration
 
-In the `config` folder, there is the [`local.js.sample`](config/local.js.sample) file, which is meant to be copied to `local.js`. This file (`local.js`, not the sample) is ignored by Git, and intended
+In the [`config` folder](config), there is the [`local.js.sample`](config/local.js.sample) file, which is meant to be copied to `local.js`. This file (`local.js`, not the sample) is ignored by Git, and intended
 for use in local development, NOT remote servers. Generally one would use environment variables for remote server configuration (and this repo is already setup to handle environment variable
 configuration for both DEV and PROD). See [Environment Variables](#environment-variables) for more.
 

assets/src/Admin/NavBar.jsx

@@ -1,54 +1,119 @@
-import { useState, useContext } from 'react';
+import {useState, useContext, useEffect} from 'react';
 import PropTypes from 'prop-types';
 
 import {Button, Nav, Navbar, NavDropdown} from 'react-bootstrap';
 import {NavLink as ReactNavLink} from 'react-router-dom';
 
 import UserContext from '../data/UserContext';
 
+function scrollListener() {
+    const nav = document.querySelector('nav');
+
+    if (nav) {
+        if (window.scrollY > 0 && window.scrollY < 26) {
+            nav.classList.add('shadow-sm');
+            nav.classList.remove('shadow');
+        } else if (window.scrollY > 25) {
+            nav.classList.add('shadow');
+            nav.classList.remove('shadow-sm');
+        } else {
+            nav.classList.remove('shadow');
+            nav.classList.remove('shadow-sm');
+        }
+    }
+}
+
 function NavBar(props) {
     const [isExpanded, setIsExpanded] = useState(false);
     const user = useContext(UserContext);
 
+    const [lightOrDark, setLightOrDark] = useState(window.localStorage.getItem('theme'));
+    let lightDarkAutoClass = 'bi-circle-half';
+
+    if (lightOrDark === 'dark') {
+        lightDarkAutoClass = 'bi-moon-fill';
+    } else if (lightOrDark === 'light') {
+        lightDarkAutoClass = 'bi-sun-fill';
+    }
+
     function closeNavbar() {
         setIsExpanded(false);
     }
 
+    function switchTheme(e) {
+        const newTheme = e.target.getAttribute('data-theme-set');
+
+        setLightOrDark(newTheme);
+        window.localStorage.setItem('theme', newTheme);
+
+        tellBootstrapAboutTheme(newTheme);
+    }
+
+    function tellBootstrapAboutTheme(newTheme) {
+        if (newTheme === 'light' || newTheme === 'dark') {
+            document.documentElement.setAttribute('data-bs-theme', newTheme);
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        }
+    }
+
+    function themeListener() {
+        tellBootstrapAboutTheme(lightOrDark);
+    }
+
+    useEffect(() => {
+        window.addEventListener('scroll', scrollListener);
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', themeListener);
+
+        // If we don't do this, and the page loads with "auto" and the user wants it dark, it won't change.
+        tellBootstrapAboutTheme(lightOrDark);
+
+        return () => {
+            window.removeEventListener('scroll', scrollListener);
+            window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', themeListener);
+        };
+    });
+
     return (
         <Navbar
-            bg="dark"
-            variant="dark"
+            bg="body-tertiary"
             expand="sm"
             sticky="top"
-            className="mb-3 ps-3 pe-3"
+            className="mb-3 ps-3 pe-3 border-bottom"
             expanded={isExpanded}
             onToggle={() => setIsExpanded(!isExpanded)}
         >
             <Navbar.Brand>{appConfig.appName}</Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
-                <Nav className="me-auto">
+                <Nav className="me-auto" navbarScroll>
                     <Nav.Link as={ReactNavLink} to="/admin/dashboard" onClick={closeNavbar}>Home</Nav.Link>
                     {
                         (user.info.role === 'admin')
                             ? <Nav.Link as={ReactNavLink} to="/admin/users" onClick={closeNavbar}>Users</Nav.Link>
                             : null
                     }
                     <Nav.Link as={ReactNavLink} to="/admin/404" onClick={closeNavbar}>404 Page</Nav.Link>
-                    <NavDropdown title="Settings" id="basic-nav-dropdown" menuVariant="dark">
-                        <NavDropdown.Item className="ps-3 pe-3" as={ReactNavLink} to="/admin/settings/profile" onClick={closeNavbar}>Profile</NavDropdown.Item>
-                        <NavDropdown.Item className="ps-3 pe-3" as={ReactNavLink} to="/admin/settings/security" onClick={closeNavbar}>Security</NavDropdown.Item>
+                    <NavDropdown title="Settings" id="basic-nav-dropdown">
+                        <NavDropdown.Item className="ps-3 pe-3" as={ReactNavLink} to="/admin/settings/profile" onClick={closeNavbar}><i className="bi bi-person-fill" /> Profile</NavDropdown.Item>
+                        <NavDropdown.Item className="ps-3 pe-3" as={ReactNavLink} to="/admin/settings/security" onClick={closeNavbar}><i className="bi bi-shield-lock-fill" /> Security</NavDropdown.Item>
                     </NavDropdown>
                 </Nav>
 
                 {
                     user.isLoggedIn ?
                         <>
-                            <span className="text-white d-none d-md-block">Welcome, {user.info.firstName} &nbsp; &nbsp; </span>
+                            <Navbar.Text>Welcome, {user.info.firstName} &nbsp; &nbsp; </Navbar.Text>
                             <Button variant="danger" onClick={() => props.handleLogout()} size="sm" className="mt-2 mt-sm-0 mb-2 mb-sm-0">Logout</Button>
                         </>
                         : null
                 }
+
+                <NavDropdown title={<i className={'bi ' + lightDarkAutoClass}/>} id="light-or-dark-toggle" className="ms-3 right-align-menu">
+                    <NavDropdown.Item className="bi bi-sun-fill" active={lightOrDark === 'light'} data-theme-set="light" onClick={switchTheme}>Light</NavDropdown.Item>
+                    <NavDropdown.Item className="bi bi-moon-fill" active={lightOrDark === 'dark'} data-theme-set="dark" onClick={switchTheme}>Dark</NavDropdown.Item>
+                    <NavDropdown.Item className="bi bi-circle-half" active={lightOrDark !== 'light' && lightOrDark !== 'dark'} data-theme-set="auto" onClick={switchTheme}>Auto</NavDropdown.Item>
+                </NavDropdown>
             </Navbar.Collapse>
         </Navbar>
     );

assets/styles/admin/_global.scss

@@ -5,3 +5,30 @@
 .ls-25 {
     letter-spacing: .25rem;
 }
+
+nav {
+    transition: all .5s;
+
+    .dropdown-menu {
+        min-width: 5rem;
+
+        .dropdown-item.bi::before {
+            padding-right: .35rem;
+        }
+    }
+
+    .right-align-menu .dropdown-menu {
+        left: unset;
+        right: 0;
+    }
+
+    .navbar-nav .nav-link {
+        &.active, &:hover {
+            color: var(--#{$prefix}link-color);
+
+            @include color-mode(dark) {
+                color: $white;
+            }
+        }
+    }
+}

assets/styles/admin/admin.scss

@@ -2,15 +2,14 @@
 
 @import "bootstrap-variable-overrides";
 @import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
 
 @import "~bootstrap/scss/maps";
-
 @import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
 
 @import "../common/bootstrap";
-
 @import "../common/reboot";
-
 @import "../common/common";
 
 @import "global";