@stanlemon/app-template 0.2.0 → 0.2.1

package/app.js

@@ -4,12 +4,7 @@ import {
   SimpleUsersDao,
 } from "@stanlemon/server-with-auth";
 
-const users = new SimpleUsersDao([
-  {
-    username: "user",
-    password: "password",
-  },
-]);
+const users = new SimpleUsersDao();
 
 const app = createAppServer({
   webpack: "http://localhost:8080",

package/db.json

@@ -2,9 +2,11 @@
   "users": [
     {
       "username": "user",
-      "password": "password",
-      "id": "857866e3-8f76-4fc1-be6c-9c785fbdf593",
-      "last_logged_in": "2022-03-06T13:02:35.423-05:00"
+      "password": "$2a$10$5oHnfhEv5ezdqcVf7k1KNeQ2VVX4Jv0p5tZmhroqbS117umUBrIJO",
+      "id": "defb1788-f2b9-4f74-9a72-f397788592bb",
+      "verification_token": "BkWPUmVb9",
+      "created_at": "2022-03-08T00:42:01.041Z",
+      "last_updated": "2022-03-08T00:42:01.041Z"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",

package/src/Input.tsx

@@ -9,6 +9,7 @@ export default function Input({
   onEnter = () => {
     /* noop */
   },
+  error,
 }: {
   type?: string;
   value?: string;
@@ -16,6 +17,7 @@ export default function Input({
   placeholder?: string;
   onChange?: (value: string) => void;
   onEnter?: () => void;
+  error?: string;
 }) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     onChange(e.currentTarget.value);
@@ -37,6 +39,7 @@ export default function Input({
         placeholder={placeholder}
         value={value}
       />
+      {error && <div>{error}</div>}
     </>
   );
 }

package/src/Login.tsx

@@ -71,6 +71,7 @@ export default function Login() {
         label="Password"
         value={values.password}
         onChange={(value) => setValues({ ...values, password: value })}
+        onEnter={onSubmit}
       />
       <button onClick={onSubmit}>Login</button>
     </div>

package/src/Register.tsx

@@ -4,7 +4,7 @@ import Input from "./Input";
 
 // eslint-disable-next-line max-lines-per-function
 export default function Register() {
-  const [error, setError] = useState<string | null>(null);
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const [values, setValues] = useState<User>({
     name: "",
     email: "",
@@ -17,7 +17,7 @@ export default function Register() {
   };
 
   const onSubmit = () => {
-    setError(null);
+    setErrors({});
     fetch("/auth/register", {
       headers: {
         Accept: "application/json",
@@ -43,10 +43,10 @@ export default function Register() {
           status: number;
           data: Record<string, unknown>;
         }) => {
-          console.log(ok, status, data);
-
           if (ok) {
             setSession(data as Session);
+          } else {
+            setErrors((data as FormErrors).errors);
           }
         }
       )
@@ -57,32 +57,18 @@ export default function Register() {
 
   return (
     <div>
-      {error && (
-        <div>
-          <strong>{error}</strong>
-        </div>
-      )}
-      <Input
-        label="Name"
-        value={values.name || ""}
-        onChange={(value) => setValues({ ...values, name: value })}
-      />
-      <Input
-        type="email"
-        label="Email"
-        value={values.email || ""}
-        onChange={(value) => setValues({ ...values, email: value })}
-      />
       <Input
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
+        error={errors.username}
       />
       <Input
         type="password"
         label="Password"
         value={values.password}
         onChange={(value) => setValues({ ...values, password: value })}
+        error={errors.password}
       />
       <button onClick={onSubmit}>Register</button>
     </div>