Profile & passwords work

Author: stanlemon

apps/react-pouchdb-example/src/Notes.tsx

@@ -82,7 +82,7 @@ export class Notes extends React.Component<Props, State> {
             <textarea
               className="textarea"
               onChange={this.updateNote}
-              onKeyPress={this.addNoteWithEnter}
+              onKeyDown={this.addNoteWithEnter}
               value={this.state.note}
             />
           </div>

apps/react-pouchdb-example/src/Tasks.tsx

@@ -100,7 +100,7 @@ export class Tasks extends React.Component<Props, State> {
               className="input"
               type="text"
               onChange={this.updateTask}
-              onKeyPress={this.addTaskWithEnter}
+              onKeyDown={this.addTaskWithEnter}
               value={this.state.name}
             />
           </div>

apps/template/package.json

@@ -14,7 +14,7 @@
     "webpack:serve": "webpack serve",
     "webpack:build": "NODE_ENV=production webpack",
     "dev": "NODE_ENV=development concurrently \"npm run webpack:serve\" \"npm run start:dev\"",
-    "test": "jest",
+    "test": "jest --detectOpenHandles",
     "test:watch": "jest -w",
     "test:coverage": "jest --coverage",
     "lint": "eslint --ext js,jsx,ts,tsx ./src/",
@@ -36,4 +36,4 @@
     "concurrently": "^8.2.2",
     "supertest": "^6.3.3"
   }
-}
+}

apps/template/src/App.test.tsx

@@ -1,7 +1,8 @@
 import "@testing-library/jest-dom";
 import { render, screen, fireEvent, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import App, { ItemData } from "./App";
+import App from "./App";
+import { ItemData } from "./views";
 import { SessionContext } from "./Session";
 
 const output = [

apps/template/src/components/Input.tsx

@@ -30,27 +30,27 @@ export function Input({
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     onChange(e.currentTarget.value);
   };
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
     if (e.key === "Enter") {
       e.preventDefault();
       onEnter();
     }
   };
 
   return (
-    <>
+    <div style={{ marginBottom: ".75em" }}>
       {label && <label htmlFor={name}>{label}</label>}
       <input
         type={type}
         id={name}
         onChange={handleChange}
-        onKeyPress={handleKeyPress}
+        onKeyDown={handleKeyDown}
         placeholder={placeholder}
         value={value}
         {...attrs}
       />
-      {error && <div>{error}</div>}
-    </>
+      {error && <div style={{ color: "red" }}>{error}</div>}
+    </div>
   );
 }
 

apps/template/src/helpers/fetchApi.tsx

@@ -12,12 +12,46 @@ export function fetchApi<T, P>(
       "Content-Type": "application/json",
     },
     body: JSON.stringify(data),
-  }).then((response) => {
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-    return response.json() as Promise<T>;
-  });
+  })
+    .then((response) => {
+      return Promise.all([
+        new Promise<Response>((resolve, reject) => {
+          resolve(response);
+        }),
+        response.json() as Promise<T>,
+      ]);
+    })
+    .then(([response, json]) => {
+      if (!response.ok) {
+        throw new ApiError(
+          response.status,
+          response.statusText,
+          json as Record<string, unknown>
+        );
+      }
+
+      return json;
+    });
 }
 
 export default fetchApi;
+
+export class ApiError extends Error {
+  #code: number;
+
+  get code(): number {
+    return this.#code;
+  }
+
+  #body: Record<string, unknown>;
+
+  get body(): Record<string, unknown> {
+    return this.#body;
+  }
+
+  constructor(code: number, message: string, body: Record<string, unknown>) {
+    super(message);
+    this.#code = code;
+    this.#body = body;
+  }
+}

apps/template/src/views/Account.tsx

@@ -1,6 +1,15 @@
 import { useContext, useState } from "react";
 import { SessionContext } from "../Session";
 import { Header, Input, Spacer } from "../components";
