@proteinjs/user-ui 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.1 (2024-04-19)
+
+**Note:** Version bump only for package @proteinjs/user-ui

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Brent Bahry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/generated/index.d.ts

@@ -0,0 +1,10 @@
+/** Load Dependency Source Graphs */
+import '@proteinjs/reflection';
+import '@proteinjs/server-api';
+import '@proteinjs/ui';
+import '@proteinjs/user';
+import 'moment';
+import 'react';
+import 'react-dom';
+export * from '../index';
+//# sourceMappingURL=index.d.ts.map

package/dist/generated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../generated/index.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AACzB,OAAO,QAAQ,CAAC;AAChB,OAAO,OAAO,CAAC;AACf,OAAO,WAAW,CAAC;AAyBnB,cAAc,UAAU,CAAC"}

package/dist/generated/index.js

@@ -0,0 +1,38 @@
+"use strict";
+/** Load Dependency Source Graphs */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@proteinjs/reflection");
+require("@proteinjs/server-api");
+require("@proteinjs/ui");
+require("@proteinjs/user");
+require("moment");
+require("react");
+require("react-dom");
+/** Generate Source Graph */
+var sourceGraph = "{\"options\":{\"directed\":true,\"multigraph\":false,\"compound\":false},\"nodes\":[{\"v\":\"/Omit\"},{\"v\":\"@proteinjs/user-ui/loginPage\",\"value\":{\"packageName\":\"@proteinjs/user-ui\",\"name\":\"loginPage\",\"filePath\":\"/home/runner/work/user/user/packages/ui/src/pages/Login.tsx\",\"qualifiedName\":\"@proteinjs/user-ui/loginPage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}},{\"v\":\"@proteinjs/ui/Page\"},{\"v\":\"@proteinjs/user-ui/signupPage\",\"value\":{\"packageName\":\"@proteinjs/user-ui\",\"name\":\"signupPage\",\"filePath\":\"/home/runner/work/user/user/packages/ui/src/pages/Signup.tsx\",\"qualifiedName\":\"@proteinjs/user-ui/signupPage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}}],\"edges\":[{\"v\":\"@proteinjs/user-ui/loginPage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"},{\"v\":\"@proteinjs/user-ui/signupPage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"}]}";
+/** Generate Source Links */
+var Login_1 = require("../src/pages/Login");
+var Signup_1 = require("../src/pages/Signup");
+var sourceLinks = {
+    '@proteinjs/user-ui/loginPage': Login_1.loginPage,
+    '@proteinjs/user-ui/signupPage': Signup_1.signupPage,
+};
+/** Load Source Graph and Links */
+var reflection_1 = require("@proteinjs/reflection");
+reflection_1.SourceRepository.merge(sourceGraph, sourceLinks);
+__exportStar(require("../index"), exports);
+//# sourceMappingURL=index.js.map

package/dist/generated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../generated/index.ts"],"names":[],"mappings":";AAAA,oCAAoC;;;;;;;;;;;;;;;;AAEpC,iCAA+B;AAC/B,iCAA+B;AAC/B,yBAAuB;AACvB,2BAAyB;AACzB,kBAAgB;AAChB,iBAAe;AACf,qBAAmB;AAGnB,4BAA4B;AAE5B,IAAM,WAAW,GAAG,yiDAAyiD,CAAC;AAG9jD,4BAA4B;AAE5B,4CAA+C;AAC/C,8CAAiD;AAEjD,IAAM,WAAW,GAAG;IACnB,8BAA8B,EAAE,iBAAS;IACzC,+BAA+B,EAAE,mBAAU;CAC3C,CAAC;AAGF,kCAAkC;AAElC,oDAAyD;AACzD,6BAAgB,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAGjD,2CAAyB"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/AuthenticatedPageContainer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./src/AuthenticatedPageContainer"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mEAAiD"}

package/dist/src/AuthenticatedPageContainer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PageContainerProps } from '@proteinjs/ui';
+export type AuthenticatedPageContainerProps = Omit<PageContainerProps, 'auth'>;
+export declare function AuthenticatedPageContainer(props: AuthenticatedPageContainerProps): React.JSX.Element;
+//# sourceMappingURL=AuthenticatedPageContainer.d.ts.map

