@visns-studio/visns-components 5.14.16 → 5.14.18

package/package.json

@@ -12,8 +12,8 @@
         "@nivo/line": "^0.99.0",
         "@nivo/pie": "^0.99.0",
         "@tinymce/miniature": "^6.0.0",
-        "@tinymce/tinymce-react": "^6.2.1",
-        "@uiw/react-color": "^2.7.1",
+        "@tinymce/tinymce-react": "^6.3.0",
+        "@uiw/react-color": "^2.7.3",
         "@visns-studio/visns-datagrid-community": "1.1.0",
         "@visns-studio/visns-datagrid-enterprise": "1.1.0",
         "@vitejs/plugin-react": "^4.7.0",
@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.1",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.23.11",
+        "framer-motion": "^12.23.12",
         "html-react-parser": "^5.2.6",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.532.0",
         "moment": "^2.30.1",
-        "motion": "^12.23.11",
+        "motion": "^12.23.12",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -89,7 +89,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.16",
+    "version": "5.14.18",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Field.jsx

@@ -25,6 +25,7 @@ import {
     X,
 } from 'lucide-react';
 import { toast } from 'react-toastify';
+import validator from 'validator';
 import styles from './styles/Field.module.scss';
 
 import CustomFetch from './Fetch';
@@ -81,6 +82,9 @@ function Field({
     const [formItemStyle, setFormItemStyle] = useState({});
     const [formItemClass, setFormItemClass] = useState('');
     const [options, setOptions] = useState([]);
+    const [emailError, setEmailError] = useState('');
+    const [emailSuggestions, setEmailSuggestions] = useState([]);
+    const [showEmailSuggestions, setShowEmailSuggestions] = useState(false);
 
     /** Canvas States */
     const [canvasPopupOpen, setCanvasPopupOpen] = useState(false);
@@ -91,6 +95,91 @@ function Field({
     const [lineColor, setLineColor] = useState('rgba(0, 0, 0, 1)');
     const sketchRef = useRef(null);
 
+    /** Email Functions */
+    const validateEmail = (email) => {
+        if (!email) {
+            setEmailError('');
+            return true;
+        }
+        
+        if (!validator.isEmail(email)) {
+            setEmailError('Please enter a valid email address');
+            return false;
+        }
+        
+        setEmailError('');
+        return true;
+    };
+
+    const generateEmailSuggestions = (inputEmail) => {
+        if (!inputEmail || inputEmail.length < 3) {
+            setEmailSuggestions([]);
+            setShowEmailSuggestions(false);
+            return;
+        }
+
+        const commonDomains = [
+            'gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 
+            'icloud.com', 'live.com', 'msn.com', 'aol.com',
+            'company.com', 'business.com', 'work.com'
+        ];
+
+        const suggestions = [];
+        const [localPart, domainPart] = inputEmail.split('@');
+        
+        if (!localPart) return;
+
+        if (!domainPart || domainPart.length === 0) {
+            // If no @ symbol or no domain part, suggest common domains
+            commonDomains.forEach(domain => {
+                suggestions.push(`${localPart}@${domain}`);
+            });
+        } else if (domainPart.length > 0 && domainPart.length < 4) {
+            // If domain part is short, suggest completions
+            commonDomains.forEach(domain => {
+                if (domain.toLowerCase().startsWith(domainPart.toLowerCase())) {
+                    suggestions.push(`${localPart}@${domain}`);
+                }
+            });
+        } else {
+            // Check for common typos and suggest corrections
+            const typoMap = {
+                'gmial.com': 'gmail.com',
+                'gmai.com': 'gmail.com',
+                'yahooo.com': 'yahoo.com',
+                'hotmial.com': 'hotmail.com',
+                'outlok.com': 'outlook.com',
+                'iclou.com': 'icloud.com'
+            };
+            
+            if (typoMap[domainPart.toLowerCase()]) {
+                suggestions.push(`${localPart}@${typoMap[domainPart.toLowerCase()]}`);
+            }
+        }
+
+        setEmailSuggestions(suggestions.slice(0, 5)); // Limit to 5 suggestions
+        setShowEmailSuggestions(suggestions.length > 0);
+    };
+
+    const handleEmailChange = (e) => {
+        const email = e.target.value;
+        validateEmail(email);
+        generateEmailSuggestions(email);
+        onChange(e);
+    };
+
+    const selectEmailSuggestion = (suggestion) => {
+        const syntheticEvent = {
+            target: {
+                dataset: { name: settings.id },
+                value: suggestion
+            }
+        };
+        validateEmail(suggestion);
+        setShowEmailSuggestions(false);
+        onChange(syntheticEvent);
+    };
+
     /** Canvas Functions */
     const handleCanvasSave = async () => {
         // Save the current canvas state
@@ -469,6 +558,7 @@ function Field({
                     'dropdown',
                     'dropdown-ajax',
                     'dynamicdata',
+                    'email',
                     'file',
                     'gallery',
                     'image',
@@ -2073,6 +2163,49 @@ function Field({
                         autoComplete="off"
                     />
                 );
+            case 'email':
+                return (
+                    <div className={styles.emailFieldContainer}>
+                        <input
+                            type="email"
+                            data-name={settings.id}
+                            className={`${inputClass[settings.id]} ${emailError ? styles.emailError : ''}`}
+                            placeholder="Enter email address"
+                            onChange={handleEmailChange}
+                            onBlur={() => setShowEmailSuggestions(false)}
+                            onFocus={() => generateEmailSuggestions(inputValue || '')}
+                            value={
+                                inputValue && inputValue !== 'null'
+                                    ? inputValue
+                                    : ''
+                            }
+                            readOnly={settings.readOnly ? settings.readOnly : false}
+                            autoComplete="email"
+                            spellCheck={false}
+                        />
+                        {emailError && (
+                            <div className={styles.emailErrorMessage}>
+                                {emailError}
+                            </div>
+                        )}
+                        {showEmailSuggestions && emailSuggestions.length > 0 && (
+                            <div className={styles.emailSuggestions}>
+                                {emailSuggestions.map((suggestion, index) => (
+                                    <div
+                                        key={index}
+                                        className={styles.emailSuggestion}
+                                        onMouseDown={(e) => {
+                                            e.preventDefault(); // Prevent blur event
+                                            selectEmailSuggestion(suggestion);
+                                        }}
+                                    >
+                                        {suggestion}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                );
             case 'password':
                 return (
                     <input
@@ -2109,6 +2242,7 @@ function Field({
                 'dropdown',
                 'dropdown-ajax',
                 'dynamicdata',
+                'email',
                 'file',
                 'gallery',
                 'image',

package/src/components/auth/Login.jsx

@@ -10,7 +10,7 @@ import CustomFetch from '../Fetch';
 
 import styles from '../styles/Login.module.scss';
 
-const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
+const Login = ({ logo, providers, setSystemAuth, setUserProfile, config = {} }) => {
     const location = useLocation();
     const navigate = useNavigate();
     const [isLoading, setIsLoading] = useState(false);
@@ -258,22 +258,24 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                                 Remember me
                                             </label>
                                         </div>
-                                        <div>
-                                            <Link
-                                                to="/reset"
-                                                style={{
-                                                    color: 'var(--primary-color, #4f46e5)',
-                                                    textDecoration: 'none',
-                                                    fontWeight: '500',
-                                                    fontSize: '0.875rem',
-                                                }}
-                                                className={
-                                                    styles.forgotPasswordLink
-                                                }
-                                            >
-                                                Forgot password?
-                                            </Link>
-                                        </div>
+                                        {config.passwordReset !== false && (
+                                            <div>
+                                                <Link
+                                                    to="/reset"
+                                                    style={{
+                                                        color: 'var(--primary-color, #4f46e5)',
+                                                        textDecoration: 'none',
+                                                        fontWeight: '500',
+                                                        fontSize: '0.875rem',
+                                                    }}
+                                                    className={
+                                                        styles.forgotPasswordLink
+                                                    }
+                                                >
+                                                    Forgot password?
+                                                </Link>
+                                            </div>
+                                        )}
                                     </div>
                                 </div>
                                 <div

package/src/components/generic/GenericAuth.jsx

@@ -65,6 +65,7 @@ const GenericAuth = ({
     themeType = 'primary',
     enforce2FA = false, // Default to not enforcing 2FA
     clientPortalConfig = null, // Configuration for client portal with component and URLs
+    config = {}, // Configuration object for auth features
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -173,6 +174,7 @@ const GenericAuth = ({
                             providers={providers}
                             setIsAuthenticated={setIsAuthenticated}
                             setUserProfile={setUserProfile}
+                            config={config}
                         />
                     }
                 />
@@ -320,13 +322,14 @@ const GenericAuth = ({
 };
 
 const LoginComponent = React.memo(
-    ({ loginBg, logo, providers, setIsAuthenticated, setUserProfile }) => (
+    ({ loginBg, logo, providers, setIsAuthenticated, setUserProfile, config }) => (
         <Login
             loginBg={loginBg}
             logo={logo}
             providers={providers}
             setSystemAuth={setIsAuthenticated}
             setUserProfile={setUserProfile}
+            config={config}
         />
     )
 );

package/src/components/styles/Field.module.scss

@@ -1303,3 +1303,102 @@ input[type='file']:hover {
         font-size: 0.85em;
     }
 }
+
+/* Email Field Styles */
+.emailFieldContainer {
+    position: relative;
+    width: 100%;
+}
+
+.emailError {
+    border-color: var(--error-color, #dc3545) !important;
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
+}
+
+.emailErrorMessage {
+    color: var(--error-color, #dc3545);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.emailErrorMessage::before {
+    content: "⚠";
+    font-size: 1rem;
+}
+
+.emailSuggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--item-color, #fff);
+    border: 1px solid var(--border-color, #e9ecef);
+    border-top: none;
+    border-radius: 0 0 4px 4px; /* Match react-select border radius */
+    box-shadow: none; /* Match react-select no-shadow pattern */
+    z-index: 999; /* Match react-select z-index */
+    max-height: 200px;
+    overflow-y: auto;
+    font-size: 14px; /* Match react-select font size */
+}
+
+.emailSuggestion {
+    padding: 8px 12px; /* Match react-select option padding */
+    cursor: pointer;
+    transition: background-color 0.15s ease; /* Match react-select transition */
+    color: var(--text-color, #333);
+    line-height: 1.4;
+}
+
+.emailSuggestion:hover {
+    background-color: #f5f5f5; /* Match react-select hover state */
+    color: var(--text-color, #333);
+}
+
+.emailSuggestion:active {
+    background-color: var(--primary-color, #007bff);
+    color: white;
+}
+
+/* Enhanced email field input styles */
+.emailFieldContainer input[type="email"] {
+    border-radius: var(--br, 6px);
+    transition: border-color 0.15s ease; /* Match react-select transition */
+    position: relative;
+}
+
+.emailFieldContainer input[type="email"]:focus {
+    outline: none;
+    border-color: var(--primary-color, #007bff);
+    box-shadow: none; /* Match react-select no-shadow pattern */
+}
+
+.emailFieldContainer input[type="email"]:valid {
+    border-color: var(--success-color, #28a745);
+}
+
+.emailFieldContainer input[type="email"]:valid:focus {
+    border-color: var(--success-color, #28a745);
+    box-shadow: none; /* Match react-select no-shadow pattern */
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .emailSuggestions {
+        background: var(--dark-item-color, #2d3748);
+        border-color: var(--dark-border-color, #4a5568);
+    }
+    
+    .emailSuggestion {
+        color: var(--dark-text-color, #e2e8f0);
+        border-bottom-color: var(--dark-border-color, #4a5568);
+    }
+    
+    .emailSuggestion:hover {
+        background: var(--dark-primary-color, #3182ce);
+        color: var(--dark-primary-text-color, #fff);
+    }
+}