Some risky biz gemfile/yarn dep updates

Gemfile

@@ -132,8 +132,6 @@ end
 
 group :test, :production do
   gem 'pg', '~> 1.5'
-
-  gem "mini_racer", "~> 0.6.3" # TODO: audit whether we can remove this
 end
 
 group :test do

Gemfile.lock

@@ -1459,8 +1459,6 @@ GEM
       letter_opener (~> 1.9)
       railties (>= 6.1)
       rexml
-    libv8-node (16.10.0.0)
-    libv8-node (16.10.0.0-x86_64-linux)
     logger (1.7.0)
     loofah (2.20.0)
       crass (~> 1.0.2)
@@ -1486,8 +1484,6 @@ GEM
     mini_magick (4.11.0)
     mini_mime (1.1.2)
     mini_portile2 (2.8.1)
-    mini_racer (0.6.3)
-      libv8-node (~> 16.10.0.0)
     minitest (5.18.0)
     minitest-reporters (1.7.1)
       ansi
@@ -1714,7 +1710,6 @@ GEM
     tilt (2.0.11)
     timeago_js (3.0.2.2)
     timeout (0.3.2)
-    tribute (3.6.0.0)
     turbo-rails (1.4.0)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
@@ -1797,7 +1792,6 @@ DEPENDENCIES
   material_icons
   memory_profiler
   meta-tags
-  mini_racer (~> 0.6.3)
   minitest-reporters (~> 1.1)
   onebox!
   paperclip
@@ -1835,7 +1829,6 @@ DEPENDENCIES
   terser
   textstat
   thredded!
-  tribute
   uglifier (>= 1.3.0)
   web-console
   webmock (~> 3.0)

app/assets/javascripts/settings.js

@@ -182,6 +182,16 @@ function initializePasswordStrength() {
   const passwordField = document.getElementById('user_password');
   if (!passwordField) return;
   
+  // Only show password strength on sign-up and password change pages
+  // Check if we're on a sign-in page by looking for specific elements
+  const isSignInPage = document.querySelector('form[action*="/users/sign_in"]') || 
+                       document.querySelector('input[value="Sign In"]');
+  
+  if (isSignInPage) {
+    // Don't show password strength on sign-in page
+    return;
+  }
+  
   // Create strength meter
   const strengthMeter = document.createElement('div');
   strengthMeter.className = 'password-strength mt-2 hidden';
@@ -195,7 +205,26 @@ function initializePasswordStrength() {
     <p class="text-xs mt-1 text-gray-500 strength-text">Password strength</p>
   `;
   
-  passwordField.parentNode.appendChild(strengthMeter);
+  // Check if we're on sign-up page with two-column layout
+  const passwordParent = passwordField.parentNode;
+  const isSignUpPage = document.querySelector('form[action*="/users"]') && 
+                       document.querySelector('input[name="user[password_confirmation]"]');
+  
+  if (isSignUpPage && passwordParent.classList.contains('flex-1')) {
+    // On sign-up page, append the strength meter after the flex container
+    const flexContainer = passwordParent.parentNode;
+    if (flexContainer && flexContainer.classList.contains('flex')) {
+      // Insert the strength meter after the flex container
+      flexContainer.insertAdjacentElement('afterend', strengthMeter);
+      // Make it span full width
+      strengthMeter.classList.add('w-full', 'px-4');
+    } else {
+      passwordParent.appendChild(strengthMeter);
+    }
+  } else {
+    // On other pages (like password change), append to the password field's parent
+    passwordParent.appendChild(strengthMeter);
+  }
   
   passwordField.addEventListener('input', function() {
     const password = this.value;

app/javascript/settings.js

@@ -182,6 +182,16 @@ function initializePasswordStrength() {
   const passwordField = document.getElementById('user_password');
   if (!passwordField) return;
   
+  // Only show password strength on sign-up and password change pages
+  // Check if we're on a sign-in page by looking for specific elements
+  const isSignInPage = document.querySelector('form[action*="/users/sign_in"]') || 
+                       document.querySelector('input[value="Sign In"]');
+  
+  if (isSignInPage) {
+    // Don't show password strength on sign-in page
+    return;
+  }
+  
   // Create strength meter
   const strengthMeter = document.createElement('div');
   strengthMeter.className = 'password-strength mt-2 hidden';
@@ -195,7 +205,26 @@ function initializePasswordStrength() {
     <p class="text-xs mt-1 text-gray-500 strength-text">Password strength</p>
   `;
   
-  passwordField.parentNode.appendChild(strengthMeter);
+  // Check if we're on sign-up page with two-column layout
+  const passwordParent = passwordField.parentNode;
+  const isSignUpPage = document.querySelector('form[action*="/users"]') && 
+                       document.querySelector('input[name="user[password_confirmation]"]');
+  
+  if (isSignUpPage && passwordParent.classList.contains('flex-1')) {
+    // On sign-up page, append the strength meter after the flex container
+    const flexContainer = passwordParent.parentNode;
+    if (flexContainer && flexContainer.classList.contains('flex')) {
+      // Insert the strength meter after the flex container
+      flexContainer.insertAdjacentElement('afterend', strengthMeter);
+      // Make it span full width
+      strengthMeter.classList.add('w-full', 'px-4');
+    } else {
+      passwordParent.appendChild(strengthMeter);
+    }
+  } else {
+    // On other pages (like password change), append to the password field's parent
+    passwordParent.appendChild(strengthMeter);
+  }
   
   passwordField.addEventListener('input', function() {
     const password = this.value;

app/javascript/stylesheets/rails_admin.scss

@@ -1 +1,3 @@
+// Use @use for modern Sass, but we need to fallback to @import for rails_admin
+// since it uses old syntax internally. We'll suppress its deprecation warnings.
 @import "rails_admin/src/rails_admin/styles/base";

config/webpack/environment.js

@@ -1,4 +1,5 @@
 const { environment } = require('@rails/webpacker')
+const webpack = require('webpack')
 
 environment.config.merge({
   module: {
@@ -12,4 +13,28 @@ environment.config.merge({
   }
 })
 
+// Ignore the optional react-dom/client import warning for React 16
+environment.plugins.append('IgnorePlugin',
+  new webpack.IgnorePlugin({
+    resourceRegExp: /^react-dom\/client$/,
+    contextRegExp: /react_ujs/
+  })
+)
+
+// Configure sass-loader to suppress dependency warnings
+const sassLoader = environment.loaders.get('sass')
+const sassLoaderConfig = sassLoader.use.find(item => item.loader === 'sass-loader')
+if (sassLoaderConfig) {
+  sassLoaderConfig.options = {
+    ...sassLoaderConfig.options,
+    sassOptions: {
+      ...sassLoaderConfig.options?.sassOptions,
+      // Suppress deprecation warnings from node_modules
+      quietDeps: true,
+      // Silence specific deprecations we can't fix due to third-party deps
+      silenceDeprecations: ['import', 'legacy-js-api']
+    }
+  }
+}
+
 module.exports = environment

package.json

@@ -14,6 +14,7 @@
     "@types/react": "^17.0.13",
     "axios": "^0.21.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "jquery-ui": "1.13.3",
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
     "rails_admin": "3.1.2",
@@ -28,6 +29,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@tailwindcss/postcss7-compat": "^2.2.17",
     "autoprefixer": "^9",
     "babel-loader": "^8.2.2",