Implemented forgotPassword and updated easybasejs

example/package.json

@@ -13,6 +13,8 @@
     "react-dom": "file:../node_modules/react-dom",
     "react-router-dom": "^5.2.0",
     "react-scripts": "file:../node_modules/react-scripts",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.0.3",
     "typescript": "file:../node_modules/typescript"
   },
   "eslintConfig": {

example/src/App.tsx

@@ -16,6 +16,7 @@ import {
 import ProjectUser from "./ProjectUser";
 import UseReturnExample from './UseReturnExample';
 import UseReturnStressTest from './UseReturnStressTest';
+import 'semantic-ui-css/semantic.min.css'
 
 const IntegrationExample = () => {
   React.useEffect(() => console.log("MOUNTING INTEGRATION EXAMPLE"), []);

example/src/ProjectUser.tsx

@@ -1,13 +1,20 @@
 import React, { useState, useEffect } from "react";
 import { useEasybase } from "easybase-react";
 import DbCardElement from "./DbCardElement";
+import { Modal, Button, Form } from 'semantic-ui-react'
 
 export default function ProjectUser() {
-    
+
     const [usernameValue, setUsernameValue] = useState("");
     const [passwordValue, setPasswordValue] = useState("");
     const [data, setData] = useState<Record<string, any>[]>([]);
 
+    const [forgotDialogOpen, setForgotDialogOpen] = useState<boolean>(false);
+    const [forgotDialogStep, setForgotDialogStep] = useState(0);
+    const [forgotUsernameVal, setForgotUsernameVal] = useState("");
+    const [forgotNewPassVal, setForgotNewPassVal] = useState("");
+    const [forgotCodeVal, setForgotCodeVal] = useState("");
+
     const {
         isUserSignedIn,
         signIn,
@@ -16,10 +23,12 @@ export default function ProjectUser() {
         getUserAttributes,
         resetUserPassword,
         onSignIn,
-        db
+        db,
+        forgotPassword,
+        forgotPasswordConfirm
     } = useEasybase();
 
-    const onSignUpClick = async() => {
+    const onSignUpClick = async () => {
         const res = await signUp(usernameValue, passwordValue, {
             testKey: "testValue"
         });
@@ -38,16 +47,16 @@ export default function ProjectUser() {
         });
 
         onSignIn(() => {
-            console.log("Signed In!");  
+            console.log("Signed In!");
             db('REACT TEST', true).return().limit(10).all().then(res => {
                 setData(res as Record<string, any>[]);
             });
         });
-        
+
     }, []);
 
     const addUserRecord = async () => {
-        await db('REACT TEST', true).insert({rating: 68, app_name: "this is only for this user"}).one();
+        await db('REACT TEST', true).insert({ rating: 68, app_name: "this is only for this user" }).one();
         const res = await db('REACT TEST', true).return().limit(10).all();
         setData(res as Record<string, any>[]);
     }
@@ -59,6 +68,28 @@ export default function ProjectUser() {
         signOut();
     }
 
+    const onForgotSubmit = async () => {
+        switch (forgotDialogStep) {
+            case 0:
+                if (forgotUsernameVal) {
+                    await forgotPassword(forgotUsernameVal, { footer: "hello<b>here</b>", greeting: "Hello World", appName: "My React Test" })
+                    setForgotDialogStep(1);
+                }
+                break;
+            case 1:
+                if (forgotCodeVal && forgotNewPassVal) {
+                    await forgotPasswordConfirm(forgotCodeVal, forgotUsernameVal, forgotNewPassVal)
+                    setForgotCodeVal("")
+                    setForgotNewPassVal("")
+                    setForgotUsernameVal("")
+                    setForgotDialogStep(0)
+                    setForgotDialogOpen(false)
+                }
+            default:
+                break;
+        }
+    }
+
     if (isUserSignedIn()) {
         return (
             <div style={{ display: "flex", width: '100vw', height: '90vh', justifyContent: 'center', alignItems: 'center', flexDirection: "column" }}>
@@ -83,10 +114,41 @@ export default function ProjectUser() {
                     <input type="password" style={{ fontSize: 20, marginBottom: 20 }} value={passwordValue} onChange={e => setPasswordValue(e.target.value)} />
                     <button className="btn green m-4" onClick={() => signIn(usernameValue, passwordValue)}><span>Sign In</span></button>
                     <button className="btn orange m-4" onClick={onSignUpClick}><span>Sign Up</span></button>
+                    <a href="javascript:void(0)" style={{ textAlign: "end" }} onClick={_ => setForgotDialogOpen(true)}><small>Forgot Password</small></a>
                 </div>
                 <div className="d-flex">
                     {data.map((ele, index) => <DbCardElement {...ele} tableName="MOBILE APPS" key={index} />)}
                 </div>
+                <Modal open={forgotDialogOpen} onClose={_ => setForgotDialogOpen(false)}>
+                    <Modal.Content>
+                        <Form onSubmit={onForgotSubmit}>
+                            {forgotDialogStep === 0 &&
+                                <Form.Field>
+                                    <label>Username (email)</label>
+                                    <input value={forgotUsernameVal} onChange={e => setForgotUsernameVal(e.target.value)} />
+                                </Form.Field>
+                            }
+                            {forgotDialogStep === 1 &&
+                                <>
+                                    <Form.Field>
+                                        <label>Code</label>
+                                        <input value={forgotCodeVal} onChange={e => setForgotCodeVal(e.target.value)} />
+                                    </Form.Field>
+                                    <Form.Field>
+                                        <label>New Password</label>
+                                        <input value={forgotNewPassVal} onChange={e => setForgotNewPassVal(e.target.value)} />
+                                    </Form.Field>
+                                </>
+                            }
+                            <Button type='submit'>Submit</Button>
+                        </Form>
+                    </Modal.Content>
+                    <Modal.Actions>
+                        <Button color='black' onClick={() => setForgotDialogOpen(false)}>
+                            Close
+                        </Button>
+                    </Modal.Actions>
+                </Modal>
             </div>
         )
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "easybase-react",
   "version": "2.1.2",
-  "description": "Serverless database integration for React and React Native with Easybase.",
+  "description": "Serverless functionality for React and React Native with Easybase",
   "author": "easybase",
   "license": "MIT",
   "repository": "easybase/easybase-react",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@react-native-community/async-storage": "1.12.1",
     "EasyQB": "git+https://github.com/easybase/EasyQB.git",
-    "easybasejs": "^4.2.3",
+    "easybasejs": "^4.2.6",
     "fast-deep-equal": "^3.1.3",
     "object-observer": "^4.0.3",
     "react-native-storage": "^1.0.1"

src/EasybaseContext.tsx

@@ -7,7 +7,8 @@ import {
     FrameConfiguration,
     QueryOptions,
     ContextValue,
-    UseReturnValue
+    UseReturnValue,
+    EmailTemplate
 } from "./types";
 import { SQW } from "EasyQB/types/sq";
 import { NewExpression } from "EasyQB/types/expression";
@@ -43,7 +44,9 @@ const c: ContextValue = {
     db: (_?: string) => ({}) as SQW,
     dbEventListener: (_: () => void) => () => {},
     useReturn: (_: () => SQW) => ({}) as UseReturnValue,
-    e: ({}) as NewExpression
+    e: ({}) as NewExpression,
+    forgotPassword: async (_: string, _2?: EmailTemplate) => ({}) as StatusResponse,
+    forgotPasswordConfirm: async (_: string, _2: string, _3: string) => ({}) as StatusResponse
 }
 
 export default createContext(c);

src/EasybaseProvider.tsx

@@ -38,7 +38,9 @@ const {
     getUserAttributes,
     resetUserPassword,
     signIn,
-    signOut
+    signOut,
+    forgotPassword,
+    forgotPasswordConfirm
 } = authFactory(g);
 
 const { log } = utilsFactory(g);
@@ -565,7 +567,9 @@ const EasybaseProvider = ({ children, ebconfig, options }: EasybaseProviderProps
         db,
         dbEventListener,
         e,
-        useReturn
+        useReturn,
+        forgotPassword,
+        forgotPasswordConfirm
     }
 
     return (

src/types.tsx

@@ -14,7 +14,8 @@ import type {
     FrameConfiguration,
     QueryOptions,
     AddRecordOptions,
-    DeleteRecordOptions
+    DeleteRecordOptions,
+    EmailTemplate
 } from "../node_modules/easybasejs/src/EasybaseProvider/types"
 
 export type {
@@ -27,7 +28,8 @@ export type {
     FrameConfiguration,
     QueryOptions,
     AddRecordOptions,
-    DeleteRecordOptions
+    DeleteRecordOptions,
+    EmailTemplate
 } from "../node_modules/easybasejs/src/EasybaseProvider/types"
 
 export {
@@ -296,4 +298,24 @@ export interface ContextValue {
      * @return {UseReturnValue} Object with the required values to statefully access an array that is subscribed to local executions to the corresponding db instance.
      */
     useReturn(dbInstance: () => SQW, deps?: React.DependencyList): UseReturnValue;
+    /**
+     * @async
+     * Trigger an email to the given username with a verification code to reset the user's password. This verification 
+     * code is used in the `forgotPasswordConfirm` function, along with a new password. **The username must be the user's email address**.
+     * @param {string} username A username which must also be a valid email address
+     * @param {EmailTemplate} emailTemplate Optional details for the formatting & content of the verification email
+     * @return {Promise<StatusResponse>} A StatusResponse corresponding to the successful sending of a verification code email
+     */
+    forgotPassword(username: string, emailTemplate?: EmailTemplate): Promise<StatusResponse>
+    /**
+     * @async
+     * Confirm the resetting of an unauthenticated users password. This function is invoked after `forgotpassword` is used to trigger
+     * an email containing a verification code to the given username [*which must also be an email*]. The user's randomly generated
+     * verification code from their email is passed in the first parameter. 
+     * @param {string} code Verification code found in the email sent from the `forgotPassword` function
+     * @param {string} username The same username (email) used in the `forgotPassword` function
+     * @param {string} newPassword The new password for the corresponding verified user
+     * @return {Promise<StatusResponse>} A StatusResponse corresponding to the successful setting of a new password
+     */
+    forgotPasswordConfirm(code: string, username: string, newPassword: string): Promise<StatusResponse>
 }