package/dist/src/AuthenticatedPageContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthenticatedPageContainer.d.ts","sourceRoot":"","sources":["../../src/AuthenticatedPageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxE,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAE/E,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,qBAyChF"}

package/dist/src/AuthenticatedPageContainer.js

@@ -0,0 +1,111 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthenticatedPageContainer = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_1 = require("@proteinjs/ui");
+var user_1 = require("@proteinjs/user");
+var Login_1 = require("./pages/Login");
+function AuthenticatedPageContainer(props) {
+    var _this = this;
+    var other = __rest(props, []);
+    var _a = react_1.default.useState(user_1.UserAuth.isLoggedIn()), isLoggedIn = _a[0], setIsLoggedIn = _a[1];
+    return (react_1.default.createElement(ui_1.PageContainer, __assign({ auth: {
+            isLoggedIn: isLoggedIn,
+            canViewPage: function (page) {
+                var _a, _b, _c, _d;
+                if ((_a = page.auth) === null || _a === void 0 ? void 0 : _a.public)
+                    return true;
+                if ((_b = page.auth) === null || _b === void 0 ? void 0 : _b.allUsers)
+                    return user_1.UserAuth.isLoggedIn();
+                if (!((_c = page.auth) === null || _c === void 0 ? void 0 : _c.roles))
+                    return user_1.UserAuth.hasRole('admin');
+                return user_1.UserAuth.hasRoles((_d = page.auth) === null || _d === void 0 ? void 0 : _d.roles);
+            },
+            login: Login_1.loginPath,
+            logout: function () { return __awaiter(_this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, fetch(user_1.routes.logout.path, {
+                                method: user_1.routes.logout.method,
+                                redirect: 'follow',
+                                credentials: 'same-origin',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                }
+                            })];
+                        case 1:
+                            response = _a.sent();
+                            if (response.status != 200)
+                                throw new Error("Failed to log out");
+                            new user_1.UserRepo().setUser(user_1.guestUser);
+                            setIsLoggedIn(false);
+                            return [2 /*return*/, Login_1.loginPath];
+                    }
+                });
+            }); }
+        } }, other)));
+}
+exports.AuthenticatedPageContainer = AuthenticatedPageContainer;
+//# sourceMappingURL=AuthenticatedPageContainer.js.map

package/dist/src/AuthenticatedPageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthenticatedPageContainer.js","sourceRoot":"","sources":["../../src/AuthenticatedPageContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAAwE;AACxE,wCAAwE;AACxE,uCAA0C;AAI1C,SAAgB,0BAA0B,CAAC,KAAsC;IAAjF,iBAyCC;IAxCG,IAAW,KAAK,UAAK,KAAK,EAApB,EAAY,CAAQ,CAAC;IACrB,IAAA,KAA8B,eAAK,CAAC,QAAQ,CAAC,eAAQ,CAAC,UAAU,EAAE,CAAC,EAAlE,UAAU,QAAA,EAAE,aAAa,QAAyC,CAAC;IAE1E,OAAO,CACH,8BAAC,kBAAa,aACV,IAAI,EAAE;YACF,UAAU,YAAA;YACV,WAAW,EAAE,UAAC,IAAU;;gBACpB,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;oBACjB,OAAO,IAAI,CAAC;gBAEhB,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;oBACnB,OAAO,eAAQ,CAAC,UAAU,EAAE,CAAC;gBAEjC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAA;oBACjB,OAAO,eAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBAErC,OAAO,eAAQ,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAC,CAAC;YAC/C,CAAC;YACD,KAAK,EAAE,iBAAS;YAChB,MAAM,EAAE;;;;gCACa,qBAAM,KAAK,CAAC,aAAM,CAAC,MAAM,CAAC,IAAI,EAAE;gCAC7C,MAAM,EAAE,aAAM,CAAC,MAAM,CAAC,MAAM;gCAC5B,QAAQ,EAAE,QAAQ;gCAClB,WAAW,EAAE,aAAa;gCAC1B,OAAO,EAAE;oCACL,cAAc,EAAE,kBAAkB;iCACrC;6BACJ,CAAC,EAAA;;4BAPI,QAAQ,GAAG,SAOf;4BACF,IAAI,QAAQ,CAAC,MAAM,IAAI,GAAG;gCACtB,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;4BAEzC,IAAI,eAAQ,EAAE,CAAC,OAAO,CAAC,gBAAS,CAAC,CAAC;4BAClC,aAAa,CAAC,KAAK,CAAC,CAAC;4BACrB,sBAAO,iBAAS,EAAC;;;iBACpB;SACJ,IACG,KAAK,EACX,CACL,CAAC;AACN,CAAC;AAzCD,gEAyCC"}

