ywana-core8 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/icon.js

@@ -5,7 +5,7 @@ import { Tooltip } from './tooltip';
 /**
  * Icon 
  */
-export const Icon = ({ icon, size = "normal", tooltip, clickable = false, disabled = false, action, eventPropagation = false, className }) => {
+export const Icon = ({ id, icon, size = "normal", tooltip, clickable = false, disabled = false, action, eventPropagation = false, className }) => {
 
     function click (event) {
         if (!eventPropagation) {
@@ -18,12 +18,12 @@ export const Icon = ({ icon, size = "normal", tooltip, clickable = false, disabl
     const style = disabled ? "disabled" : clickable ? "clickable" : ""
     return tooltip ? (
         <Tooltip {...tooltip}>
-            <i className={`icon ${size} ${style} ${className} material-icons`} onClick={click} >
+            <i id={id} className={`icon ${size} ${style} ${className} material-icons`} onClick={click} >
                 {icon}
             </i>
         </Tooltip>
     ) : (
-        <i className={`icon ${size} ${style} ${className} material-icons`} onClick={click}>
+        <i id={id} className={`icon ${size} ${style} ${className} material-icons`} onClick={click}>
             {icon}
         </i>
     )

package/src/html/textfield.js

@@ -40,6 +40,21 @@ export const TextField = (props) => {
         if (onChange) onChange(id, "")
     }
 
+    function toggle() {
+        const input = document.getElementById(id)
+        const icon = document.getElementById(`${id}-visibility`)
+        if (input) {
+            const type = input.getAttribute("type")
+            if (type === "password") {
+                input.setAttribute("type", "text")
+                icon.setHTMLUnsafe("visibility")
+            } else {
+                input.setAttribute("type", "password")
+                icon.setHTMLUnsafe("visibility_off")
+            }
+        }
+    }
+
     const borderStyle = outlined ? "textfield-outlined" : "textfield"
     const labelStyle = label ? "" : "no-label"
     const labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top"
@@ -51,6 +66,7 @@ export const TextField = (props) => {
         <div className={`${style} ${id} ${className}`} onClick={onClick}>
             <input id={id} type={type} placeholder={placeholderTxt} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} onBlur={blur} readOnly={readOnly} step="any" />
             {readOnly === false && canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null}
+            {type === "password" ? <Icon id={`${id}-visibility`} icon="visibility_off" clickable size="small" action={toggle} /> : null}
             <span className="bar"></span>
             {label ? <label>{labelTxt}</label> : null}
         </div>

package/src/widgets/login/HelloTest.js

@@ -0,0 +1,7 @@
+export const HelloWorld = (props) => {
+    return (
+        <div>
+            <h1>Hello World</h1>
+        </div>
+    )
+}

package/src/widgets/login/ResetPasswordBox.css

@@ -23,26 +23,34 @@
     margin: 1rem 0 0 0;
 }
 
-.reset-password-box .error {
-    font-weight: 600;
+.reset-password-box .error-message {
+    font-weight: 400;
     color: red;
-    padding: 1rem;
-    text-align: center;
+    padding: 0rem;
 }
 
 .reset-password-box>footer {
     grid-area: footer;
     margin-top: .5rem;
     display: flex;
-    justify-content: space-between;
 }
 
 .reset-password-box>footer>button {
-    min-width: 6rem;
-    max-height: 3rem;
+    width: 100%;
 }
 
 @keyframes fadeIn {
     from { opacity: 0; }
     to   { opacity: 1; }
+}
+
+.reset-password-form > .textfield-outlined.error {
+
+    & label {
+        color: red;
+    }
+
+    & input {
+        border: solid 1px red;
+    }
 }

package/src/widgets/login/ResetPasswordBox.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { TextField, Text, Button } from '../../html'
 import { validatePassword } from './login_commons'
 import './ResetPasswordBox.css'
@@ -6,31 +6,89 @@ import './ResetPasswordBox.css'
 /**
  * Reset Password
  */
-export const ResetPasswordBox = ({ logo, title, userRequired = true, oldPwdRequired = false, lang = "EN", children, onOK, onClose }) => {
+export const ResetPasswordBox = ({ title, userRequired = true, oldPwdRequired = false, validator, children, onOK }) => {
 
-    const [form, setForm] = useState({})
+    const [form, setForm] = useState({
+        user: "",
+        oldPassword: "",
+        password1: "",
+        password2: ""
+    })
     const [isValid, setIsValid] = useState(false)
-    const [error, setError] = useState()
-
-    useEffect(() => {
-        const [valid, error] = validate()
-        setIsValid(valid)
-        setError(error)
-    }, [form.password1, form.password2, form.oldPassword])
-
-    function validate() {
-        const hasRequiredUser = userRequired ? form.user && form.user.length > 0 : true
-        const hasRequiredOldPwd = oldPwdRequired ? form.oldPassword && form.oldPassword.length > 0 : true
-        const hasPassword1 = form.password1 && form.password1.length > 0
-        let [isValid, error] = hasPassword1 ? validatePassword(form.password1) : [false, "La contraseña es requerida."]
+    const [errors, setErrors] = useState({})
+
+    function validateUser(user) {
+        let error = ""
+        const isValid = user && user.length > 0
+        error = <Text>User is required.</Text>
+        return [isValid, error]
+    }
+
+    function validateOldPassword(oldPassword) {
+        let error = ""
+        const isValid = oldPassword && oldPassword.length > 0
+        error = <Text>Old password is required.</Text>
+        return [isValid, error]
+    }
+
+    function validateNewPassword(password) {
+
+        const hasPassword = password && password.length > 0
+        if (!hasPassword) {
+            const error = <Text>Password is required</Text>
+            return [false, error]
+        }
+
+        const [isValid, error] = validator && typeof validator === 'function' ? validator(password) : validatePassword(password)
+        if (!isValid) {
+            return [false, error]
+        }
+
+        return [true, ""]
+    }
+
+    function validatePasswordsMatch(password1, password2) {
+        let error = ""
+        const isValid = password1 === password2
+        error = <Text>Passwords do not match.</Text>
+        return [isValid, error]
+    }
+
+    function validate(form) {
+
+        let isValid = true
+        let nextErrors = Object.assign({}, errors)
+
+        if (userRequired) {
+            const [validation, error] = validateUser(form.user)
+            if (isValid) isValid = validation
+            nextErrors.user = error
+        }
+
+        if (oldPwdRequired) {
+            const [validation, error] = validateOldPassword(form.oldPassword)
+            if (isValid) isValid = validation
+            nextErrors.oldPassword = error
+        }
+
+        const [pwdValidation, pwdError] = validateNewPassword(form.password1)
+        if (isValid) isValid = pwdValidation
+        nextErrors.password1 = pwdError
+
+        const [pwd2Validation, pwd2Error] = validateNewPassword(form.password2)
+        const [matchValidation, matchError] = validatePasswordsMatch(form.password1, form.password2)
+        if (isValid) isValid = matchValidation && pwd2Validation
+        nextErrors.password2 = matchError || pwd2Error
         
-        const areEqual = form.password1 === form.password2
-        if (isValid && !areEqual) error = "Las contraseñas no coinciden."
-        return [hasRequiredUser && hasRequiredOldPwd && areEqual && isValid, error]
+        return [isValid, nextErrors]
     }
 
     function changeField(id, value) {
         const next = Object.assign({}, form, { [id]: value })
+        const [isValid, errors ] = validate(next)
+
+        setIsValid(isValid)
+        setErrors(errors)
         setForm(next)
     }
 
@@ -40,33 +98,39 @@ export const ResetPasswordBox = ({ logo, title, userRequired = true, oldPwdRequi
         }
     }
 
-    function close() {
-        if (onClose) onClose()
-    }
+    const userLabel = <Text>User</Text>
+    const passwordLabel = <Text>New Password</Text>
+    const password2Label = <Text>Confirm New Password</Text>
+    const okLabel = <Text>OK</Text>
 
-    const text = lang === "EN" ? "CHANGE PASSWORD" : "CAMBIO DE CLAVE"
-    const userLabel = lang === "EN" ? "User" : "Usuario"
-    const passwordLabel = lang === "EN" ? "New Password" : "Nueva Clave"
-    const password2Label = lang === "EN" ? "Confirm New Password" : "Confirmar Nueva Clave"
-    const okLabel = lang === "EN" ? "OK" : "Aceptar"
-    const cancelLabel = lang === "EN" ? "Cancel" : "Cancelar"
+    const userStyle = errors.user ? "error" : ""
+    const oldPasswordStyle = errors.oldPassword ? "error" : ""
+    const password1Style = errors.password1 ? "error" : ""
+    const password2Style = errors.password2 ? "error" : ""
 
     return (
         <div className="reset-password-box">
             <header>
-                {logo ? <img src={logo} /> : null}
                 {title ? <div className="title"><Text>{title}</Text></div> : null}
-                {children}
             </header>
-            <main>
-                {userRequired ? <TextField id="user" outlined icon="person" label={userLabel} lapse={100} onChange={changeField} onEnter={ok} /> : null}
-                {oldPwdRequired ? <TextField id="oldPassword" outlined icon="lock" type="password" label="Old Password" lapse={100} onChange={changeField} onEnter={ok} /> : null}
-                <TextField id="password1" outlined icon="lock" type="password" label={passwordLabel} lapse={100} onChange={changeField} onEnter={ok} />
-                <TextField id="password2" outlined icon="lock" type="password" label={password2Label} lapse={100} onChange={changeField} onEnter={ok} />
-                {error ? <div className="error">{error}</div> : null}
+            <main className={`reset-password-form`}>
+
+                {userRequired ? <TextField id="user" className={userStyle} outlined icon="person" label={userLabel} lapse={100} onChange={changeField} onEnter={ok} /> : null}
+                {userRequired ? errors.user ? <div className="error-message">{errors.user}</div> : null : null}
+                
+                {oldPwdRequired ? <TextField id="oldPassword" className={oldPasswordStyle} outlined icon="lock" type="password" label="Old Password" lapse={100} onChange={changeField} onEnter={ok} /> : null}
+                {oldPwdRequired ? errors.oldPassword ? <div className="error-message">{errors.oldPassword}</div> : null : null}
+
+                <TextField id="password1" className={password1Style} outlined icon="lock" type="password" label={passwordLabel} lapse={100} onChange={changeField} onEnter={ok} />
+                { errors.password1 ? <div className="error-message">{errors.password1}</div> : null }
+
+                {children}
+
+                <TextField id="password2" className={password2Style} outlined icon="lock" type="password" label={password2Label} lapse={100} onChange={changeField} onEnter={ok} />
+                { errors.password2 ? <div className="error-message">{errors.password2}</div> : null }
+
             </main>
             <footer>
-                <Button label={cancelLabel} action={close} />
                 <Button label={okLabel} raised disabled={!isValid} action={ok} />
             </footer>
         </div>

package/src/widgets/login/ResetPasswordBoxTest.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { Icon , Button, Text, TextField } from '../../html'
 import { ResetPasswordBox } from './ResetPasswordBox'
 
 /**
@@ -9,8 +8,8 @@ export const ResetPasswordBoxTest = (prop) => {
 
     const config = {
         title: 'Reset Password',
-        userRequired: false,
-        oldPwdRequired: false,
+        userRequired: true,
+        oldPwdRequired: true,
         lang: 'EN',
         onOK: (form) => {
             console.log('onOK', form)
@@ -20,6 +19,17 @@ export const ResetPasswordBoxTest = (prop) => {
         }
     }
     return (
-        <ResetPasswordBox {...config} />
+        <ResetPasswordBox {...config} >
+            <div>
+                <p>Your password must contain</p>
+                <ul>
+                    <li>At least 8 characters</li>
+                    <li>At least one uppercase letter</li>
+                    <li>At least one lowercase letter</li>
+                    <li>At least one number</li>
+                    <li>At least one special character</li>
+                </ul>
+            </div>
+        </ResetPasswordBox>
     )
 }

package/preview.config.cjs

@@ -1,35 +0,0 @@
-// preview.config.js
-
-/** @type {import("@previewjs/config").PreviewConfig} */
-module.exports = {
-    /**
-     * Configure custom aliases (auto-detected if you use TypeScript).
-     */
-    alias: {
-      foo: "src/foo"
-    },
-  
-    /**
-     * Configure a public assets directory.
-     */
-    publicDir: "public",
-  
-    /**
-     * Set up a custom component to wrap around previewed components.
-     *
-     * Useful to set up context providers and global CSS.
-     */
-    wrapper: {
-      path: "__previewjs__/Wrapper.tsx",
-      componentName: "Wrapper"
-    },
-  
-    /**
-     * Specify a custom Vite configuration.
-     *
-     * See https://vitejs.dev/config.
-     */
-    vite: {
-
-    }
-  };