Merge pull request #114 from neonexus/master

v4.3.0

Author: neonexus

.dockerignore

@@ -14,5 +14,5 @@ config/local.js
 test
 
 **/README*
-CHANGELOG.md
+*.md
 LICENSE

.github/workflows/codeql.yml renamed to .github/workflows/codeql-analysis.yml

@@ -19,6 +19,7 @@ jobs:
     analyze:
         name: Analyze
         runs-on: ubuntu-latest
+        timeout-minutes: 360
         permissions:
             actions: read
             contents: read

.gitignore

@@ -149,3 +149,7 @@ app.zip
 
 # Downloaded binary files
 .bin
+
+# Code coverage
+test/coverage/*
+!test/coverage/.gitkeep

.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

.npmrc

@@ -7,8 +7,5 @@
 # Hide NPM log output unless it is related to an error of some kind:
 loglevel=error
 
-# Make "npm audit" an opt-in thing for subsequent installs within this app:
+# Run "npm audit" after installs
 audit=true
-
-# Don't install optional dependencies automatically (which is a weird default NPM...):
-omit=optional

.travis.yml

@@ -8,3 +8,6 @@ services: mysql
 before_install:
     - mysql -e 'CREATE DATABASE IF NOT EXISTS testing;'
     - mysql -e "ALTER USER 'root'@'localhost' IDENTIFIED BY 'mypass'"
+after_success: npm run codecov
+deploy:
+    skip_cleanup: true

CHANGELOG.md

@@ -1,4 +1,27 @@
 # Changelog
+
+## [v4.3.0](https://github.com/neonexus/sails-react-bootstrap-webpack/compare/v4.2.4...v4.3.0) (2023-11-04)
+### Features
+
+* Fixed the "create user" modal.
+* Fixed the pagination bar when `pages` = 0.
+* Added small css tweaks for light / dark theme transitions.
+* Updated Node LTS version for docker / package.
+* Removed `omit=optional` from `.npmrc`.
+* Replaced code coverage files with [Codecov](https://codecov.io).
+* Updated dependencies.
+
+### Breaking Changes
+
+* Replaced [`ngrok`](https://npmjs.org/package/ngrok) with official [`@ngrok/ngrok`](https://npmjs.org/package/@ngrok/ngrok) in [ngrok.js](ngrok.js).
+
+## [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:20-slim
 MAINTAINER NeoNexus DeMortis
 
 RUN mkdir /var/www && mkdir /var/www/myapp

README.md

@@ -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>
     );