package/dist/src/pages/Login.d.ts

@@ -0,0 +1,4 @@
+import { Page } from '@proteinjs/ui';
+export declare const loginPath = "login";
+export declare const loginPage: Page;
+//# sourceMappingURL=Login.d.ts.map

package/dist/src/pages/Login.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login.d.ts","sourceRoot":"","sources":["../../../src/pages/Login.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA+D,MAAM,eAAe,CAAC;AAGlG,eAAO,MAAM,SAAS,UAAU,CAAC;AACjC,eAAO,MAAM,SAAS,EAAE,IAgBvB,CAAA"}

package/dist/src/pages/Login.js

@@ -0,0 +1,129 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loginPage = exports.loginPath = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_1 = require("@proteinjs/ui");
+var user_1 = require("@proteinjs/user");
+exports.loginPath = 'login';
+exports.loginPage = {
+    name: 'Login',
+    path: exports.loginPath,
+    auth: {
+        public: true,
+    },
+    component: function () { return (react_1.default.createElement(ui_1.FormPage, null,
+        react_1.default.createElement(ui_1.Form, { name: 'Login', createFields: function () { return new LoginFields(); }, fieldLayout: ['email', 'password'], buttons: buttons }))); }
+};
+var LoginFields = /** @class */ (function (_super) {
+    __extends(LoginFields, _super);
+    function LoginFields() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.email = (0, ui_1.textField)({
+            name: 'email'
+        });
+        _this.password = (0, ui_1.textField)({
+            name: 'password',
+            isPassword: true
+        });
+        return _this;
+    }
+    LoginFields.create = function () {
+        return new LoginFields();
+    };
+    return LoginFields;
+}(ui_1.Fields));
+var buttons = {
+    clear: ui_1.clearButton,
+    login: {
+        name: 'Login',
+        style: {
+            color: 'primary',
+            variant: 'contained',
+        },
+        onClick: function (fields, buttons) { return __awaiter(void 0, void 0, void 0, function () {
+            var response, body;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch(user_1.routes.login.path, {
+                            method: user_1.routes.login.method,
+                            body: JSON.stringify({
+                                email: fields.email.field.value,
+                                password: fields.password.field.value
+                            }),
+                            redirect: 'follow',
+                            credentials: 'same-origin',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            }
+                        })];
+                    case 1:
+                        response = _a.sent();
+                        if (response.status != 200)
+                            throw new Error("Failed to login, error: ".concat(response.statusText));
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        body = _a.sent();
+                        if (body.error)
+                            throw new Error(body.error);
+                        window.location.href = '/';
+                        return [2 /*return*/];
+                }
+            });
+        }); }
+    }
+};
+//# sourceMappingURL=Login.js.map

