ywana-core8 0.0.746 → 0.0.747

package/package.json

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

package/src/widgets/login/ResetPasswordBox.js

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { TextField, Text, Button } from '../../html'
 import './ResetPasswordBox.css'
 
 /**
  * Reset Password
  */
-export const ResetPasswordBox = ({ logo, title, children, onOK, onClose }) => {
+export const ResetPasswordBox = ({ logo, title, userRequired = true, lang = "EN", children, onOK, onClose }) => {
 
-    const [form, setForm ] = useState({})
+    const [form, setForm] = useState({})
     const [error, setError] = useState()
 
     function canOK() {
@@ -15,13 +15,13 @@ export const ResetPasswordBox = ({ logo, title, children, onOK, onClose }) => {
     }
 
     function changeField(id, value) {
-        const next = Object.assign({}, form, {[id]: value})
+        const next = Object.assign({}, form, { [id]: value })
         setForm(next)
     }
 
     function ok() {
         if (onOK && canOK()) {
-            if (form.password1 === form.password2 ) {
+            if (form.password1 === form.password2) {
                 setError(null)
                 onOK(form)
             } else {
@@ -34,23 +34,30 @@ export const ResetPasswordBox = ({ logo, title, children, onOK, onClose }) => {
         if (onClose) onClose()
     }
 
+    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"
+
     return (
         <div className="reset-password-box">
             <header>
                 {logo ? <img src={logo} /> : null}
                 {title ? <div className="title"><Text>{title}</Text></div> : null}
-                { children }
+                {children}
             </header>
             <main>
-                <Text use="headline6">Change Password</Text>      
-                <TextField id="user"      outlined icon="person"               label="User"                 lapse={100} onChange={changeField} onEnter={ok}/>
-                <TextField id="password1" outlined icon="lock" type="password" label="New Password"         lapse={100} onChange={changeField} onEnter={ok}/>
-                <TextField id="password2" outlined icon="lock" type="password" label="Confirm New Password" lapse={100} onChange={changeField} onEnter={ok}/>
-                { error ? <div className="error">{error}</div> : null}
+                <Text use="headline6">{text}</Text>
+                {userRequired ? <TextField id="user" outlined icon="person" label={userLabel} 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>
             <footer>
-                <Button label="Close" action={close}/>
-                <Button label="OK" raised disabled={!canOK()} action={ok}/>
+                <Button label={cancelLabel} action={close} />
+                <Button label={okLabel} raised disabled={!canOK()} action={ok} />
             </footer>
         </div>
     )