ywana-core8 0.0.783 → 0.0.785

package/package.json

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

package/src/domain/ContentEditor.js

@@ -1,9 +1,10 @@
 import React, { Fragment, useState } from 'react';
-import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, Tree, TreeNode, TreeItem, TokenField, Header, Accordion } from '../html';
+import { Button, CheckBox, DataTable, DropDown, Icon, Stack, Tab, Tabs, Text, TextField, PasswordField, Tree, TreeNode, TreeItem, TokenField, Header, Accordion } from '../html';
 import { CHECK, Content, TYPES, FORMATS } from './ContentType';
 import { DateRange } from '../html/textfield';
 import { ColorField } from '../html/color';
 import './ContentEditor.css';
+import { PasswordEditor } from '../incubator';
 
 /**
  * Content Editor
@@ -286,6 +287,8 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
     const label = required ? `${field.label} *` : field.label
 
     switch (format) {
+      case FORMATS.PASSWORD:
+        return <PasswordEditor outlined={outlined} id={id} type="password" label={label} value={value} onChange={change} readOnly={!editable} />
       case FORMATS.IMG:
         return (
           <div className='img-field'>

package/src/domain/ContentEditor.test.js

@@ -18,6 +18,7 @@ const schema = {
     field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field3"                                    , options: buildTokenOptions },
     field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR , required: true, editable: true , label: "Color"                                                                  },
     field5: { id: "field5", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field5"                  , multivalue: true                 },
+    field6: { id: "field6", type: TYPES.STRING, format: FORMATS.PASSWORD, required: true, editable: true , label: "Password" },
 
 }
 

package/src/domain/ContentType.js

@@ -23,7 +23,8 @@ export const FORMATS = {
     URL: 'URL',
     IMG: 'IMG',
     COLOR: 'COLOR',
-    TOKENS: 'TOKENS'
+    TOKENS: 'TOKENS',
+    PASSWORD: 'PASSWORD',
 }
 
 

package/src/html/index.js

@@ -14,7 +14,7 @@ export { Section } from './section'
 export { Tabs, Tab, Stack } from './tab'
 export { DataTable } from './table'
 export { Text, TEXTFORMATS } from './text'
-export { TextField, DropDown, TextArea, DateRange } from './textfield'
+export { TextField, DropDown, TextArea, DateRange, PasswordField } from './textfield'
 export { TokenField } from './tokenfield'
 export { Tree, TreeNode, TreeItem } from './tree'
 export { Switch } from './switch'

package/src/html/textfield.js

@@ -203,7 +203,9 @@ export const DropDown = (props) => {
     )
 }
 
-
+/**
+ * Date Range
+ */
 export const DateRange = (props) => {
 
     const { id, label, value, onChange } = props
@@ -228,4 +230,22 @@ export const DateRange = (props) => {
             <TextField id="to" type="date" label="To" value={form.to} onChange={change} />
         </div>
     )
-}
+}
+
+export const PasswordField = (props) => {
+
+    const { id, label, value, onChange } = props
+    const [show, setShow] = useState(false)
+
+    function toggle() {
+        setShow(!show)
+    }
+
+    return (
+        <div className="password-field">
+            <TextField id={id} type={show ? "text" : "password"} label={label} value={value} onChange={onChange} />
+            <Icon icon={show ? "visibility" : "visibility_off"} clickable size="small" action={toggle} />
+        </div>
+    )
+}
+

package/src/incubator/index.js

@@ -1,2 +1,3 @@
 export { Wizard, WizardContext } from './wizard'
-export { TaskContextProvider, TaskContext, TaskMonitor, TaskProgress } from './task'
+export { TaskContextProvider, TaskContext, TaskMonitor, TaskProgress } from './task'
+export * from './password'

package/src/incubator/password.css

@@ -0,0 +1,7 @@
+.password-editor {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: end;
+    justify-content: center;
+}

package/src/incubator/password.js

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react'
+import { Icon, TextField } from '../html'
+import { Dialog, SiteContext } from '../site'
+import { ResetPasswordBox } from '../widgets'
+import './password.css'
+
+/**
+ * Password Editor
+ */
+export const PasswordEditor = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id, label = "Change Password", lang="ES", labelPosition = "left", className, value, onChange } = props
+
+    function onOK(form) {
+        if (onChange) onChange(id, form.password1)
+        site.closeDialog()
+    }
+
+    function onClose() {
+        site.closeDialog()
+    }
+
+    const openDialog = () => {
+        site.openDialog(<ChangePasswordDialog lang={lang} label={label} onOK={onOK} onClose={onClose} />)
+    }
+
+    return (
+        <div className={`password-editor ${className}`}>
+            <TextField label={label} labelPosition={labelPosition} type="password" value={value} readOnly={true} />
+            <Icon icon="edit" clickable action={openDialog} size="small"/>
+        </div>
+    )
+}
+
+const ChangePasswordDialog = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id, label, lang, onChange, content, onOK, onClose } = props
+
+    return (
+        <Dialog title={label} onClose={onClose}>
+            <ResetPasswordBox lang={lang} onOK={onOK} onClose={onClose} userRequired={false} />
+        </Dialog>
+    )
+}
+
+

package/src/site/site.test.js

@@ -14,6 +14,7 @@ import { TablePage2 } from '../domain/TablePage2'
 import { CollectionPage } from '../domain/CollectionPage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 import { TableTest } from '../html/table.test'
+import { PasswordEditor } from '../incubator/password'
 
 const SiteTest = (prop) => {
 
@@ -214,6 +215,7 @@ const Page5 = (props) => {
 
     return (
         <Fragment>
+            <PasswordEditor id="password" label="Password" value="12345678" onChange={(id, value) => console.log(id, value)} />
             <CollectionPage 
                 title="Referencias" 
                 schema={schema} host="http://localhost:3000" url="/references" fetching={true}              // resource