package/dist/src/pages/Login.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login.js","sourceRoot":"","sources":["../../../src/pages/Login.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAAkG;AAClG,wCAAwC;AAE3B,QAAA,SAAS,GAAG,OAAO,CAAC;AACpB,QAAA,SAAS,GAAS;IAC3B,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,iBAAS;IACf,IAAI,EAAE;QACF,MAAM,EAAE,IAAI;KACf;IACD,SAAS,EAAE,cAAM,OAAA,CACb,8BAAC,aAAQ;QACL,8BAAC,SAAI,IACD,IAAI,EAAC,OAAO,EACZ,YAAY,EAAE,cAAM,OAAA,IAAI,WAAW,EAAE,EAAjB,CAAiB,EACrC,WAAW,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAClC,OAAO,EAAE,OAAO,GAClB,CACK,CACd,EATgB,CAShB;CACJ,CAAA;AAED;IAA0B,+BAAM;IAAhC;QAAA,qEAaC;QARG,WAAK,GAAG,IAAA,cAAS,EAAc;YAC3B,IAAI,EAAE,OAAO;SAChB,CAAC,CAAC;QAEH,cAAQ,GAAG,IAAA,cAAS,EAAc;YAC9B,IAAI,EAAE,UAAU;YAChB,UAAU,EAAE,IAAI;SACnB,CAAC,CAAC;;IACP,CAAC;IAZU,kBAAM,GAAb;QACI,OAAO,IAAI,WAAW,EAAE,CAAC;IAC7B,CAAC;IAUL,kBAAC;AAAD,CAAC,AAbD,CAA0B,WAAM,GAa/B;AAED,IAAM,OAAO,GAA6B;IACzC,KAAK,EAAE,gBAAW;IAClB,KAAK,EAAE;QACN,IAAI,EAAE,OAAO;QACb,KAAK,EAAE;YACN,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,WAAW;SACpB;QACD,OAAO,EAAE,UAAO,MAAmB,EAAE,OAAiC;;;;4BACpD,qBAAM,KAAK,CAAC,aAAM,CAAC,KAAK,CAAC,IAAI,EAAE;4BACnC,MAAM,EAAE,aAAM,CAAC,KAAK,CAAC,MAAM;4BAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gCACjB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK;gCAC/B,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK;6BACxC,CAAC;4BACF,QAAQ,EAAE,QAAQ;4BAClB,WAAW,EAAE,aAAa;4BAC1B,OAAO,EAAE;gCACL,cAAc,EAAE,kBAAkB;6BACrC;yBACJ,CAAC,EAAA;;wBAXL,QAAQ,GAAG,SAWN;wBACF,IAAI,QAAQ,CAAC,MAAM,IAAI,GAAG;4BACtB,MAAM,IAAI,KAAK,CAAC,kCAA2B,QAAQ,CAAC,UAAU,CAAE,CAAC,CAAC;wBAEzD,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;;wBAA5B,IAAI,GAAG,SAAqB;wBAClC,IAAI,IAAI,CAAC,KAAK;4BACV,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;wBAEhC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;;;;aACpC;KACD;CACD,CAAC"}

package/dist/src/pages/Signup.d.ts

@@ -0,0 +1,3 @@
+import { Page } from '@proteinjs/ui';
+export declare const signupPage: Page;
+//# sourceMappingURL=Signup.d.ts.map

package/dist/src/pages/Signup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signup.d.ts","sourceRoot":"","sources":["../../../src/pages/Signup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA+D,MAAM,eAAe,CAAC;AAGlG,eAAO,MAAM,UAAU,EAAE,IAgBxB,CAAA"}

package/dist/src/pages/Signup.js

@@ -0,0 +1,135 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.signupPage = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_1 = require("@proteinjs/ui");
+var user_1 = require("@proteinjs/user");
+exports.signupPage = {
+    name: 'Sign Up',
+    path: 'signup',
+    auth: {
+        public: true,
+    },
+    component: function () { return (react_1.default.createElement(ui_1.FormPage, null,
+        react_1.default.createElement(ui_1.Form, { name: 'Sign Up', createFields: function () { return new SignupFields(); }, fieldLayout: ['name', 'email', 'password', 'confirmPassword'], buttons: buttons }))); }
+};
+var SignupFields = /** @class */ (function (_super) {
+    __extends(SignupFields, _super);
+    function SignupFields() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.name = (0, ui_1.textField)({
+            name: 'name'
+        });
+        _this.email = (0, ui_1.textField)({
+            name: 'email'
+        });
+        _this.password = (0, ui_1.textField)({
+            name: 'password',
+            isPassword: true
+        });
+        _this.confirmPassword = (0, ui_1.textField)({
+            name: 'confirmPassword',
+            isPassword: true
+        });
+        return _this;
+    }
+    SignupFields.create = function () {
+        return new SignupFields();
+    };
+    return SignupFields;
+}(ui_1.Fields));
+var buttons = {
+    clear: ui_1.clearButton,
+    signup: {
+        name: 'Sign up',
+        style: {
+            color: 'primary',
+            variant: 'contained',
+        },
+        onClick: function (fields, buttons) { return __awaiter(void 0, void 0, void 0, function () {
+            var response, body;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch(user_1.routes.createUser.path, {
+                            method: user_1.routes.createUser.method,
+                            body: JSON.stringify({
+                                name: fields.name.field.value,
+                                email: fields.email.field.value,
+                                password: fields.password.field.value
+                            }),
+                            redirect: 'follow',
+                            credentials: 'same-origin',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            }
+                        })];
+                    case 1:
+                        response = _a.sent();
+                        if (response.status != 200)
+                            throw new Error("Failed to signup, error: ".concat(response.statusText));
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        body = _a.sent();
+                        if (body.error)
+                            throw new Error(body.error);
+                        return [2 /*return*/, "Successfully created your account! Please check your email for an email confirmation."];
+                }
+            });
+        }); }
+    }
+};
+//# sourceMappingURL=Signup.js.map

