ywana-core8 0.1.26 → 0.1.28

package/__previewjs__/Wrapper.tsx

@@ -1,24 +1,10 @@
-import React from "react";
-
-// You can import global CSS files here.
+import React from 'react';
 import "../src/css/html.css";
 import "../src/css/theme.css";
-import "material-design-icons-iconfont/dist/material-design-icons.css";
 
-// No-op wrapper.
-export const Wrapper: React.FC = ({ children }) => {
-  return (
-    <div
-      style={{
-        fontSize: "10px",
-        width: "100vw",
-        height: "100vh",
-        padding: "0rem",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      {children}
-    </div>
-  );
-};
+
+export const Wrapper: React.FC = ({ children }) => (
+  <>
+        {children}
+  </>
+);

package/package.json

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

package/src/incubator/upload.js

@@ -44,7 +44,6 @@ export const UploadForm = (props) => {
 
     function handleFiles(files) {
         const file = files[0]
-        console.log("handleFiles", files, file)
         setFile(file)
     }
 
@@ -120,7 +119,7 @@ const UploadProgressBar = (props) => {
 const UploadTest = (props) => {
     return (
         <div>
-            <UploadForm url={"http://localhost:3000/upload"} />
+            <UploadForm url={"http://192.168.12.241:5050/colorfarm/api/upload2"} />
         </div>
     )
 }

package/src/widgets/index.js

@@ -1,6 +1,10 @@
 export * from './login/LoginBox'
 export * from './login/ResetPasswordBox'
 export * from './login/login_commons'
+export * from './login/actions'
+export * from './login/dialogs'
+export * from './login/dictionary'
+
 export * from './viewer/Viewer'
 export * from './kanban/Kanban'
 export * from './avatar/avatar'

package/src/widgets/login/ResetPasswordBox.js

@@ -108,7 +108,6 @@ export const ResetPasswordBox = ({ title, userRequired = true, oldPwdRequired =
     const password1Style = errors.password1 ? "error" : ""
     const password2Style = errors.password2 ? "error" : ""
 
-    console.log("ResetPasswordBox", errors)
     return (
         <div className="reset-password-box">
             <header>
@@ -119,7 +118,7 @@ export const ResetPasswordBox = ({ title, userRequired = true, oldPwdRequired =
                 {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"><Text>{errors.user}</Text></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 ? <TextField id="oldPassword" className={oldPasswordStyle} outlined icon="lock" type="password" label="Current Password" lapse={100} onChange={changeField} onEnter={ok} /> : null}
                 {oldPwdRequired ? errors.oldPassword ? <div className="error-message"><Text>{errors.oldPassword}</Text></div> : null : null}
 
                 <TextField id="password1" className={password1Style} outlined icon="lock" type="password" label={passwordLabel} lapse={100} onChange={changeField} onEnter={ok} />

package/src/widgets/login/actions.js

@@ -0,0 +1,127 @@
+import React, { useContext, useMemo } from 'react'
+import { Button, Icon, Text } from '../../html'
+import { SiteContext, } from '../../site'
+import { ChangeUserPasswordDialog } from './dialogs'
+
+/**
+ * Forget User Password Action
+ */
+export const ForgetUserPasswordAction = (props) => {
+
+    const site = useContext(SiteContext)
+    const { user, icon = true, onOK, onSuccess } = props
+
+    async function execute() {
+        try {
+            await onOK(user.email)
+            if (onSuccess) onSuccess()
+            site.notify({
+                title: <Text>Forgot Password</Text>,
+                body: <Text>Check your email to reset your password</Text>,
+                icon: "mail_lock"
+            })
+        } catch (error) {
+            site.notify({
+                title: "Error",
+                body: error.message,
+                type: "danger",
+                icon: "error"
+            })
+        }
+    }
+
+    const label = <Text>Forgot Password</Text>
+
+    return icon ? (
+        <Icon icon="mail_lock" clickable action={execute} size="small" tooltip={{ text: label, top: "-.5rem", left: "-14rem" }} />
+    ) : (
+        <Button label={label} action={execute} outlined className="" />
+    )
+}
+
+/**
+ * Unlock User Action
+ */
+export const UnlockUserAction = (props) => {
+
+    const site = useContext(SiteContext)
+    const { user, icon = true, onOK, onSuccess } = props
+
+    async function execute() {
+        try {
+            await onOK(user)
+            if (onSuccess) onSuccess()
+            site.notify({
+                title: <Text>User Unlocked</Text>,
+                body: <Text>The user has been unlocked successfully</Text>,
+                icon: "key"
+            })
+        } catch (error) {
+            site.notify({
+                title: "Error",
+                body: error.message,
+                type: "danger",
+                icon: "error"
+            })
+        }
+    }
+
+    const label = <Text>Unlock User</Text>
+
+    return icon ? (
+        <Icon icon="key_off" clickable action={execute} size="small" />
+    ) : (
+        <Button label={label} action={execute} outlined className="" />
+    )
+}
+
+/**
+ * Change User Password Action
+ */
+export const ChangeUserPasswordAction = (props) => {
+
+    const site = useContext(SiteContext)
+
+    const { user, icon = false, oldPwdRequired=true } = props
+
+    const errorMessages = useMemo(() => ({
+        "ERROR OLD PASSWORD": { title: "Error", description: <Text>Incorrect old password</Text> },
+        "PASSWORD ALREADY USED": { title: "Error", description: <Text>The new password provided has already been used</Text> },
+    }), [])
+
+    function execute() {
+
+        const onOK = async (form) => {
+            try {
+                await props.onOK(user, form.oldPassword, form.password1)
+                site.notify({
+                    title: <Text>Change Password</Text>,
+                    body: <Text>The password has been changed successfully</Text>,
+                    icon: "key"
+                })
+                site.closeDialog()
+            } catch (error) {
+                const key = error.message.toUpperCase()
+                const message = errorMessages[key]?.description || error.message
+                site.notify({
+                    title: "Error",
+                    body: message,
+                    type: "danger",
+                    icon: "error"
+                })
+                site.openDialog(<ChangeUserPasswordDialog oldPwdRequired={oldPwdRequired} onOK={onOK} error={message} />)
+            }
+        }
+
+        site.openDialog(<ChangeUserPasswordDialog oldPwdRequired={oldPwdRequired} onOK={onOK} />)
+    }
+
+    const label = <Text>Change Password</Text>
+
+    return icon ? (
+        <Icon icon="key" clickable action={execute} size="small" />
+    ) : (
+        <Button label={label} action={execute} outlined className="" />
+    )
+}
+

package/src/widgets/login/dialogs.css

@@ -0,0 +1,18 @@
+.change-password-dialog div.dialog-error-message {
+    display: flex;
+    align-items: center;
+    background-color: red;
+    color: white;
+    font-weight: 500;
+    padding: 0.1rem 0.5rem;
+    border-radius: .5rem;
+    margin: 0 .5rem;
+}
+
+
+.change-password-dialog>footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    display: none !important;
+}

package/src/widgets/login/dialogs.js

@@ -0,0 +1,51 @@
+import React, { useContext } from 'react'
+import { Dialog, Icon } from '../../html'
+import { SiteContext } from '../../site'
+import { ResetPasswordBox } from './ResetPasswordBox'
+import './dialogs.css'
+
+/**
+ * Admin Change User Password Dialog
+ */
+export const ChangeUserPasswordDialog = (props) => {
+
+    const site = useContext(SiteContext)
+    const { error } = props
+
+    const config = {
+        userRequired: props.userRequired || false,
+        oldPwdRequired: props.oldPwdRequired || false,
+        onOK: (form) => {
+            props.onOK ? props.onOK(form) : site.closeDialog()
+        },
+        onClose: () => {
+            site.closeDialog()
+        }
+    }
+
+    const Toolbar = () => {
+        return (
+            <div className='dialog-toolbar' >
+                <Icon icon="close" size="small" clickable action={site.closeDialog} />
+            </div >
+        )
+    }
+
+    const title = <div className="dialog-title"><Text>Change Password</Text>></div>
+    return (
+        <Dialog title={title} className="change-password-dialog" toolbar={<Toolbar />} >
+            { error && (<div className="dialog-error-message"><Icon icon="warning" />{error}</div>) }
+            <ResetPasswordBox {...config}>
+                <br/>
+                <div className="title"><Text>The new password must contain:</Text></div>
+                <ul>
+                    <li><Text>At least 15 characters</Text></li>
+                    <li><Text>At least one uppercase letter</Text></li>
+                    <li><Text>At least one lowercase letter</Text></li>
+                    <li><Text>At least one number</Text></li>
+                    <li><Text>At least one special character</Text></li>
+                </ul>
+            </ResetPasswordBox>
+        </Dialog>
+    )
+}

package/src/widgets/login/dictionary.js

@@ -0,0 +1,172 @@
+export const LOGIN_DICTIONARY = {
+
+    'Forgot Password': {
+        en: 'Forgot Password',
+        es: 'Olvidé mi contraseña',
+        de: 'Passwort vergessen',
+        pt: 'Esqueceu a senha',
+        ca: 'He oblidat la contrasenya',
+        it: 'Password dimenticata',
+        fr: 'Mot de passe oublié'
+    },
+
+    'Check your email to reset your password': {
+        en: 'Check your email to reset your password',
+        es: 'Revise su correo electrónico para restablecer su contraseña',
+        de: 'Überprüfen Sie Ihre E-Mails, um Ihr Passwort zurückzusetzen',
+        pt: 'Verifique seu e-mail para redefinir sua senha',
+        ca: 'Comproveu el correu electrònic per restablir la contrasenya',
+        it: 'Controlla la tua email per reimpostare la password',
+        fr: 'Vérifiez votre email pour réinitialiser votre mot de passe'
+    },
+
+    'Unlock User': {
+        en: 'Unlock User',
+        es: 'Desbloquear usuario',
+        de: 'Benutzer entsperren',
+        pt: 'Desbloquear usuário',
+        ca: 'Desbloquejar usuari',
+        it: 'Sblocca utente',
+        fr: 'Débloquer l\'utilisateur'
+    },
+
+    'The user has been unlocked successfully': {
+        en: 'The user has been unlocked successfully',
+        es: 'El usuario ha sido desbloqueado con éxito',
+        de: 'Der Benutzer wurde erfolgreich entsperrt',
+        pt: 'O usuário foi desbloqueado com sucesso',
+        ca: 'L\'usuari s\'ha desbloquejat correctament',
+        it: 'L\'utente è stato sbloccato con successo',
+        fr: 'L\'utilisateur a été débloqué avec succès'
+    },
+
+    'User Unlocked': {
+        en: 'User Unlocked',
+        es: 'Usuario desbloqueado',
+        de: 'Benutzer entsperrt',
+        pt: 'Usuário desbloqueado',
+        ca: 'Usuari desbloquejat',
+        it: 'Utente sbloccato',
+        fr: 'Utilisateur débloqué'
+    },
+
+    'The password has been changed successfully': {
+        en: 'The password has been changed successfully',
+        es: 'La contraseña se ha cambiado con éxito',
+        de: 'Das Passwort wurde erfolgreich geändert',
+        pt: 'A senha foi alterada com sucesso',
+        ca: 'La contrasenya s\'ha canviat correctament',
+        it: 'La password è stata cambiata con successo',
+        fr: 'Le mot de passe a été changé avec succès'
+    },
+
+    'Password Changed': {
+        en: 'Password Changed',
+        es: 'Contraseña cambiada',
+        de: 'Passwort geändert',
+        pt: 'Senha alterada',
+        ca: 'Contrasenya canviada',
+        it: 'Password cambiata',
+        fr: 'Mot de passe changé'
+    },
+
+    'The new password must contain:': {
+        en: 'The new password must contain:',
+        es: 'La nueva contraseña debe contener:',
+        de: 'Das neue Passwort muss enthalten:',
+        pt: 'A nova senha deve conter:',
+        ca: 'La nova contrasenya ha de contenir:',
+        it: 'La nuova password deve contenere:',
+        fr: 'Le nouveau mot de passe doit contenir:'
+    },
+
+    'At least 15 characters': {
+        en: 'At least 15 characters',
+        es: 'Al menos 15 caracteres',
+        de: 'Mindestens 15 Zeichen',
+        pt: 'Pelo menos 15 caracteres',
+        ca: 'Almenys 15 caràcters',
+        it: 'Almeno 15 caratteri',
+        fr: 'Au moins 15 caractères'
+    },
+
+    'At least one uppercase letter': {
+        en: 'At least one uppercase letter',
+        es: 'Al menos una letra mayúscula',
+        de: 'Mindestens ein Großbuchstabe',
+        pt: 'Pelo menos uma letra maiúscula',
+        ca: 'Almenys una lletra majúscula',
+        it: 'Almeno una lettera maiuscola',
+        fr: 'Au moins une lettre majuscule'
+    },
+
+    'At least one lowercase letter': {
+        en: 'At least one lowercase letter',
+        es: 'Al menos una letra minúscula',
+        de: 'Mindestens ein Kleinbuchstabe',
+        pt: 'Pelo menos uma letra minúscula',
+        ca: 'Almenys una lletra minúscula',
+        it: 'Almeno una lettera minuscola',
+        fr: 'Au moins une lettre minuscule'
+    },
+
+    'At least one number': {
+        en: 'At least one number',
+        es: 'Al menos un número',
+        de: 'Mindestens eine Zahl',
+        pt: 'Pelo menos um número',
+        ca: 'Almenys un número',
+        it: 'Almeno un numero',
+        fr: 'Au moins un numéro'
+    },
+
+    'At least one special character': {
+        en: 'At least one special character',
+        es: 'Al menos un carácter especial',
+        de: 'Mindestens ein Sonderzeichen',
+        pt: 'Pelo menos um caractere especial',
+        ca: 'Almenys un caràcter especial',
+        it: 'Almeno un carattere speciale',
+        fr: 'Au moins un caractère spécial'
+    },
+
+    'Passwords do not match.': {
+        en: 'Passwords do not match.',
+        es: 'Las contraseñas no coinciden.',
+        de: 'Passwörter stimmen nicht überein.',
+        pt: 'As senhas não coincidem.',
+        ca: 'Les contrasenyes no coincideixen.',
+        it: 'Le password non corrispondono.',
+        fr: 'Les mots de passe ne correspondent pas.'
+    },
+
+    'Password is required': {
+        en: 'Password is required',
+        es: 'Se requiere contraseña',
+        de: 'Passwort ist erforderlich',
+        pt: 'Senha é necessária',
+        ca: 'Es requereix contrasenya',
+        it: 'La password è obbligatoria',
+        fr: 'Le mot de passe est requis'
+    },
+
+    'Old password is required.': {
+        en: 'Old password is required.',
+        es: 'Se requiere contraseña antigua.',
+        de: 'Altes Passwort ist erforderlich.',
+        pt: 'Senha antiga é necessária.',
+        ca: 'Es requereix contrasenya antiga.',
+        it: 'La vecchia password è obbligatoria.',
+        fr: 'Ancien mot de passe requis.'
+    },
+
+    'Passwords do not match.': {
+        en: 'Passwords do not match.',
+        es: 'Las contraseñas no coinciden.',
+        de: 'Passwörter stimmen nicht überein.',
+        pt: 'As senhas não coincidem.',
+        ca: 'Les contrasenyes no coincideixen.',
+        it: 'Le password non corrispondono.',
+        fr: 'Les mots de passe ne correspondent pas.'
+    }
+}

package/src/widgets/viewer/Viewer.css

@@ -16,8 +16,7 @@
     background-position-x: initial;
     background-position-y: initial;
     background-size: initial;
-    background-repeat-x: initial;
-    background-repeat-y: initial;
+    background-repeat: initial;
     background-attachment: initial;
     background-origin: initial;
     background-clip: initial;

package/src/widgets/login/HelloTest.js

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