@wener/console
Version:
Base console UI toolkit
225 lines (224 loc) • 11 kB
JavaScript
import React, { Fragment } from "react";
import { useForm } from "react-hook-form";
import { BiLogoChrome } from "react-icons/bi";
import { CiLock, CiUser } from "react-icons/ci";
import { GrSystem } from "react-icons/gr";
import { HiMiniLanguage } from "react-icons/hi2";
import { MdDarkMode, MdLightMode } from "react-icons/md";
import { PiBuildingsThin } from "react-icons/pi";
import { useMounted } from "@wener/reaction";
import { clsx } from "clsx";
import { WechatBrandIcon, WecomBrandIcon } from "../../../icons/index.js";
import { ReactHookForm } from "../../../react-hook-form/index.js";
import { cn } from "../../../tw/index.js";
import { getUserAgentPreferences } from "../../../utils/UserAgentPreference.js";
export const LoginPage = ({ onSubmit = () => undefined, showoff, hero = showoff, children, defaultValues, showOrg, title, subtitle = "\u767B\u5F55\u7CFB\u7EDF", socials, footer: { policy, terms, beian } = {}, logo = /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-10 w-10"
}), className, onForgetPassword, onRegister, ...props }) => {
const methods = useForm({
defaultValues
});
const { register, handleSubmit, formState: { isValid, isSubmitting } } = methods;
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
className: cn("flex min-h-full flex-1", className),
...props
}, /*#__PURE__*/ React.createElement("div", {
className: "relative flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
}, /*#__PURE__*/ React.createElement("div", {
className: "mx-auto w-full max-w-sm lg:w-96"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "flex items-center gap-2"
}, logo, " ", /*#__PURE__*/ React.createElement("span", {
className: "text-xl font-medium"
}, title)), /*#__PURE__*/ React.createElement("h2", {
className: "mt-8 text-2xl font-bold leading-9 tracking-tight opacity-80"
}, subtitle), onRegister && /*#__PURE__*/ React.createElement("p", {
className: "mt-2 text-sm leading-6 opacity-60"
}, "\u5C1A\u672A\u52A0\u5165?", " ", /*#__PURE__*/ React.createElement("button", {
type: "button",
onClick: onRegister,
className: "font-semibold text-indigo-600 hover:text-indigo-500"
}, "\u73B0\u5728\u6CE8\u518C"))), /*#__PURE__*/ React.createElement("div", {
className: "mt-10"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("form", {
onSubmit: handleSubmit(onSubmit, ReactHookForm.handleInvalid),
method: "POST",
className: "space-y-6"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-2"
}, showOrg && /*#__PURE__*/ React.createElement("div", {
className: "join w-full"
}, /*#__PURE__*/ React.createElement("span", {
className: "btn-bordered btn join-item"
}, /*#__PURE__*/ React.createElement(PiBuildingsThin, {
className: "h-6 w-6"
})), /*#__PURE__*/ React.createElement("input", {
className: "input join-item input-bordered flex-1",
placeholder: "\u4F01\u4E1A",
value: title || undefined,
readOnly: Boolean(title),
required: true,
...register("org", {
required: true
})
})), /*#__PURE__*/ React.createElement("div", {
className: "join w-full"
}, /*#__PURE__*/ React.createElement("span", {
className: "btn-bordered btn join-item"
}, /*#__PURE__*/ React.createElement(CiUser, {
className: "h-6 w-6"
})), /*#__PURE__*/ React.createElement("input", {
autoComplete: "username",
className: "input join-item input-bordered flex-1",
placeholder: "\u7528\u6237",
required: true,
...register("username", {
required: true
})
})), /*#__PURE__*/ React.createElement("div", {
className: "join w-full"
}, /*#__PURE__*/ React.createElement("span", {
className: "btn-bordered btn join-item"
}, /*#__PURE__*/ React.createElement(CiLock, {
className: "h-6 w-6"
})), /*#__PURE__*/ React.createElement("input", {
type: "password",
autoComplete: "current-password",
className: "input join-item input-bordered flex-1",
placeholder: "\u5BC6\u7801",
required: true,
...register("password", {
required: true
})
}))), /*#__PURE__*/ React.createElement("div", {
className: "flex items-center justify-between"
}, /*#__PURE__*/ React.createElement("label", {
className: "flex items-center"
}, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "h-4 w-4 rounded",
...register("remember")
}), /*#__PURE__*/ React.createElement("div", {
className: "ml-3 block select-none text-sm leading-6 opacity-75"
}, "\u8BB0\u4F4F\u767B\u5F55")), onRegister && /*#__PURE__*/ React.createElement("div", {
className: "text-sm leading-6"
}, /*#__PURE__*/ React.createElement("button", {
type: "button",
onClick: onRegister,
className: "font-semibold text-indigo-600 hover:text-indigo-500"
}, "\u5FD8\u4E86\u5BC6\u7801\uFF1F"))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("button", {
type: "submit",
className: "flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
disabled: !isValid || isSubmitting
}, isSubmitting && /*#__PURE__*/ React.createElement("span", {
className: "loading loading-spinner loading-xs"
}), "\u767B\u5F55")))), socials && /*#__PURE__*/ React.createElement(SocialLogin, null), children)), /*#__PURE__*/ React.createElement("footer", {
className: "absolute bottom-0 flex items-center justify-between pb-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "text-center text-sm leading-6 opacity-80"
}, joinNode([
/*#__PURE__*/ React.createElement("span", null, "\u00A9 ", new Date().getFullYear()),
renderLink({
text: "\u9690\u79C1\u653F\u7B56",
...policy
}),
renderLink({
text: "\u670D\u52A1\u6761\u5BBD",
...policy
}),
// http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001
renderLink({
url: "https://beian.miit.gov.cn/",
...beian
})
], /*#__PURE__*/ React.createElement("span", {
className: "mx-1"
}, "\u2022"))), /*#__PURE__*/ React.createElement("span", {
className: "mr-2"
}), /*#__PURE__*/ React.createElement(UserAgentSummary, null))), /*#__PURE__*/ React.createElement("div", {
className: "relative hidden w-0 flex-1 lg:block"
}, hero)));
};
function renderLink({ text, url }) {
if (!text || !url) {
return;
}
return /*#__PURE__*/ React.createElement("a", {
href: url,
target: "_blank",
className: "hover:underline"
}, text);
}
const SocialLogin = () => {
return /*#__PURE__*/ React.createElement("div", {
className: "mt-10"
}, /*#__PURE__*/ React.createElement("div", {
className: "relative"
}, /*#__PURE__*/ React.createElement("div", {
className: "absolute inset-0 flex items-center",
"aria-hidden": "true"
}, /*#__PURE__*/ React.createElement("div", {
className: "w-full border-t border-gray-200"
})), /*#__PURE__*/ React.createElement("div", {
className: "relative flex justify-center text-sm font-medium leading-6"
}, /*#__PURE__*/ React.createElement("span", {
className: "bg-white px-6 opacity-80"
}, "\u793E\u4EA4\u65B9\u5F0F\u767B\u5F55"))), /*#__PURE__*/ React.createElement("div", {
className: "mt-6 grid grid-cols-2 gap-4"
}, /*#__PURE__*/ React.createElement("a", {
href: "#",
className: clsx("btn-bordered btn btn-sm rounded-md")
}, /*#__PURE__*/ React.createElement(WechatBrandIcon, {
className: "h-4 w-4"
}), /*#__PURE__*/ React.createElement("span", {
className: "text-sm font-semibold leading-6"
}, "Wechat")), /*#__PURE__*/ React.createElement("a", {
href: "#",
className: clsx("btn-bordered btn btn-sm rounded-md")
}, /*#__PURE__*/ React.createElement(WecomBrandIcon, {
className: "h-4 w-4"
}), /*#__PURE__*/ React.createElement("span", {
className: "text-sm font-semibold leading-6"
}, "\u4F01\u4E1A\u5FAE\u4FE1"))));
};
function joinNode(nodes, join) {
return nodes.filter(Boolean).map((n, i) => {
let last = i <= nodes.length - 1;
return /*#__PURE__*/ React.createElement(Fragment, {
key: i
}, n, last || join);
});
}
const UserAgentSummary = () => {
let mounted = useMounted();
if (!mounted) {
return null;
}
return /*#__PURE__*/ React.createElement("small", {
className: "flex items-center gap-1 text-xs opacity-75"
}, /*#__PURE__*/ React.createElement(Browser, null), /*#__PURE__*/ React.createElement(Lang, null), /*#__PURE__*/ React.createElement(UserAgentPrefers, null));
};
const UserAgentPrefers = () => {
const { colorTheme, devicePixelRatio } = getUserAgentPreferences();
return /*#__PURE__*/ React.createElement(React.Fragment, null, colorTheme === "dark" && /*#__PURE__*/ React.createElement(MdDarkMode, null), colorTheme === "light" && /*#__PURE__*/ React.createElement(MdLightMode, null), devicePixelRatio > 1 && /*#__PURE__*/ React.createElement("small", null, devicePixelRatio, "dppx"));
};
const Lang = () => {
return /*#__PURE__*/ React.createElement("span", {
className: "inline-flex items-center"
}, /*#__PURE__*/ React.createElement(HiMiniLanguage, null), navigator.language);
};
const Browser = () => {
const { brand, version } = navigator.userAgent.match(/(?<brand>Chrom(e|ium))\/(?<version>[0-9]+)\./)?.groups ?? {};
if (!brand) {
return /*#__PURE__*/ React.createElement("small", {
className: "text-xs text-error opacity-75"
}, "\u8BF7\u4F7F\u7528\u65B0\u7248\u672C\u7684 Chrome \u6D4F\u89C8\u5668");
}
let old = parseInt(version) < 100;
return /*#__PURE__*/ React.createElement("div", {
className: "inline-flex items-center"
}, /*#__PURE__*/ React.createElement(BiLogoChrome, null), brand, " ", version, old && /*#__PURE__*/ React.createElement("small", {
className: "text-xs text-warning opacity-75"
}, "\u5F53\u524D\u6D4F\u89C8\u5668\u7248\u672C ", version, " \u8FC7\u4F4E\uFF0C\u8BF7\u4E0B\u8F7D\u4F7F\u7528\u65B0\u7248\u672C\u6D4F\u89C8\u5668\u3002"));
};
//# sourceMappingURL=LoginPage.js.map