package/dist/src/pages/Signup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signup.js","sourceRoot":"","sources":["../../../src/pages/Signup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAAkG;AAClG,wCAAwC;AAE3B,QAAA,UAAU,GAAS;IAC5B,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE;QACF,MAAM,EAAE,IAAI;KACf;IACD,SAAS,EAAE,cAAM,OAAA,CACb,8BAAC,aAAQ;QACL,8BAAC,SAAI,IACD,IAAI,EAAC,SAAS,EACd,YAAY,EAAE,cAAM,OAAA,IAAI,YAAY,EAAE,EAAlB,CAAkB,EACtC,WAAW,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,CAAC,EAC7D,OAAO,EAAE,OAAO,GAClB,CACK,CACd,EATgB,CAShB;CACJ,CAAA;AAED;IAA2B,gCAAM;IAAjC;QAAA,qEAsBC;QAjBG,UAAI,GAAG,IAAA,cAAS,EAAe;YAC3B,IAAI,EAAE,MAAM;SACf,CAAC,CAAC;QAEH,WAAK,GAAG,IAAA,cAAS,EAAe;YAC5B,IAAI,EAAE,OAAO;SAChB,CAAC,CAAC;QAEH,cAAQ,GAAG,IAAA,cAAS,EAAe;YAC/B,IAAI,EAAE,UAAU;YAChB,UAAU,EAAE,IAAI;SACnB,CAAC,CAAC;QAEH,qBAAe,GAAG,IAAA,cAAS,EAAe;YACtC,IAAI,EAAE,iBAAiB;YACvB,UAAU,EAAE,IAAI;SACnB,CAAC,CAAC;;IACP,CAAC;IArBU,mBAAM,GAAb;QACI,OAAO,IAAI,YAAY,EAAE,CAAC;IAC9B,CAAC;IAmBL,mBAAC;AAAD,CAAC,AAtBD,CAA2B,WAAM,GAsBhC;AAED,IAAM,OAAO,GAA8B;IAC1C,KAAK,EAAE,gBAAW;IAClB,MAAM,EAAE;QACP,IAAI,EAAE,SAAS;QACf,KAAK,EAAE;YACN,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,WAAW;SACpB;QACD,OAAO,EAAE,UAAO,MAAoB,EAAE,OAAkC;;;;4BACtD,qBAAM,KAAK,CAAC,aAAM,CAAC,UAAU,CAAC,IAAI,EAAE;4BACxC,MAAM,EAAE,aAAM,CAAC,UAAU,CAAC,MAAM;4BAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gCACjB,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;gCAC7B,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK;gCAC/B,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK;6BACxC,CAAC;4BACF,QAAQ,EAAE,QAAQ;4BAClB,WAAW,EAAE,aAAa;4BAC1B,OAAO,EAAE;gCACL,cAAc,EAAE,kBAAkB;6BACrC;yBACJ,CAAC,EAAA;;wBAZL,QAAQ,GAAG,SAYN;wBACF,IAAI,QAAQ,CAAC,MAAM,IAAI,GAAG;4BACtB,MAAM,IAAI,KAAK,CAAC,mCAA4B,QAAQ,CAAC,UAAU,CAAE,CAAC,CAAC;wBAE1D,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;;wBAA5B,IAAI,GAAG,SAAqB;wBAClC,IAAI,IAAI,CAAC,KAAK;4BACV,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;wBAEhC,sBAAO,uFAAuF,EAAC;;;aACxG;KACD;CACD,CAAC"}

package/generated/index.ts

