@nixxie-cms/auth 1.0.1

package/pages/SigninPage/dist/nixxie-cms-auth-pages-SigninPage.cjs.js

@@ -0,0 +1,319 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var NextHead = require('next/head');
+var react = require('react');
+var notice = require('@keystar/ui/notice');
+var passwordField = require('@keystar/ui/password-field');
+var slots = require('@keystar/ui/slots');
+var style = require('@keystar/ui/style');
+var textField = require('@keystar/ui/text-field');
+var typography = require('@keystar/ui/typography');
+var apollo = require('@nixxie-cms/core/admin-ui/apollo');
+var components = require('@nixxie-cms/core/admin-ui/components');
+var router = require('@nixxie-cms/core/admin-ui/router');
+var useFromRedirect = require('../../../dist/useFromRedirect-2de239a9.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var NextHead__default = /*#__PURE__*/_interopDefault(NextHead);
+
+var SigninPage = props => () => /*#__PURE__*/jsxRuntime.jsx(SigninPage$1, {
+  ...props
+});
+function SigninPage$1({
+  identityField,
+  secretField,
+  authGqlNames
+}) {
+  var _data$authenticate, _data$authenticate2;
+  const router$1 = router.useRouter();
+  const redirect = useFromRedirect.useRedirect();
+  const [state, setState] = react.useState({
+    identity: '',
+    secret: ''
+  });
+  const {
+    authenticateItemWithPassword,
+    ItemAuthenticationWithPasswordSuccess: successTypename,
+    ItemAuthenticationWithPasswordFailure: failureTypename
+  } = authGqlNames;
+  const [tryAuthenticate, {
+    error,
+    loading,
+    data
+  }] = apollo.useMutation(apollo.gql`
+    mutation NxAuthSignin ($identity: String!, $secret: String!) {
+      authenticate: ${authenticateItemWithPassword}(${identityField}: $identity, ${secretField}: $secret) {
+        ... on ${successTypename} {
+          item {
+            id
+          }
+        }
+        ... on ${failureTypename} {
+          message
+        }
+      }
+    }`, {
+    refetchQueries: ['NxFetchAdminMeta']
+  });
+  const onSubmit = async event => {
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    try {
+      const {
+        data
+      } = await tryAuthenticate({
+        variables: {
+          identity: state.identity,
+          secret: state.secret
+        }
+      });
+      if (data !== null && data !== void 0 && data.authenticate.item) {
+        router$1.push(redirect);
+      }
+    } catch (e) {
+      console.error(e);
+      return;
+    }
+  };
+  const pending = loading || (data === null || data === void 0 || (_data$authenticate = data.authenticate) === null || _data$authenticate === void 0 ? void 0 : _data$authenticate.__typename) === successTypename;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(NextHead__default["default"], {
+      children: /*#__PURE__*/jsxRuntime.jsx("title", {
+        children: "Nixxie \u2014 Sign in"
+      }, "title")
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: style.css({
+        display: 'flex',
+        minHeight: '100vh',
+        fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      }),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: style.css({
+          width: 420,
+          backgroundColor: '#000000',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          padding: '48px',
+          flexShrink: 0,
+          '@media (max-width: 900px)': {
+            display: 'none'
+          }
+        }),
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: style.css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10
+          }),
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: style.css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 30,
+              height: 30,
+              borderRadius: 7,
+              border: '1.5px solid rgba(255,255,255,0.18)',
+              flexShrink: 0
+            }),
+            children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "none",
+              children: /*#__PURE__*/jsxRuntime.jsx("path", {
+                d: "M2.5 11V3L11.5 11V3",
+                stroke: "white",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: style.css({
+              fontSize: 15,
+              fontWeight: 600,
+              color: '#ffffff',
+              letterSpacing: '-0.03em',
+              lineHeight: 1
+            }),
+            children: "Nixxie"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsxs("p", {
+            className: style.css({
+              margin: '0 0 16px',
+              fontSize: 34,
+              fontWeight: 700,
+              color: '#ffffff',
+              letterSpacing: '-0.04em',
+              lineHeight: 1.15
+            }),
+            children: ["Content.", /*#__PURE__*/jsxRuntime.jsx("br", {}), "Managed", /*#__PURE__*/jsxRuntime.jsx("br", {}), "Beautifully."]
+          }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+            className: style.css({
+              margin: 0,
+              fontSize: 13.5,
+              color: 'rgba(255,255,255,0.38)',
+              lineHeight: 1.65
+            }),
+            children: ["A professional CMS built for modern", /*#__PURE__*/jsxRuntime.jsx("br", {}), "teams who care about craft."]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: style.css({
+            margin: 0,
+            fontSize: 10.5,
+            color: 'rgba(255,255,255,0.18)',
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase'
+          }),
+          children: "Nixxie CMS"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style.css({
+          flex: 1,
+          backgroundColor: '#ffffff',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '48px 64px',
+          '@media (max-width: 600px)': {
+            padding: '32px 24px'
+          }
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: style.css({
+            width: '100%',
+            maxWidth: 360
+          }),
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: style.css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 36,
+              height: 36,
+              borderRadius: 8,
+              backgroundColor: '#000000',
+              marginBottom: 32
+            }),
+            children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 14 14",
+              fill: "none",
+              children: /*#__PURE__*/jsxRuntime.jsx("path", {
+                d: "M2.5 11V3L11.5 11V3",
+                stroke: "white",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("h1", {
+            className: style.css({
+              margin: '0 0 6px',
+              fontSize: 23,
+              fontWeight: 700,
+              color: '#0a0a0a',
+              letterSpacing: '-0.03em',
+              lineHeight: 1.2
+            }),
+            children: "Sign in"
+          }), /*#__PURE__*/jsxRuntime.jsx("p", {
+            className: style.css({
+              margin: '0 0 28px',
+              fontSize: 13.5,
+              color: '#8a8a8a',
+              lineHeight: 1.5
+            }),
+            children: "Welcome back. Enter your credentials to continue."
+          }), /*#__PURE__*/jsxRuntime.jsx(components.GraphQLErrorNotice, {
+            errors: [error]
+          }), (data === null || data === void 0 || (_data$authenticate2 = data.authenticate) === null || _data$authenticate2 === void 0 ? void 0 : _data$authenticate2.__typename) === failureTypename && /*#__PURE__*/jsxRuntime.jsx(notice.Notice, {
+            tone: "critical",
+            children: /*#__PURE__*/jsxRuntime.jsx(slots.Content, {
+              children: /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+                children: data === null || data === void 0 ? void 0 : data.authenticate.message
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs("form", {
+            onSubmit: onSubmit,
+            className: style.css({
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 16
+            }),
+            children: [/*#__PURE__*/jsxRuntime.jsx(textField.TextField, {
+              autoFocus: true,
+              id: "identity",
+              isRequired: true,
+              label: capitalizeFirstLetter(identityField),
+              name: "identity",
+              onChange: v => setState({
+                ...state,
+                identity: v
+              }),
+              value: state.identity
+            }), /*#__PURE__*/jsxRuntime.jsx(passwordField.PasswordField, {
+              id: "password",
+              isRequired: true,
+              label: capitalizeFirstLetter(secretField)
+              // @ts-expect-error — valid prop, types need to be fixed in "@keystar/ui"
+              ,
+              name: "password",
+              onChange: v => setState({
+                ...state,
+                secret: v
+              }),
+              type: "password",
+              value: state.secret
+            }), /*#__PURE__*/jsxRuntime.jsx("button", {
+              type: "submit",
+              disabled: pending,
+              className: style.css({
+                marginTop: 4,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingInline: 20,
+                paddingBlock: 11,
+                backgroundColor: '#000000',
+                color: '#ffffff',
+                borderRadius: 7,
+                fontSize: 14,
+                fontWeight: 600,
+                letterSpacing: '-0.01em',
+                cursor: pending ? 'default' : 'pointer',
+                opacity: pending ? 0.6 : 1,
+                transition: 'opacity 150ms, background-color 150ms',
+                width: '100%',
+                border: 'none',
+                fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+                '&:hover:not(:disabled)': {
+                  backgroundColor: '#1a1a1a'
+                },
+                '&:focus-visible': {
+                  outline: '2px solid #000',
+                  outlineOffset: 3,
+                  borderRadius: 7
+                }
+              }),
+              children: pending ? 'Signing in…' : 'Sign in'
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+}
+function capitalizeFirstLetter(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+exports["default"] = SigninPage;

package/pages/SigninPage/dist/nixxie-cms-auth-pages-SigninPage.esm.js

@@ -0,0 +1,311 @@
+import NextHead from 'next/head';
+import { useState } from 'react';
+import { Notice } from '@keystar/ui/notice';
+import { PasswordField } from '@keystar/ui/password-field';
+import { Content } from '@keystar/ui/slots';
+import { css } from '@keystar/ui/style';
+import { TextField } from '@keystar/ui/text-field';
+import { Text } from '@keystar/ui/typography';
+import { useMutation, gql } from '@nixxie-cms/core/admin-ui/apollo';
+import { GraphQLErrorNotice } from '@nixxie-cms/core/admin-ui/components';
+import { useRouter } from '@nixxie-cms/core/admin-ui/router';
+import { u as useRedirect } from '../../../dist/useFromRedirect-b3deee00.esm.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SigninPage = props => () => /*#__PURE__*/jsx(SigninPage$1, {
+  ...props
+});
+function SigninPage$1({
+  identityField,
+  secretField,
+  authGqlNames
+}) {
+  var _data$authenticate, _data$authenticate2;
+  const router = useRouter();
+  const redirect = useRedirect();
+  const [state, setState] = useState({
+    identity: '',
+    secret: ''
+  });
+  const {
+    authenticateItemWithPassword,
+    ItemAuthenticationWithPasswordSuccess: successTypename,
+    ItemAuthenticationWithPasswordFailure: failureTypename
+  } = authGqlNames;
+  const [tryAuthenticate, {
+    error,
+    loading,
+    data
+  }] = useMutation(gql`
+    mutation NxAuthSignin ($identity: String!, $secret: String!) {
+      authenticate: ${authenticateItemWithPassword}(${identityField}: $identity, ${secretField}: $secret) {
+        ... on ${successTypename} {
+          item {
+            id
+          }
+        }
+        ... on ${failureTypename} {
+          message
+        }
+      }
+    }`, {
+    refetchQueries: ['NxFetchAdminMeta']
+  });
+  const onSubmit = async event => {
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    try {
+      const {
+        data
+      } = await tryAuthenticate({
+        variables: {
+          identity: state.identity,
+          secret: state.secret
+        }
+      });
+      if (data !== null && data !== void 0 && data.authenticate.item) {
+        router.push(redirect);
+      }
+    } catch (e) {
+      console.error(e);
+      return;
+    }
+  };
+  const pending = loading || (data === null || data === void 0 || (_data$authenticate = data.authenticate) === null || _data$authenticate === void 0 ? void 0 : _data$authenticate.__typename) === successTypename;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(NextHead, {
+      children: /*#__PURE__*/jsx("title", {
+        children: "Nixxie \u2014 Sign in"
+      }, "title")
+    }), /*#__PURE__*/jsxs("div", {
+      className: css({
+        display: 'flex',
+        minHeight: '100vh',
+        fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      }),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: css({
+          width: 420,
+          backgroundColor: '#000000',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          padding: '48px',
+          flexShrink: 0,
+          '@media (max-width: 900px)': {
+            display: 'none'
+          }
+        }),
+        children: [/*#__PURE__*/jsxs("div", {
+          className: css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10
+          }),
+          children: [/*#__PURE__*/jsx("span", {
+            className: css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 30,
+              height: 30,
+              borderRadius: 7,
+              border: '1.5px solid rgba(255,255,255,0.18)',
+              flexShrink: 0
+            }),
+            children: /*#__PURE__*/jsx("svg", {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 14 14",
+              fill: "none",
+              children: /*#__PURE__*/jsx("path", {
+                d: "M2.5 11V3L11.5 11V3",
+                stroke: "white",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              })
+            })
+          }), /*#__PURE__*/jsx("span", {
+            className: css({
+              fontSize: 15,
+              fontWeight: 600,
+              color: '#ffffff',
+              letterSpacing: '-0.03em',
+              lineHeight: 1
+            }),
+            children: "Nixxie"
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsxs("p", {
+            className: css({
+              margin: '0 0 16px',
+              fontSize: 34,
+              fontWeight: 700,
+              color: '#ffffff',
+              letterSpacing: '-0.04em',
+              lineHeight: 1.15
+            }),
+            children: ["Content.", /*#__PURE__*/jsx("br", {}), "Managed", /*#__PURE__*/jsx("br", {}), "Beautifully."]
+          }), /*#__PURE__*/jsxs("p", {
+            className: css({
+              margin: 0,
+              fontSize: 13.5,
+              color: 'rgba(255,255,255,0.38)',
+              lineHeight: 1.65
+            }),
+            children: ["A professional CMS built for modern", /*#__PURE__*/jsx("br", {}), "teams who care about craft."]
+          })]
+        }), /*#__PURE__*/jsx("p", {
+          className: css({
+            margin: 0,
+            fontSize: 10.5,
+            color: 'rgba(255,255,255,0.18)',
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase'
+          }),
+          children: "Nixxie CMS"
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: css({
+          flex: 1,
+          backgroundColor: '#ffffff',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '48px 64px',
+          '@media (max-width: 600px)': {
+            padding: '32px 24px'
+          }
+        }),
+        children: /*#__PURE__*/jsxs("div", {
+          className: css({
+            width: '100%',
+            maxWidth: 360
+          }),
+          children: [/*#__PURE__*/jsx("div", {
+            className: css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 36,
+              height: 36,
+              borderRadius: 8,
+              backgroundColor: '#000000',
+              marginBottom: 32
+            }),
+            children: /*#__PURE__*/jsx("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 14 14",
+              fill: "none",
+              children: /*#__PURE__*/jsx("path", {
+                d: "M2.5 11V3L11.5 11V3",
+                stroke: "white",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              })
+            })
+          }), /*#__PURE__*/jsx("h1", {
+            className: css({
+              margin: '0 0 6px',
+              fontSize: 23,
+              fontWeight: 700,
+              color: '#0a0a0a',
+              letterSpacing: '-0.03em',
+              lineHeight: 1.2
+            }),
+            children: "Sign in"
+          }), /*#__PURE__*/jsx("p", {
+            className: css({
+              margin: '0 0 28px',
+              fontSize: 13.5,
+              color: '#8a8a8a',
+              lineHeight: 1.5
+            }),
+            children: "Welcome back. Enter your credentials to continue."
+          }), /*#__PURE__*/jsx(GraphQLErrorNotice, {
+            errors: [error]
+          }), (data === null || data === void 0 || (_data$authenticate2 = data.authenticate) === null || _data$authenticate2 === void 0 ? void 0 : _data$authenticate2.__typename) === failureTypename && /*#__PURE__*/jsx(Notice, {
+            tone: "critical",
+            children: /*#__PURE__*/jsx(Content, {
+              children: /*#__PURE__*/jsx(Text, {
+                children: data === null || data === void 0 ? void 0 : data.authenticate.message
+              })
+            })
+          }), /*#__PURE__*/jsxs("form", {
+            onSubmit: onSubmit,
+            className: css({
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 16
+            }),
+            children: [/*#__PURE__*/jsx(TextField, {
+              autoFocus: true,
+              id: "identity",
+              isRequired: true,
+              label: capitalizeFirstLetter(identityField),
+              name: "identity",
+              onChange: v => setState({
+                ...state,
+                identity: v
+              }),
+              value: state.identity
+            }), /*#__PURE__*/jsx(PasswordField, {
+              id: "password",
+              isRequired: true,
+              label: capitalizeFirstLetter(secretField)
+              // @ts-expect-error — valid prop, types need to be fixed in "@keystar/ui"
+              ,
+              name: "password",
+              onChange: v => setState({
+                ...state,
+                secret: v
+              }),
+              type: "password",
+              value: state.secret
+            }), /*#__PURE__*/jsx("button", {
+              type: "submit",
+              disabled: pending,
+              className: css({
+                marginTop: 4,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingInline: 20,
+                paddingBlock: 11,
+                backgroundColor: '#000000',
+                color: '#ffffff',
+                borderRadius: 7,
+                fontSize: 14,
+                fontWeight: 600,
+                letterSpacing: '-0.01em',
+                cursor: pending ? 'default' : 'pointer',
+                opacity: pending ? 0.6 : 1,
+                transition: 'opacity 150ms, background-color 150ms',
+                width: '100%',
+                border: 'none',
+                fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+                '&:hover:not(:disabled)': {
+                  backgroundColor: '#1a1a1a'
+                },
+                '&:focus-visible': {
+                  outline: '2px solid #000',
+                  outlineOffset: 3,
+                  borderRadius: 7
+                }
+              }),
+              children: pending ? 'Signing in…' : 'Sign in'
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+}
+function capitalizeFirstLetter(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+export { SigninPage as default };

package/pages/SigninPage/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/nixxie-cms-auth-pages-SigninPage.cjs.js",
+  "module": "dist/nixxie-cms-auth-pages-SigninPage.esm.js"
+}