ywana-core8 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -29,7 +29,8 @@
     "jest": "^29.7.0",
     "microbundle": "^0.14.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-scripts": "^5.0.1"
   },
   "dependencies": {
     "axios": "^1.3.4",

package/src/http/session.js

@@ -2,8 +2,7 @@
  * Session store
  * implements securityCtx methods
  */
-
-const SESSION_NAME = process.env.REACT_APP_SESSION || window && window.SESSION ? window.SESSION : 'YWANA-CORE6-SESSION';
+const SESSION_NAME = typeof process !== 'undefined' ? process.env.REACT_APP_SESSION : window && window.SESSION ? window.SESSION : 'YWANA-CORE8-SESSION';
 
 export const Session = {
 

package/src/widgets/index.js

@@ -1,13 +1,14 @@
 export * from './login/LoginBox'
 export * from './login/ResetPasswordBox'
-export * from './login/login_commons'
+export * from './login/validations'
 export * from './login/actions'
 export * from './login/dialogs'
 export * from './login/dictionary'
+export * from './login/context'
 
 export * from './viewer/Viewer'
 export * from './kanban/Kanban'
-export * from './avatar/avatar'
+export * from './avatar/Avatar'
 export * from './waiter'
 export * from './calendar/Calendar'
 export * from './planner/Planner'

package/src/widgets/login/LoginBox.css

@@ -1,33 +1,8 @@
 .login-box {
   background-color: var(--paper-color);
-  display: grid;
-  grid-template-areas:
-    "header header"
-    "main main"
-    "footer footer";
-}
-
-.login-box > header {
-  grid-area: header;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  padding: 1rem;
-}
-
-.login-box > header > img {
-  max-width: 90%;
-}
-
-.login-box > header > .title {
-  font-size: 2rem;
-  font-weight: 600;
 }
 
 .login-box > main {
-  grid-area: main;
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;

package/src/widgets/login/LoginBox.js

@@ -6,15 +6,11 @@ import './LoginBox.css'
  * Login Box
  */
 export const LoginBox = ({
-    logo, title,
-    userLabel = "User",
-    userValue = "",
-    passwordLabel = "Password",
-    passwordValue = '',
-    loginLabel = "Log In", onOK,
-    forgotLabel = "Forgot Password?", onForgot,
-    message,
-    loading
+    userLabel = "User", userValue = "",
+    passwordLabel = "Password", passwordValue = '',
+    loginLabel = "Log In",
+    onOK, message, loading,
+    children
 }) => {
 
     const [user, setUser] = useState(userValue)
@@ -28,14 +24,6 @@ export const LoginBox = ({
         if (onOK && canOK()) onOK(user, forcedPwd || password)
     }
 
-    function canForgot() {
-        return user && user.length > 0
-    }
-
-    function forgot() {
-        if (onForgot) onForgot(user)
-    }
-
     function tx(txt) {
         return <Text>{txt}</Text>
     }
@@ -50,17 +38,14 @@ export const LoginBox = ({
 
     return (
         <div className="login-box">
-            <header>
-                {logo ? <img src={logo} /> : ''}
-                <div className="title"><Text>{title}</Text></div>
-            </header>
             <main>
                 <TextField label={tx(userLabel)} value={user} onChange={changeUser} onEnter={ok} outlined autoComplete="on" />
                 <TextField id="loginbox-password" label={tx(passwordLabel)} value={password} onChange={changePassword} onEnter={ok} type="password" outlined autoComplete="on" />
             </main>
             <footer>
-                { loading ? <div className="load-box"><Icon icon="refresh" /></div> : <Button label={tx(loginLabel)} action={ok} disabled={!canOK()} raised className="login-button" /> }
-                { onForgot ? <Button label={tx(forgotLabel)} action={forgot} disabled={!canForgot()} className="forgot-button"/> : null }
+                { loading ? <div className="load-box"><Icon icon="refresh" /></div> : null }
+                { !loading ? <Button label={tx(loginLabel)} action={ok} disabled={!canOK()} raised className="login-button" /> : null }
+                { children }
                 { message ? <div className="message"><Text>{message}</Text></div> : null}
             </footer>
         </div>

package/src/widgets/login/LoginBox.test.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import { LoginBox } from './LoginBox'
+import { ForgetUserPasswordAction } from './actions'
 
 const LoginBoxTest = (prop) => {
 
     return (
-     
-        <LoginBox onForgot />
-     
+        <LoginBox>
+            <ForgetUserPasswordAction icon={false} />
+        </LoginBox>
     )
 }

package/src/widgets/login/ResetPasswordBox.css

@@ -1,20 +1,10 @@
 .reset-password-box {
     background-color: var(--paper-color);
-    display: grid;
-    grid-template-areas: "header header" "main main" "footer footer";
     animation: fadeIn 2s;
     padding: .5rem;
 }
 
-.reset-password-box>header {
-    grid-area: header;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-}
-
 .reset-password-box>main {
-    grid-area: main;
     display: flex;
     flex-direction: column;
 }
@@ -30,7 +20,6 @@
 }
 
 .reset-password-box>footer {
-    grid-area: footer;
     margin-top: .5rem;
     display: flex;
 }

package/src/widgets/login/ResetPasswordBox.js

@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
 import { TextField, Text, Button } from '../../html'
-import { validatePassword } from './login_commons'
+import { validatePassword } from './validations'
 import './ResetPasswordBox.css'
 
 /**
  * Reset Password
  */
-export const ResetPasswordBox = ({ title, userRequired = true, oldPwdRequired = false, validator, children, onOK }) => {
+export const ResetPasswordBox = ({ userRequired = true, oldPwdRequired = false, validator, children, onOK }) => {
 
     const [form, setForm] = useState({
         user: "",
@@ -110,10 +110,7 @@ export const ResetPasswordBox = ({ title, userRequired = true, oldPwdRequired =
 
     return (
         <div className="reset-password-box">
-            <header>
-                {title ? <div className="title"><Text>{title}</Text></div> : null}
-            </header>
-            <main className={`reset-password-form`}>
+            <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"><Text>{errors.user}</Text></div> : null : null}

package/src/widgets/login/{ResetPasswordBoxTest.js → ResetPasswordBox.test.js}

@@ -7,7 +7,6 @@ import { ResetPasswordBox } from './ResetPasswordBox'
 export const ResetPasswordBoxTest = (prop) => {
 
     const config = {
-        title: 'Reset Password',
         userRequired: true,
         oldPwdRequired: true,
         lang: 'EN',

package/src/widgets/login/actions.js

@@ -9,7 +9,7 @@ import { ChangeUserPasswordDialog } from './dialogs'
 export const ForgetUserPasswordAction = (props) => {
 
     const site = useContext(SiteContext)
-    const { user, icon = true, onOK, onSuccess } = props
+    const { user, icon = false, onOK, onSuccess } = props
 
     async function execute() {
         try {
@@ -35,7 +35,7 @@ export const ForgetUserPasswordAction = (props) => {
     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="" />
+        <Button label={label} action={execute} className="" />
     )
 }
 

package/src/widgets/login/context.js

@@ -0,0 +1,125 @@
+import { HTTPClient, Session } from "../../http"
+const API_URL = typeof process !== 'undefined' ? process.env.REACT_APP_API : window.API
+const http = HTTPClient(window.API || API_URL, Session)
+
+/**
+ * LOGIN_API
+ */
+export const LOGIN_API = {
+
+    /**
+     * Change Password
+     * Request API to change user password
+     * 
+     * @param {*} id 
+     * @param {*} form 
+     * @returns 
+     * 
+     * PATCH /users/:id
+     * payload: { old_Password, new_Password }
+     * 
+     */
+    changePassword(id, form) {
+        const body = JSON.stringify(form)
+        return http.PATCH(`/users/${id}`, body)
+    },
+
+    /**
+     * Forget user password
+     * Request API to send a message to user email with a link to reset password
+     * 
+     * @param {*} email 
+     * @returns 
+     * 
+     * POST /users/forget
+     * payload: { email }
+     */
+    forgetUserPassword(email) {
+        const body = JSON.stringify({ email })
+        return http.POST(`/users/forget`, body)
+    },
+
+    /**
+     * Reset user password
+     * Request API to reset user password
+     * 
+     * @param {*} token 
+     * @param {*} password 
+     * @returns
+     * 
+     * POST /users/assign
+     * payload: { token, password } 
+     */
+    resetUserPassword(token, password) {
+        const body = JSON.stringify({ token, password })
+        return http.POST(`/users/assign`, body)
+    }
+}
+
+/**
+ * LOGIN_CONTEXT
+ */
+export const LOGIN_CONTEXT = {
+
+    /**
+     * Change user password
+     * 
+     * @param {*} user 
+     * @param {*} old_Password 
+     * @param {*} new_Password 
+     */
+    async changeUserPassword(user, old_Password, new_Password) {
+        try {
+            const response = await LOGIN_API.changePassword(user, { old_Password, new_Password });
+            console.log("changeUserPassword", response);
+        } catch (error) {
+            console.log("changeUserPassword error", error);
+            throw error;
+        }
+    },
+
+    /**
+     * Unlock user
+     * 
+     * @param {*} id 
+     */
+    async unlockUser(id) {
+        try {
+            await API.changePassword(id, { unlock: true });
+        } catch (error) {
+            console.log("unblockUser error", error);
+            throw error;
+        }
+    },
+
+    /**
+     * Forget user password
+     * 
+     * @param {*} email 
+     */
+    async forgetUserPassword(email) {
+        try {
+            await API.forgetUserPassword(email);
+        } catch (error) {
+            console.log("forgetUserPassword error", error);
+            throw error;
+        }
+    },
+
+    /**
+     * Reset Password
+     * 
+     * @param {*} token 
+     * @param {*} password 
+     * @param {*} onError 
+     * @param {*} onSuccess 
+     */
+    async resetUserPassword(token, password, onError, onSuccess) {
+        try {
+            await API.resetUserPassword(token, password);
+            onSuccess();
+        } catch (error) {
+            onError(error);
+        }
+    }
+}

package/src/widgets/login/dialogs.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
-import { Dialog, Icon } from '../../html'
-import { SiteContext } from '../../site'
+import { Icon } from '../../html'
+import { Dialog, SiteContext } from '../../site'
 import { ResetPasswordBox } from './ResetPasswordBox'
 import './dialogs.css'
 
@@ -31,7 +31,7 @@ export const ChangeUserPasswordDialog = (props) => {
         )
     }
 
-    const title = <div className="dialog-title"><Text>Change Password</Text>></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>) }

package/src/widgets/login/{login_commons.test.js → validations.test.js}

@@ -1,5 +1,5 @@
-const login_commons = require('./login_commons');
-const { validatePassword } = login_commons;
+const validations = require('./validations');
+const { validatePassword } = validations;
 
 describe('validatePassword', () => {
     test('debería devolver un error si la longitud es menor a 15 caracteres', () => {