@@ -0,0 +1,34 @@
+/** Load Dependency Source Graphs */
+
+import '@proteinjs/reflection';
+import '@proteinjs/server-api';
+import '@proteinjs/ui';
+import '@proteinjs/user';
+import 'moment';
+import 'react';
+import 'react-dom';
+
+
+/** Generate Source Graph */
+
+const sourceGraph = "{\"options\":{\"directed\":true,\"multigraph\":false,\"compound\":false},\"nodes\":[{\"v\":\"/Omit\"},{\"v\":\"@proteinjs/user-ui/loginPage\",\"value\":{\"packageName\":\"@proteinjs/user-ui\",\"name\":\"loginPage\",\"filePath\":\"/home/runner/work/user/user/packages/ui/src/pages/Login.tsx\",\"qualifiedName\":\"@proteinjs/user-ui/loginPage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}},{\"v\":\"@proteinjs/ui/Page\"},{\"v\":\"@proteinjs/user-ui/signupPage\",\"value\":{\"packageName\":\"@proteinjs/user-ui\",\"name\":\"signupPage\",\"filePath\":\"/home/runner/work/user/user/packages/ui/src/pages/Signup.tsx\",\"qualifiedName\":\"@proteinjs/user-ui/signupPage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}}],\"edges\":[{\"v\":\"@proteinjs/user-ui/loginPage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"},{\"v\":\"@proteinjs/user-ui/signupPage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"}]}";
+
+
+/** Generate Source Links */
+
+import { loginPage } from '../src/pages/Login';
+import { signupPage } from '../src/pages/Signup';
+
+const sourceLinks = {
+	'@proteinjs/user-ui/loginPage': loginPage,
+	'@proteinjs/user-ui/signupPage': signupPage,
+};
+
+
+/** Load Source Graph and Links */
+
+import { SourceRepository } from '@proteinjs/reflection';
+SourceRepository.merge(sourceGraph, sourceLinks);
+
+
+export * from '../index';

package/index.ts

@@ -0,0 +1 @@
+export * from './src/AuthenticatedPageContainer';

package/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+	"roots": [
+	  	"<rootDir>/test"
+	],
+	"transform": {
+	  	"^.+\\.tsx?$": "ts-jest"
+	},
+	"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+	"moduleFileExtensions": [
+		"ts",
+		"tsx",
+		"js",
+		"jsx",
+		"json",
+		"node"
+	],
+	"testEnvironment": "node"
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@proteinjs/user-ui",
+    "version": "1.0.1",
+    "description": "User ui components",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/proteinjs/user.git"
+    },
+    "bugs": {
+        "url": "https://github.com/proteinjs/user/issues"
+    },
+    "homepage": "https://github.com/proteinjs/user#readme",
+    "author": "Brent Bahry",
+    "license": "MIT",
+    "scripts": {
+        "clean": "rm -rf dist/ generated/ node_modules/ package-lock.json",
+        "build": "reflection-build && tsc",
+        "watch": "reflection-watch"
+    },
+    "dependencies": {
+        "@proteinjs/reflection": "1.0.2",
+        "@proteinjs/server-api": "1.0.2",
+        "@proteinjs/ui": "1.0.1",
+        "@proteinjs/user": "1.0.1",
+        "moment": "2.29.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    },
+    "devDependencies": {
+        "@proteinjs/reflection-build": "1.0.5",
+        "@types/node": "14.0.13",
+        "@types/react": "18.2.23",
+        "@types/react-dom": "18.2.8",
+        "typescript": "5.2.2"
+    },
+    "main": "./dist/generated/index.js",
+    "types": "./dist/generated/index.d.ts",
+    "gitHead": "ba3ee20c97d9e01165e27d6b5ed984394fcf0825"
+}

package/src/AuthenticatedPageContainer.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Page, PageContainer, PageContainerProps } from '@proteinjs/ui';
+import { routes, guestUser, UserAuth, UserRepo } from '@proteinjs/user';
+import { loginPath } from './pages/Login';
+
+export type AuthenticatedPageContainerProps = Omit<PageContainerProps, 'auth'>;
+
+export function AuthenticatedPageContainer(props: AuthenticatedPageContainerProps) {
+    const { ...other } = props;
+    const [isLoggedIn, setIsLoggedIn] = React.useState(UserAuth.isLoggedIn());
+
+    return (
+        <PageContainer
+            auth={{
+                isLoggedIn,
+                canViewPage: (page: Page) => {
+                    if (page.auth?.public)
+                        return true;
+
+                    if (page.auth?.allUsers)
+                        return UserAuth.isLoggedIn();
+
+                    if (!page.auth?.roles)
+                        return UserAuth.hasRole('admin');
+
+                    return UserAuth.hasRoles(page.auth?.roles);
+                },
+                login: loginPath,
+                logout: async () => {
+                    const response = await fetch(routes.logout.path, {
+                        method: routes.logout.method,
+                        redirect: 'follow',
+                        credentials: 'same-origin',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    });
+                    if (response.status != 200)
+                        throw new Error(`Failed to log out`);
+
+                    new UserRepo().setUser(guestUser);
+                    setIsLoggedIn(false);
+                    return loginPath;
+                }
+            }}
+            {...other}
+        />
+    );
+}

