@explita/cloud-auth-client 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/change-password.js +58 -75
- package/dist/components/icons/alert-circle.d.ts +5 -0
- package/dist/components/icons/alert-circle.js +13 -0
- package/dist/components/icons/chevron-down.d.ts +5 -0
- package/dist/components/icons/chevron-down.js +11 -0
- package/dist/components/icons/lock.d.ts +2 -1
- package/dist/components/icons/lock.js +2 -2
- package/dist/components/icons/logout.d.ts +2 -1
- package/dist/components/icons/logout.js +2 -2
- package/dist/components/icons/setting.d.ts +2 -1
- package/dist/components/icons/setting.js +2 -2
- package/dist/components/icons/shield.d.ts +5 -0
- package/dist/components/icons/shield.js +11 -0
- package/dist/components/icons/user.d.ts +5 -0
- package/dist/components/icons/user.js +12 -0
- package/dist/components/login-form.d.ts +3 -1
- package/dist/components/login-form.js +45 -34
- package/dist/components/message.js +2 -2
- package/dist/components/must-login.js +20 -8
- package/dist/components/reset-password.d.ts +2 -1
- package/dist/components/reset-password.js +62 -60
- package/dist/components/settings.js +16 -8
- package/dist/components/signup-form.d.ts +4 -3
- package/dist/components/signup-form.js +72 -60
- package/dist/components/toggle-2fa.js +42 -26
- package/dist/components/toggle-account-status.js +56 -64
- package/dist/components/ui/input.js +1 -1
- package/dist/components/user-card.js +48 -23
- package/dist/contexts/auth-provider.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/lib/utils.js +7 -1
- package/dist/server/user.d.ts +3 -1
- package/dist/server/user.js +33 -0
- package/dist/styles.css +2645 -1805
- package/dist/types.d.ts +21 -7
- package/package.json +65 -65
|
@@ -1,40 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
35
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
6
|
exports.ChangePassword = ChangePassword;
|
|
37
|
-
const react_1 =
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
38
8
|
const dialog_1 = require("./ui/dialog");
|
|
39
9
|
const button_1 = require("./ui/button");
|
|
40
10
|
const label_1 = require("./ui/label");
|
|
@@ -43,61 +13,74 @@ const auth_provider_1 = require("../contexts/auth-provider");
|
|
|
43
13
|
const message_1 = require("./message");
|
|
44
14
|
const must_login_1 = require("./must-login");
|
|
45
15
|
const utils_1 = require("../lib/utils");
|
|
16
|
+
const shield_1 = require("./icons/shield");
|
|
46
17
|
function ChangePassword({ user, open, onOpenChange, onSubmit, onSuccess, }) {
|
|
47
18
|
const { user: loggedInUser } = (0, auth_provider_1.useAuth)();
|
|
48
|
-
const [
|
|
19
|
+
const [isPending, setIsPending] = react_1.default.useState(false);
|
|
20
|
+
const [state, setState] = react_1.default.useState({
|
|
21
|
+
message: "",
|
|
22
|
+
//@ts-ignore
|
|
23
|
+
status: "",
|
|
24
|
+
errors: {},
|
|
25
|
+
});
|
|
26
|
+
async function handleSubmit(e) {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
const formData = new FormData(e.currentTarget);
|
|
49
29
|
if (!onSubmit || typeof onSubmit !== "function") {
|
|
50
30
|
return {
|
|
51
31
|
message: "Password change handler is not defined. Please pass onSubmit handler to ChangePassword component. If you are using UserCard component, please pass onChangePassword handler to it.",
|
|
52
32
|
status: "failure",
|
|
53
33
|
};
|
|
54
34
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
35
|
+
setIsPending(true);
|
|
36
|
+
const result = await onSubmit({
|
|
37
|
+
userId: user?.id || loggedInUser.id,
|
|
38
|
+
password: formData.get("password"),
|
|
39
|
+
confirmPassword: formData.get("confirmPassword"),
|
|
40
|
+
});
|
|
41
|
+
setIsPending(false);
|
|
42
|
+
if (result.status === "success") {
|
|
61
43
|
onSuccess?.();
|
|
62
|
-
return result;
|
|
63
|
-
}
|
|
64
|
-
catch (error) {
|
|
65
|
-
console.log(error);
|
|
66
44
|
}
|
|
67
|
-
|
|
45
|
+
setState(result);
|
|
46
|
+
}
|
|
68
47
|
return (react_1.default.createElement(dialog_1.Dialog, { open: open, onOpenChange: (state) => {
|
|
69
48
|
onOpenChange(state);
|
|
70
49
|
(0, utils_1.unstuckPointerEvents)();
|
|
71
50
|
} },
|
|
72
|
-
react_1.default.createElement(dialog_1.DialogContent,
|
|
51
|
+
react_1.default.createElement(dialog_1.DialogContent, { className: "ecpauth:p-0 ecpauth:overflow-hidden ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:shadow-2xl ecpauth:rounded-2xl ecpauth:max-w-md" }, !loggedInUser ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: (state) => {
|
|
73
52
|
onOpenChange(state);
|
|
74
53
|
(0, utils_1.unstuckPointerEvents)();
|
|
75
|
-
} })) : (react_1.default.createElement("form", {
|
|
76
|
-
react_1.default.createElement(
|
|
77
|
-
|
|
78
|
-
"
|
|
79
|
-
|
|
80
|
-
"
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
user
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
react_1.default.createElement(
|
|
91
|
-
react_1.default.createElement(message_1.Message, { message: state?.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
54
|
+
} })) : (react_1.default.createElement("form", { onSubmit: handleSubmit, className: "ecpauth:flex ecpauth:flex-col" },
|
|
55
|
+
react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:px-6 ecpauth:pt-8 ecpauth:pb-6" },
|
|
56
|
+
react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:z-10 ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center ecpauth:text-center" },
|
|
57
|
+
react_1.default.createElement("div", { className: "ecpauth:size-12 ecpauth:rounded-xl ecpauth:bg-blue-50 ecpauth:dark:bg-blue-900/20 ecpauth:text-blue-600 ecpauth:dark:text-blue-400 ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:mb-4 ecpauth:shadow-sm ecpauth:border ecpauth:border-blue-100 ecpauth:dark:border-blue-800/50" },
|
|
58
|
+
react_1.default.createElement(shield_1.ShieldIcon, { size: 24 })),
|
|
59
|
+
react_1.default.createElement(dialog_1.DialogHeader, { className: "ecpauth:space-y-1" },
|
|
60
|
+
react_1.default.createElement(dialog_1.DialogTitle, { className: "ecpauth:text-xl ecpauth:font-bold ecpauth:text-gray-900 ecpauth:dark:text-white ecpauth:text-center" }, !user || loggedInUser.id === user.id
|
|
61
|
+
? "Change Password"
|
|
62
|
+
: `Update ${user.firstName}'s Password`),
|
|
63
|
+
react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:text-gray-500 ecpauth:dark:text-gray-400 ecpauth:text-center" }, "Ensure your account stays secure with a strong password.")),
|
|
64
|
+
user && loggedInUser.id !== user?.id && (react_1.default.createElement("div", { className: "ecpauth:mt-3 ecpauth:px-3 ecpauth:py-1 ecpauth:bg-gray-100 ecpauth:dark:bg-gray-800 ecpauth:rounded-full ecpauth:text-xs ecpauth:font-medium ecpauth:text-gray-600 ecpauth:dark:text-gray-300" },
|
|
65
|
+
"Target: ",
|
|
66
|
+
user?.email)))),
|
|
67
|
+
react_1.default.createElement("div", { className: "ecpauth:px-6 ecpauth:pb-8" },
|
|
68
|
+
state?.status === "success" ? (react_1.default.createElement("div", { className: "ecpauth:mb-6" },
|
|
69
|
+
react_1.default.createElement(message_1.Message, { message: state?.message, variant: "success" }))) : state?.message ? (react_1.default.createElement("div", { className: "ecpauth:mb-6" },
|
|
70
|
+
react_1.default.createElement(message_1.Message, { message: state?.message }))) : null,
|
|
71
|
+
react_1.default.createElement("div", { className: "ecpauth:space-y-5" },
|
|
72
|
+
react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
|
|
73
|
+
react_1.default.createElement(label_1.Label, { htmlFor: "password", className: "ecpauth:text-sm ecpauth:font-semibold ecpauth:text-gray-700 ecpauth:dark:text-gray-300 ecpauth:ml-0.5" }, "New Password"),
|
|
74
|
+
react_1.default.createElement("div", { className: "ecpauth:relative" },
|
|
75
|
+
react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "ecpauth:h-11 ecpauth:rounded-xl ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:bg-gray-50/50 ecpauth:dark:bg-gray-900/50 ecpauth:focus:bg-white ecpauth:dark:focus:bg-gray-950 ecpauth:transition-all" })),
|
|
76
|
+
state?.status === "validation-error" &&
|
|
77
|
+
state?.errors?.password && (react_1.default.createElement("p", { className: "ecpauth:text-[11px] ecpauth:font-medium ecpauth:text-red-500 ecpauth:mt-1 ecpauth:ml-1" }, state.errors.password))),
|
|
78
|
+
react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
|
|
79
|
+
react_1.default.createElement(label_1.Label, { htmlFor: "confirmPassword", className: "ecpauth:text-sm ecpauth:font-semibold ecpauth:text-gray-700 ecpauth:dark:text-gray-300 ecpauth:ml-0.5" }, "Confirm New Password"),
|
|
80
|
+
react_1.default.createElement(input_1.Input, { id: "confirmPassword", type: "password", name: "confirmPassword", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "ecpauth:h-11 ecpauth:rounded-xl ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:bg-gray-50/50 ecpauth:dark:bg-gray-900/50 ecpauth:focus:bg-white ecpauth:dark:focus:bg-gray-950 ecpauth:transition-all" }),
|
|
81
|
+
state?.status === "validation-error" &&
|
|
82
|
+
state?.errors?.confirmPassword && (react_1.default.createElement("p", { className: "ecpauth:text-[11px] ecpauth:font-medium ecpauth:text-red-500 ecpauth:mt-1 ecpauth:ml-1" }, state.errors.confirmPassword)))),
|
|
83
|
+
react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center ecpauth:gap-3 ecpauth:mt-10" },
|
|
84
|
+
react_1.default.createElement(button_1.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), className: "ecpauth:flex-1 ecpauth:h-11 ecpauth:rounded-xl ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:text-gray-600 ecpauth:dark:text-gray-400 ecpauth:font-semibold ecpauth:hover:bg-gray-50 ecpauth:dark:hover:bg-white/5 ecpauth:transition-colors" }, "Cancel"),
|
|
85
|
+
react_1.default.createElement(button_1.Button, { disabled: isPending, type: "submit", className: "ecpauth:flex-1 ecpauth:h-11 ecpauth:bg-blue-600! ecpauth:hover:bg-blue-700! ecpauth:text-white! ecpauth:font-semibold ecpauth:text-base ecpauth:shadow-lg ecpauth:shadow-blue-600/20 ecpauth:rounded-lg ecpauth:transition-all ecpauth:active:scale-[0.98]" }, isPending ? "Updating..." : "Update Password"))))))));
|
|
103
86
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.AlertCircleIcon = AlertCircleIcon;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
function AlertCircleIcon({ size = 24, className, }) {
|
|
9
|
+
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg", className: className },
|
|
10
|
+
react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
|
|
11
|
+
react_1.default.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
|
|
12
|
+
react_1.default.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })));
|
|
13
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ChevronDownIcon = ChevronDownIcon;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
function ChevronDownIcon({ size = 20, className, }) {
|
|
9
|
+
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg", className: className },
|
|
10
|
+
react_1.default.createElement("path", { d: "m6 9 6 6 6-6" })));
|
|
11
|
+
}
|
|
@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.LockIcon = LockIcon;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
function LockIcon({ size = 24 }) {
|
|
9
|
-
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg" },
|
|
8
|
+
function LockIcon({ size = 24, className, }) {
|
|
9
|
+
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg", className: className },
|
|
10
10
|
react_1.default.createElement("path", { d: "M15 21h-8a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10c.265 0 .518 .052 .75 .145" }),
|
|
11
11
|
react_1.default.createElement("path", { d: "M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" }),
|
|
12
12
|
react_1.default.createElement("path", { d: "M8 11v-4a4 4 0 1 1 8 0v4" }),
|
|
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.LogoutIcon = LogoutIcon;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
function LogoutIcon({ size = 24 }) {
|
|
9
|
-
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 20 20", "aria-hidden": "true", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg" },
|
|
8
|
+
function LogoutIcon({ size = 24, className, }) {
|
|
9
|
+
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 20 20", "aria-hidden": "true", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg", className: className },
|
|
10
10
|
react_1.default.createElement("path", { fillRule: "evenodd", d: "M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z", clipRule: "evenodd" })));
|
|
11
11
|
}
|
|
@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.SettingIcon = SettingIcon;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
function SettingIcon({ size = 24 }) {
|
|
9
|
-
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg" },
|
|
8
|
+
function SettingIcon({ size = 24, className, }) {
|
|
9
|
+
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg", className: className },
|
|
10
10
|
react_1.default.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
|
|
11
11
|
react_1.default.createElement("path", { d: "M17.41 6.59 15 5.5l2.41-1.09L18.5 2l1.09 2.41L22 5.5l-2.41 1.09L18.5 9l-1.09-2.41zm3.87 6.13L20.5 11l-.78 1.72-1.72.78 1.72.78.78 1.72.78-1.72L23 13.5l-1.72-.78zm-5.04 1.65 1.94 1.47-2.5 4.33-2.24-.94c-.2.13-.42.26-.64.37l-.3 2.4h-5l-.3-2.41c-.22-.11-.43-.23-.64-.37l-2.24.94-2.5-4.33 1.94-1.47c-.01-.11-.01-.24-.01-.36s0-.25.01-.37l-1.94-1.47 2.5-4.33 2.24.94c.2-.13.42-.26.64-.37L7.5 6h5l.3 2.41c.22.11.43.23.64.37l2.24-.94 2.5 4.33-1.94 1.47c.01.12.01.24.01.37s0 .24-.01.36zM13 14c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3 3-1.34 3-3z" })));
|
|
12
12
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ShieldIcon = ShieldIcon;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
function ShieldIcon({ size = 20, className, }) {
|
|
9
|
+
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg", className: className },
|
|
10
|
+
react_1.default.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" })));
|
|
11
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.UserIcon = UserIcon;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
function UserIcon({ size = 20, className, }) {
|
|
9
|
+
return (react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", height: `${size}px`, width: `${size}px`, xmlns: "http://www.w3.org/2000/svg", className: className },
|
|
10
|
+
react_1.default.createElement("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
|
|
11
|
+
react_1.default.createElement("circle", { cx: "12", cy: "7", r: "4" })));
|
|
12
|
+
}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare function Login({ className, ...props }: React.ComponentPropsWithoutRef<"div">
|
|
2
|
+
export declare function Login({ className, logo, ...props }: React.ComponentPropsWithoutRef<"div"> & {
|
|
3
|
+
logo?: React.ReactNode;
|
|
4
|
+
}): React.JSX.Element;
|
|
@@ -44,9 +44,11 @@ const label_1 = require("../components/ui/label");
|
|
|
44
44
|
const auth_provider_1 = require("../contexts/auth-provider");
|
|
45
45
|
const loader_1 = require("./loader");
|
|
46
46
|
const message_1 = require("./message");
|
|
47
|
-
function Login({ className, ...props }) {
|
|
48
|
-
const { login, error, computedRouteContext
|
|
47
|
+
function Login({ className, logo, ...props }) {
|
|
48
|
+
const { login, error, computedRouteContext } = (0, auth_provider_1.useAuth)();
|
|
49
49
|
const [authToken, setAuthToken] = react_1.default.useState(null);
|
|
50
|
+
const [isPending, setIsPending] = react_1.default.useState(false);
|
|
51
|
+
const [isAuthenticated, setIsAuthenticated] = react_1.default.useState(false);
|
|
50
52
|
const { resetPasswordUrl, signupUrl, loginUrl } = computedRouteContext;
|
|
51
53
|
(0, react_1.useEffect)(() => {
|
|
52
54
|
const authToken = new URLSearchParams(window.location.search).get("authToken");
|
|
@@ -63,39 +65,48 @@ function Login({ className, ...props }) {
|
|
|
63
65
|
});
|
|
64
66
|
}
|
|
65
67
|
}, [authToken]);
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
async function handleSubmit(e) {
|
|
69
|
+
e.preventDefault();
|
|
70
|
+
const formData = new FormData(e.currentTarget);
|
|
71
|
+
setIsPending(true);
|
|
72
|
+
const res = await login({
|
|
68
73
|
email: formData.get("email"),
|
|
69
74
|
password: formData.get("password"),
|
|
70
75
|
});
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
react_1.default.createElement(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
react_1.default.createElement("
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
react_1.default.createElement(input_1.Input, { id: "
|
|
95
|
-
react_1.default.createElement(message_1.Message, { message: error?.errors?.
|
|
96
|
-
react_1.default.createElement(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
76
|
+
if (!res) {
|
|
77
|
+
setIsAuthenticated(true);
|
|
78
|
+
}
|
|
79
|
+
setIsPending(false);
|
|
80
|
+
// return { email: formData.get("email") as string };
|
|
81
|
+
}
|
|
82
|
+
return (react_1.default.createElement("div", { className: (0, utils_1.cn)("ecpauth:relative ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center ecpauth:w-full ecpauth:mx-auto ecpauth:px-4", className), ...props },
|
|
83
|
+
isAuthenticated && react_1.default.createElement(loader_1.Loader, null),
|
|
84
|
+
react_1.default.createElement(card_1.Card, { className: "ecpauth:relative ecpauth:w-full ecpauth:max-w-[450px] ecpauth:overflow-hidden ecpauth:shadow-none ecpauth:lg:shadow-xl ecpauth:border-none ecpauth:rounded-xl" },
|
|
85
|
+
authToken && !error && (react_1.default.createElement("div", { className: "ecpauth:absolute ecpauth:inset-0 ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center ecpauth:gap-2 ecpauth:text-black ecpauth:dark:text-white ecpauth:bg-white/90 ecpauth:dark:bg-gray-900/90 ecpauth:z-50 ecpauth:rounded-xl" },
|
|
86
|
+
react_1.default.createElement("p", { className: "ecpauth:font-medium" }, "Please wait..."),
|
|
87
|
+
react_1.default.createElement("a", { href: loginUrl, className: "ecpauth:underline ecpauth:underline-offset-4 ecpauth:text-blue-500! ecpauth:hover:text-blue-600!" }, "Or go back to login"))),
|
|
88
|
+
react_1.default.createElement(card_1.CardHeader, { className: "ecpauth:space-y-4 ecpauth:text-center ecpauth:pb-2 ecpauth:pt-10" },
|
|
89
|
+
logo && (react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:space-x-2 ecpauth:text-xl ecpauth:font-bold ecpauth:text-gray-900 ecpauth:dark:text-white" }, logo)),
|
|
90
|
+
react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
|
|
91
|
+
react_1.default.createElement(card_1.CardTitle, { className: "ecpauth:text-2xl ecpauth:font-black ecpauth:tracking-tight ecpauth:text-gray-900 ecpauth:dark:text-white" }, "Welcome Back"),
|
|
92
|
+
react_1.default.createElement(card_1.CardDescription, { className: "ecpauth:text-sm ecpauth:text-gray-500 ecpauth:dark:text-gray-400" }, "Enter your credentials to access the dashboard.")),
|
|
93
|
+
error?.message && (react_1.default.createElement("p", { className: "ecpauth:text-red-500 ecpauth:mt-3 ecpauth:text-sm ecpauth:font-medium" }, error.message))),
|
|
94
|
+
react_1.default.createElement(card_1.CardContent, { className: "ecpauth:space-y-6 ecpauth:p-8 ecpauth:px-12" },
|
|
95
|
+
react_1.default.createElement("form", { onSubmit: handleSubmit, className: "ecpauth:space-y-6" },
|
|
96
|
+
react_1.default.createElement("div", { className: "ecpauth:space-y-4" },
|
|
97
|
+
react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
|
|
98
|
+
react_1.default.createElement(label_1.Label, { htmlFor: "email", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "Email Address or Username"),
|
|
99
|
+
react_1.default.createElement(input_1.Input, { id: "email", type: "text", placeholder: "e.g. user@example.com", name: "email" }),
|
|
100
|
+
react_1.default.createElement(message_1.Message, { message: error?.errors?.email, className: "ecpauth:mt-1 ecpauth:text-[11px]" })),
|
|
101
|
+
react_1.default.createElement("div", { className: "ecpauth:space-y-2" },
|
|
102
|
+
react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center ecpauth:justify-between" },
|
|
103
|
+
react_1.default.createElement(label_1.Label, { htmlFor: "password", className: "ecpauth:text-sm ecpauth:font-medium ecpauth:text-gray-700 ecpauth:dark:text-gray-300" }, "Password")),
|
|
104
|
+
react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password", placeholder: "Enter your password" }),
|
|
105
|
+
react_1.default.createElement(message_1.Message, { message: error?.errors?.password, className: "ecpauth:mt-1 ecpauth:text-[11px]" }),
|
|
106
|
+
react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:justify-end" }, resetPasswordUrl && (react_1.default.createElement("a", { href: resetPasswordUrl, className: "ecpauth:text-xs ecpauth:font-semibold ecpauth:text-blue-600 ecpauth:hover:text-blue-700 ecpauth:hover:underline" }, "Forgot Password?"))))),
|
|
107
|
+
react_1.default.createElement(button_1.Button, { type: "submit", className: "ecpauth:w-full ecpauth:h-11 ecpauth:bg-blue-600! ecpauth:hover:bg-blue-700! ecpauth:text-white! ecpauth:font-semibold ecpauth:text-base ecpauth:shadow-lg ecpauth:shadow-blue-600/20 ecpauth:rounded-lg ecpauth:transition-all ecpauth:active:scale-[0.98]", disabled: isPending || isAuthenticated }, isPending ? "Logging In..." : "Log In")),
|
|
108
|
+
signupUrl && (react_1.default.createElement("div", { className: "ecpauth:text-center ecpauth:text-sm ecpauth:text-gray-500 ecpauth:border-t ecpauth:border-gray-100 ecpauth:dark:border-gray-800 ecpauth:pt-6" },
|
|
109
|
+
"Don't have an account?",
|
|
110
|
+
" ",
|
|
111
|
+
react_1.default.createElement("a", { href: signupUrl, className: "ecpauth:font-semibold ecpauth:text-gray-900 ecpauth:hover:underline ecpauth:dark:text-white" }, "Sign Up")))))));
|
|
101
112
|
}
|
|
@@ -10,6 +10,6 @@ function Message({ message, variant = "error", className = "ecpauth:-mt-2", }) {
|
|
|
10
10
|
if (!message)
|
|
11
11
|
return null;
|
|
12
12
|
return (react_1.default.createElement("div", { className: (0, utils_1.cn)("ecpauth:text-sm", variant === "success"
|
|
13
|
-
? "ecpauth:text-green-
|
|
14
|
-
: "ecpauth:text-red-
|
|
13
|
+
? "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-lg ecpauth:bg-green-50 ecpauth:dark:bg-green-900/10 ecpauth:border ecpauth:border-green-100 ecpauth:dark:border-green-800/30 ecpauth:text-green-700 ecpauth:dark:text-green-400"
|
|
14
|
+
: "ecpauth:font-medium ecpauth:text-sm ecpauth:p-3 ecpauth:rounded-lg ecpauth:bg-red-50 ecpauth:dark:bg-red-900/10 ecpauth:border ecpauth:border-red-100 ecpauth:dark:border-red-800/30 ecpauth:text-red-700 ecpauth:dark:text-red-400", className) }, message));
|
|
15
15
|
}
|
|
@@ -6,18 +6,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.MustLogin = MustLogin;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const button_1 = require("./ui/button");
|
|
9
|
-
const message_1 = require("./message");
|
|
10
9
|
const dialog_1 = require("./ui/dialog");
|
|
11
10
|
const utils_1 = require("../lib/utils");
|
|
11
|
+
const lock_1 = require("./icons/lock");
|
|
12
|
+
const auth_provider_1 = require("../contexts/auth-provider");
|
|
12
13
|
function MustLogin({ onOpenChange, }) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
react_1.default.createElement("div", { className: "ecpauth:
|
|
17
|
-
react_1.default.createElement(
|
|
18
|
-
|
|
14
|
+
const { computedRouteContext } = (0, auth_provider_1.useAuth)();
|
|
15
|
+
const { loginUrl } = computedRouteContext;
|
|
16
|
+
return (react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col" },
|
|
17
|
+
react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:px-6 ecpauth:pt-8 ecpauth:pb-6 ecpauth:text-center" },
|
|
18
|
+
react_1.default.createElement("div", { className: "ecpauth:relative ecpauth:z-10 ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center" },
|
|
19
|
+
react_1.default.createElement("div", { className: "ecpauth:size-12 ecpauth:rounded-xl ecpauth:bg-blue-50 ecpauth:dark:bg-blue-900/20 ecpauth:text-blue-600 ecpauth:dark:text-blue-400 ecpauth:border ecpauth:border-blue-100 ecpauth:dark:border-blue-800/50 ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:mb-4 ecpauth:shadow-sm" },
|
|
20
|
+
react_1.default.createElement(lock_1.LockIcon, { size: 24 })),
|
|
21
|
+
react_1.default.createElement(dialog_1.DialogHeader, { className: "ecpauth:space-y-1" },
|
|
22
|
+
react_1.default.createElement(dialog_1.DialogTitle, { className: "ecpauth:text-xl ecpauth:font-bold ecpauth:text-gray-900 ecpauth:dark:text-white ecpauth:text-center" }, "Session Required"),
|
|
23
|
+
react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:text-gray-500 ecpauth:dark:text-gray-400 ecpauth:text-center" }, "Please log in to continue")))),
|
|
24
|
+
react_1.default.createElement("div", { className: "ecpauth:px-8 ecpauth:pb-6" },
|
|
25
|
+
react_1.default.createElement("div", { className: "ecpauth:p-4 ecpauth:rounded-xl ecpauth:bg-gray-50 ecpauth:dark:bg-white/5 ecpauth:border ecpauth:border-gray-100 ecpauth:dark:border-white/10" },
|
|
26
|
+
react_1.default.createElement("p", { className: "ecpauth:text-sm ecpauth:leading-relaxed ecpauth:text-gray-600 ecpauth:dark:text-gray-300 ecpauth:text-center" }, "Your current session has expired or authentication is required for this action. Please sign in to your account."))),
|
|
27
|
+
react_1.default.createElement(dialog_1.DialogFooter, { className: "ecpauth:p-6 ecpauth:pt-0 ecpauth:flex ecpauth:flex-row ecpauth:justify-center ecpauth:gap-3" },
|
|
19
28
|
react_1.default.createElement(button_1.Button, { type: "button", variant: "outline", onClick: () => {
|
|
20
29
|
onOpenChange(false);
|
|
21
30
|
(0, utils_1.unstuckPointerEvents)();
|
|
22
|
-
} }, "Close")
|
|
31
|
+
}, className: "ecpauth:flex-1 ecpauth:h-11 ecpauth:rounded-xl ecpauth:font-semibold ecpauth:border-gray-200 ecpauth:dark:border-gray-800 ecpauth:hover:bg-gray-50 ecpauth:dark:hover:bg-white/5 ecpauth:transition-all" }, "Close"),
|
|
32
|
+
react_1.default.createElement(button_1.Button, { type: "button", onClick: () => {
|
|
33
|
+
window.location.href = loginUrl;
|
|
34
|
+
}, className: "ecpauth:flex-1 ecpauth:h-11 ecpauth:rounded-xl ecpauth:font-bold ecpauth:text-white! ecpauth:bg-blue-600! ecpauth:hover:bg-blue-700! ecpauth:shadow-lg ecpauth:shadow-blue-600/20 ecpauth:transition-all ecpauth:active:scale-[0.98]" }, "Login Now"))));
|
|
23
35
|
}
|
|
@@ -3,6 +3,7 @@ import { GeneralResponse, ResetPasswordWithToken } from "../types";
|
|
|
3
3
|
type Props = {
|
|
4
4
|
className?: string;
|
|
5
5
|
onChangePassword: (data: ResetPasswordWithToken) => Promise<GeneralResponse>;
|
|
6
|
+
logo?: React.ReactNode;
|
|
6
7
|
};
|
|
7
|
-
export declare function ResetPassword({ className, onChangePassword, ...props }: Props): React.JSX.Element;
|
|
8
|
+
export declare function ResetPassword({ className, onChangePassword, logo, ...props }: Props): React.JSX.Element;
|
|
8
9
|
export {};
|