+import fetchApi, { ApiError } from "../helpers/fetchApi";
+
+type Errors = {
+  name?: string;
+  email?: string;
+  current_password?: string;
+  password?: string;
+  repeat_password?: string;
+};
 
 export type ProfileData = {
   name: string;
@@ -23,23 +32,68 @@ export const DEFAULT_PASSWORD_DATA: PasswordData = {
   new_password2: "",
 };
 
+// eslint-disable-next-line max-lines-per-function
 export function Account() {
   const { session } = useContext(SessionContext);
-  const [profile, setProfile] = useState<ProfileData>(DEFAULT_PROFILE_DATA);
+  const [profile, setProfile] = useState<ProfileData>({
+    ...DEFAULT_PROFILE_DATA,
+    name: session.user?.name ?? "",
+    email: session.user?.email ?? "",
+  });
   const [password, setPassword] = useState<PasswordData>(DEFAULT_PASSWORD_DATA);
+  const [errors, setErrors] = useState<Errors>({});
 
   const storeProfile = (key: keyof ProfileData, value: string) => {
     setProfile({ ...profile, [key]: value });
   };
   const saveProfile = () => {
-    console.log(profile);
+    setErrors({});
+    fetchApi<ProfileData, ProfileData>(
+      "/auth/user",
+      session?.token || "",
+      "put",
+      profile
+    )
+      .then((user) => {
+        setProfile(user);
+        setErrors({});
+      })
+      .catch((err: ApiError) => {
+        if (err.code === 400) {
+          setErrors({ ...(err.body.errors as Errors) });
+        }
+      });
   };
 
   const storePassword = (key: keyof PasswordData, value: string) => {
     setPassword({ ...password, [key]: value });
   };
   const savePassword = () => {
-    console.log(password);
+    setErrors({});
+
+    if (password.new_password1 !== password.new_password2) {
+      setErrors({ repeat_password: "Passwords do not match" });
+      return;
+    }
+
+    fetchApi<PasswordData, { current_password: string; password: string }>(
+      "/auth/password",
+      session?.token || "",
+      "post",
+      {
+        current_password: password.current_password,
+        password: password.new_password1,
+      }
+    )
+      .then(() => {
+        setPassword(DEFAULT_PASSWORD_DATA);
+        setErrors({});
+      })
+      .catch((err: ApiError) => {
+        if (err.code === 400) {
+          setErrors({ ...(err.body.errors as Errors) });
+        }
+      });
   };
 
   return (
@@ -50,12 +104,14 @@ export function Account() {
         name="name"
         label="Name"
         value={profile.name}
+        error={errors.name}
         onChange={(value) => storeProfile("name", value)}
       />
       <Input
         name="email"
         label="Email"
         value={profile.email}
+        error={errors.email}
         onChange={(value) => storeProfile("email", value)}
       />
       <button onClick={saveProfile}>Save</button>
@@ -66,21 +122,24 @@ export function Account() {
         name="current_password"
         type="password"
         label="Current Password"
-        value={password.current_password ?? ""}
+        value={password.current_password}
+        error={errors.current_password}
         onChange={(value) => storePassword("current_password", value)}
       />
       <Input
         name="new_password1"
         type="password"
         label="New Password"
-        value={password.new_password1 ?? ""}
+        value={password.new_password1}
+        error={errors.password}
         onChange={(value) => storePassword("new_password1", value)}
       />
       <Input
         name="new_password2"
         type="password"
         label="Repeat New Password"
-        value={password.new_password2 ?? ""}
+        value={password.new_password2}
+        error={errors.repeat_password}
         onChange={(value) => storePassword("new_password2", value)}
       />
 

jest.config.js

@@ -0,0 +1 @@
+export { default } from "@stanlemon/webdev/jest.config.js";

package.json

@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "engines": {
     "node": ">=18.0"
   },
@@ -12,8 +13,9 @@
   "scripts": {
     "prepare": "husky install",
     "lint": "eslint --ext .js,.ts,.tsx --ignore-path .gitignore .",
-    "test": "npm run test --workspaces --if-present",
-    "test:coverage": "npm run test:coverage --workspaces --if-present",
+    "test": "npm run build && jest --detectOpenHandles --silent",
+    "test:watch": "npm run build && jest --silent -w",
+    "test:coverage": "npm run build && jest --silent --coverage",
     "build": "npm run build --workspaces --if-present",
     "publish": "node publish.js"
   }

packages/react-couchdb-authentication/src/components/LoginView.tsx

@@ -33,7 +33,7 @@ export function LoginView(props: LoginViewProps): React.ReactElement {
           type="text"
           value={props.username}
           onChange={props.setUsername}
-          onKeyPress={hitEnter}
+          onKeyDown={hitEnter}
         />
       </p>
       <p>
@@ -43,7 +43,7 @@ export function LoginView(props: LoginViewProps): React.ReactElement {
           type="password"
           value={props.password}
           onChange={props.setPassword}
-          onKeyPress={hitEnter}
+          onKeyDown={hitEnter}
         />
       </p>
 

packages/server-with-auth/src/routes/auth.js

@@ -78,17 +78,17 @@ export default function authRoutes({
         return next(err);
       }
       if (!user) {
-        res.status(401).json({
+        return res.status(401).json({
           message: "Incorrect username or password.",
         });
       }
 
-      req.logIn(user, (err) => {
+      return req.logIn(user, (err) => {
         if (err) {
           return next(err);
         }
 
-        dao
+        return dao
           .updateUser(user.id, {
             last_logged_in: new Date(),
           })
@@ -97,7 +97,7 @@ export default function authRoutes({
 
             eventEmitter.emit(EVENTS.USER_LOGIN, user);
 
-            res.json({
+            return res.json({
               token,
               user: formatOutput(update, HIDDEN_FIELDS),
             });
@@ -251,7 +251,7 @@ export default function authRoutes({
       if (!user) {
         res.status(400).json({
           errors: {
-            currentPassword: "Current password is incorrect",
+            current_password: "Current password is incorrect",
           },
         });
         return;

packages/server-with-auth/src/routes/auth.test.js

@@ -264,7 +264,7 @@ describe("/auth", () => {
     const username = "test" + uuidv4();
     const password1 = "FirstP@ssw0rd";
     const password2 = "SecondP@ssw0rd";
-    const data = { password: password2, currentPassword: password1 };
+    const data = { password: password2, current_password: password1 };
 
     const { token } = await signupAndLogin(username, password1);
 

packages/server-with-auth/src/schema/index.js

@@ -24,7 +24,7 @@ export const RESET_PASSWORD = Joi.object({
 
 export const CHANGE_PASSWORD = Joi.object({
   password: PASSWORD,
-  currentPassword: PASSWORD,
+  current_password: PASSWORD.label("Current Password"),
 });
 
 export const USER = Joi.object({});

packages/webdev/webpack.test.tsx packages/webdev/example.tsx

@@ -4,3 +4,15 @@ if (!global.setImmediate) {
   // This is as gross as it looks. It's a workaround for using PouchDB in tests.
   global.setImmediate = global.setTimeout; // ts: as unknown as typeof setImmediate;
 }
+
+if (process.argv.includes("--silent")) {
+  global.console = {
+    ...console,
+    // Comment to expose a specific log level
+    log: jest.fn(),
+    debug: jest.fn(),
+    info: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  };
+}

packages/webdev/jest.setup.js

@@ -15,7 +15,7 @@
   },
   "type": "commonjs",
   "scripts": {
-    "test": "WEBDEV_ENTRY=./webpack.test.tsx webpack build",
+    "build": "WEBDEV_ENTRY=./example.tsx webpack build",
     "lint": "eslint --ext js,jsx,ts,tsx ./",
     "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./"
   },
@@ -63,4 +63,4 @@
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   }
-}
+}