package/src/pages/Login.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Page, Form, Fields, textField, FormButtons, clearButton, FormPage } from '@proteinjs/ui';
+import { routes } from '@proteinjs/user'
+
+export const loginPath = 'login';
+export const loginPage: Page = {
+    name: 'Login',
+    path: loginPath,
+    auth: {
+        public: true,
+    },
+    component: () => (
+        <FormPage>
+            <Form<LoginFields, typeof buttons>
+                name='Login'
+                createFields={() => new LoginFields()}
+                fieldLayout={['email', 'password']}
+                buttons={buttons}
+            />
+        </FormPage>
+    )
+}
+
+class LoginFields extends Fields {
+    static create() {
+        return new LoginFields();
+    }
+
+    email = textField<LoginFields>({
+        name: 'email'
+    });
+
+    password = textField<LoginFields>({
+        name: 'password',
+        isPassword: true
+    });
+}
+
+const buttons: FormButtons<LoginFields> = {
+	clear: clearButton,
+	login: {
+		name: 'Login',
+		style: {
+			color: 'primary',
+			variant: 'contained',
+		},
+		onClick: async (fields: LoginFields, buttons: FormButtons<LoginFields>) => {
+			const response = await fetch(routes.login.path, {
+                method: routes.login.method,
+                body: JSON.stringify({
+                    email: fields.email.field.value,
+                    password: fields.password.field.value
+                }),
+                redirect: 'follow',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (response.status != 200)
+                throw new Error(`Failed to login, error: ${response.statusText}`);
+
+            const body = await response.json();
+            if (body.error)
+                throw new Error(body.error);
+
+            window.location.href = '/';
+		}
+	}
+};

package/src/pages/Signup.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Page, Form, Fields, textField, FormButtons, clearButton, FormPage } from '@proteinjs/ui';
+import { routes } from '@proteinjs/user'
+
+export const signupPage: Page = {
+    name: 'Sign Up',
+    path: 'signup',
+    auth: {
+        public: true,
+    },
+    component: () => (
+        <FormPage>
+            <Form<SignupFields, typeof buttons>
+                name='Sign Up'
+                createFields={() => new SignupFields()}
+                fieldLayout={['name', 'email', 'password', 'confirmPassword']}
+                buttons={buttons}
+            />
+        </FormPage>
+    )
+}
+
+class SignupFields extends Fields {
+    static create() {
+        return new SignupFields();
+    }
+
+    name = textField<SignupFields>({
+        name: 'name'
+    });
+
+    email = textField<SignupFields>({
+        name: 'email'
+    });
+
+    password = textField<SignupFields>({
+        name: 'password',
+        isPassword: true
+    });
+
+    confirmPassword = textField<SignupFields>({
+        name: 'confirmPassword',
+        isPassword: true
+    });
+}
+
+const buttons: FormButtons<SignupFields> = {
+	clear: clearButton,
+	signup: {
+		name: 'Sign up',
+		style: {
+			color: 'primary',
+			variant: 'contained',
+		},
+		onClick: async (fields: SignupFields, buttons: FormButtons<SignupFields>) => {
+			const response = await fetch(routes.createUser.path, {
+                method: routes.createUser.method,
+                body: JSON.stringify({
+                    name: fields.name.field.value,
+                    email: fields.email.field.value,
+                    password: fields.password.field.value
+                }),
+                redirect: 'follow',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (response.status != 200)
+                throw new Error(`Failed to signup, error: ${response.statusText}`);
+
+            const body = await response.json();
+            if (body.error)
+                throw new Error(body.error);
+
+            return `Successfully created your account! Please check your email for an email confirmation.`;
+		}
+	}
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "rootDir": "./",
+        "target": "es5",
+        "module": "commonjs",
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "outDir": "./dist/",
+        "strict": true,
+        "noImplicitAny": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "jsx": "react"
+    }
+}