@skroz/frontend 0.0.6 → 0.0.8

package/dist/utils/FrontendContext.js

@@ -1,30 +1,11 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FrontendProvider = exports.useFrontendConfig = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var defaultConfig = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const defaultConfig = {
     loginPath: '/login',
     registerPath: '/register',
     forgotPasswordPath: '/forgot',
     defaultPath: '/',
 };
-var FrontendContext = (0, react_1.createContext)(defaultConfig);
-var useFrontendConfig = function () { return (0, react_1.useContext)(FrontendContext); };
-exports.useFrontendConfig = useFrontendConfig;
-var FrontendProvider = function (_a) {
-    var config = _a.config, children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(FrontendContext.Provider, __assign({ value: __assign(__assign({}, defaultConfig), config) }, { children: children })));
-};
-exports.FrontendProvider = FrontendProvider;
+const FrontendContext = createContext(defaultConfig);
+export const useFrontendConfig = () => useContext(FrontendContext);
+export const FrontendProvider = ({ config, children }) => (_jsx(FrontendContext.Provider, { value: { ...defaultConfig, ...config }, children: children }));

package/dist/utils/getError.js

@@ -1,21 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var DEFAULT_CODE = 'no_code';
-var DEFAULT_MESSAGE = 'Error';
-var isObject = function (value) {
-    return typeof value === 'object' && !Array.isArray(value) && value !== null;
-};
-var isData = function (value) {
-    return isObject(value) &&
-        Object.values(value).every(function (constraint) {
-            return isObject(constraint) &&
-                'code' in constraint &&
-                typeof constraint.code === 'string' &&
-                'message' in constraint &&
-                typeof constraint.message === 'string';
-        });
-};
-var getError = function (error) {
+const DEFAULT_CODE = 'no_code';
+const DEFAULT_MESSAGE = 'Error';
+const isObject = (value) => typeof value === 'object' && !Array.isArray(value) && value !== null;
+const isData = (value) => isObject(value) &&
+    Object.values(value).every((constraint) => isObject(constraint) &&
+        'code' in constraint &&
+        typeof constraint.code === 'string' &&
+        'message' in constraint &&
+        typeof constraint.message === 'string');
+const getError = (error) => {
     // Trying to find the message of an error
     if (!isObject(error) ||
         !('message' in error) ||
@@ -36,7 +28,7 @@ var getError = function (error) {
             message: error.message,
         };
     }
-    var firstError = error.source.errors[0];
+    const firstError = error.source.errors[0];
     // Trying to find the message of the GraphQL error
     if (!isObject(firstError) ||
         !('message' in firstError) ||
@@ -70,4 +62,4 @@ var getError = function (error) {
         data: firstError.extensions.data,
     };
 };
-exports.default = getError;
+export default getError;

package/dist/utils/handleFormErrors.js

@@ -1,17 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatArgumentValidationError = void 0;
-var getError_1 = __importDefault(require("./getError"));
-var isObject_1 = __importDefault(require("./isObject"));
+import getError from './getError';
+import isObject from './isObject';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-var handleFormErrors = function (form, error) {
-    var _a = (0, getError_1.default)(error), message = _a.message, data = _a.data;
+const handleFormErrors = (form, error) => {
+    const { message, data } = getError(error);
     if (data) {
-        Object.entries(data).forEach(function (_a) {
-            var key = _a[0], constraint = _a[1];
+        Object.entries(data).forEach(([key, constraint]) => {
             form.errors.set(key, constraint.message);
         });
     }
@@ -22,41 +15,39 @@ var handleFormErrors = function (form, error) {
 /**
  * Formats the argument validation error to the field/message map.
  */
-var formatArgumentValidationError = function (error, messages) {
-    if (messages === void 0) { messages = {}; }
+export const formatArgumentValidationError = (error, messages = {}) => {
     // Check if validationErrors is exists
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var e = error;
-    if (!(0, isObject_1.default)(e.source) ||
+    const e = error;
+    if (!isObject(e.source) ||
         !Array.isArray(e.source.errors) ||
         e.source.errors.length === 0 ||
-        !(0, isObject_1.default)(e.source.errors[0]) ||
+        !isObject(e.source.errors[0]) ||
         e.source.errors[0].message !== 'Argument Validation Error' ||
-        !(0, isObject_1.default)(e.source.errors[0].extensions) ||
-        !(0, isObject_1.default)(e.source.errors[0].extensions.exception) ||
+        !isObject(e.source.errors[0].extensions) ||
+        !isObject(e.source.errors[0].extensions.exception) ||
         !Array.isArray(e.source.errors[0].extensions.exception.validationErrors))
         return {};
-    var validationErrors = e.source.errors[0].extensions.exception.validationErrors;
-    var errors = {};
-    validationErrors.forEach(function (validationError) {
+    const { validationErrors } = e.source.errors[0].extensions.exception;
+    const errors = {};
+    validationErrors.forEach((validationError) => {
         // Check if validationError has property and constraints
-        if (!(0, isObject_1.default)(validationError) ||
+        if (!isObject(validationError) ||
             typeof validationError.property !== 'string' ||
-            !(0, isObject_1.default)(validationError.constraints))
+            !isObject(validationError.constraints))
             return;
         // Check if constraints has key/value
-        var constraints = Object.entries(validationError.constraints);
+        const constraints = Object.entries(validationError.constraints);
         if (constraints.length === 0)
             return;
-        var _a = constraints[0], key = _a[0], message = _a[1];
+        const [key, message] = constraints[0];
         if (typeof message !== 'string')
             return;
-        var customMessage = messages[validationError.property]
+        const customMessage = messages[validationError.property]
             ? messages[validationError.property][key]
             : undefined;
         errors[validationError.property] = customMessage || message;
     });
     return errors;
 };
-exports.formatArgumentValidationError = formatArgumentValidationError;
-exports.default = handleFormErrors;
+export default handleFormErrors;

package/dist/utils/index.js

@@ -1,28 +1,5 @@
-"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);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isObject = exports.handleFormErrors = exports.getError = void 0;
-var getError_1 = require("./getError");
-Object.defineProperty(exports, "getError", { enumerable: true, get: function () { return __importDefault(getError_1).default; } });
-var handleFormErrors_1 = require("./handleFormErrors");
-Object.defineProperty(exports, "handleFormErrors", { enumerable: true, get: function () { return __importDefault(handleFormErrors_1).default; } });
-var isObject_1 = require("./isObject");
-Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return __importDefault(isObject_1).default; } });
-__exportStar(require("./limitExpiresAt"), exports);
-__exportStar(require("./FrontendContext"), exports);
+export { default as getError } from './getError';
+export { default as handleFormErrors } from './handleFormErrors';
+export { default as isObject } from './isObject';
+export * from './limitExpiresAt';
+export * from './FrontendContext';

package/dist/utils/isObject.js

@@ -1,6 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var isObject = function (value) {
-    return typeof value === 'object' && value !== null;
-};
-exports.default = isObject;
+const isObject = (value) => typeof value === 'object' && value !== null;
+export default isObject;

package/dist/utils/limitExpiresAt.js

@@ -1,19 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLimitExpiresIn = exports.getLimitExpiresAt = exports.setLimitExpiresAt = void 0;
-var LIMIT_EXPIRES_AT_KEY = 'lea';
-var setLimitExpiresAt = function (value) {
+const LIMIT_EXPIRES_AT_KEY = 'lea';
+export const setLimitExpiresAt = (value) => {
     if (typeof window === 'undefined')
         return;
-    window.sessionStorage.setItem(LIMIT_EXPIRES_AT_KEY, value.toString());
+    console.log('--- setLimitExpiresAt call:', { value });
+    if (value === undefined || value === null)
+        return;
+    window.sessionStorage.setItem(LIMIT_EXPIRES_AT_KEY, String(value));
 };
-exports.setLimitExpiresAt = setLimitExpiresAt;
-var getLimitExpiresAt = function () {
+export const getLimitExpiresAt = () => {
     if (typeof window === 'undefined')
         return 0;
-    var value = window.sessionStorage.getItem(LIMIT_EXPIRES_AT_KEY);
+    const value = window.sessionStorage.getItem(LIMIT_EXPIRES_AT_KEY);
     return Number(value) || 0;
 };
-exports.getLimitExpiresAt = getLimitExpiresAt;
-var getLimitExpiresIn = function () { return (0, exports.getLimitExpiresAt)() - Date.now(); };
-exports.getLimitExpiresIn = getLimitExpiresIn;
+export const getLimitExpiresIn = () => getLimitExpiresAt() - Date.now();

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@skroz/frontend",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "license": "MIT",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "clean": "rimraf dist",
+    "clean": "rm -rf dist",
     "build": "yarn clean && tsc",
+    "relay": "node scripts/regenerate-relay.js",
+    "gen-schema": "npx get-graphql-schema http://localhost:4000/graphql > schema.graphql",
     "lint": "eslint --fix ."
   },
   "peerDependencies": {
@@ -39,10 +41,10 @@
     "react-dom": "18.3.1",
     "react-relay": "17.0.0",
     "rimraf": "4.4.1",
-    "typescript": "4.9.5"
+    "typescript": "latest"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "64646f9451ea3748bf27f71a3112536a33f08493"
+  "gitHead": "e7ce7163def41ef1fee71f0d0a1bec12661e100a"
 }

package/src/auth/Auth.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next';
 import Login from './Login';
 import Register from './Register';
 import Forgot from './Forgot';
-import { RegisterInput } from "../graphql/RegisterMutation.graphql";
+import { AuthInput } from "../graphql/RegisterMutation.graphql";
 
 interface AuthProps {
     authType: 'login' | 'register' | 'forgot';
@@ -22,7 +22,7 @@ const Auth: React.FC<AuthProps> = ({ authType, setAuthType, onFinish }) => {
     let initialEmail = router.query.email;
     if (typeof initialEmail !== 'string') initialEmail = '';
 
-    const { form } = useForm<RegisterInput>({
+    const { form } = useForm<AuthInput>({
         email: initialEmail || '',
         password: '',
         isPrivacyPolicyAgree: false,

package/src/auth/AuthButtons.tsx

@@ -0,0 +1,127 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { ButtonType } from 'antd/es/button/buttonHelpers';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+import Link from 'next/link';
+import AuthModal from './AuthModal';
+import { useFrontendConfig } from '../utils/FrontendContext';
+
+interface AuthButtonsProps {
+    modal: boolean;
+    showLogin: boolean;
+    loginTitle?: React.ReactNode;
+    loginIcon?: React.ReactNode;
+    loginClassName?: string;
+    registerTitle?: React.ReactNode;
+    loginButtonType: ButtonType;
+    registerButtonType?: ButtonType;
+    showRegister: boolean;
+    fantastic?: boolean;
+    registerClassName?: string;
+    registerBlock?: boolean;
+    buttonSize?: SizeType;
+    className?: string;
+    reversed?: boolean;
+}
+
+const AuthButtons: React.FC<AuthButtonsProps> = ({
+    modal,
+    loginButtonType,
+    registerButtonType = 'primary',
+    showLogin,
+    loginIcon,
+    loginClassName,
+    showRegister,
+    fantastic,
+    loginTitle,
+    registerTitle,
+    registerClassName = '',
+    buttonSize = 'middle',
+    registerBlock,
+    className = '',
+    reversed = false,
+}) => {
+    const { t } = useTranslation('common');
+    const config = useFrontendConfig();
+    const [visible, setVisible] = useState(false);
+    const [authType, setAuthType] = useState<'login' | 'register' | 'forgot'>(
+        'login'
+    );
+
+    const loginButton = (
+        <div className={`auth-buttons-item ${loginClassName || ''}`}>
+            <Button
+                type={loginButtonType}
+                shape={loginTitle !== false ? 'round' : 'circle'}
+                size={buttonSize}
+                icon={loginIcon}
+                onClick={
+                    modal
+                        ? () => {
+                            setVisible(true);
+                            setAuthType('login');
+                        }
+                        : undefined
+                }
+            >
+                {loginTitle !== false ? loginTitle || t('buttons.login') : ''}
+            </Button>
+        </div>
+    );
+
+    const loginButtonContainer = modal ? (
+        loginButton
+    ) : (
+        <Link href={config.loginPath || '/login'} passHref legacyBehavior>
+            {loginButton}
+        </Link>
+    );
+
+    const registerButton = (
+        <div className="auth-buttons-item">
+            <Button
+                shape="round"
+                className={registerClassName}
+                size={buttonSize}
+                type={registerButtonType}
+                block={registerBlock}
+                onClick={
+                    modal
+                        ? () => {
+                            setVisible(true);
+                            setAuthType('register');
+                        }
+                        : undefined
+                }
+            >
+                {registerTitle || t('buttons.register')}
+            </Button>
+        </div>
+    );
+
+    const registerButtonContainer = modal ? (
+        registerButton
+    ) : (
+        <Link href={config.registerPath || '/register'} passHref legacyBehavior>
+            {registerButton}
+        </Link>
+    );
+
+    return (
+        <div className={`auth-buttons ${fantastic ? 'fantastic' : ''} ${reversed ? 'is-reversed' : ''} ${className}`}>
+            {showLogin && loginButtonContainer}
+            {showRegister && registerButtonContainer}
+            {modal && (
+                <AuthModal
+                    authType={authType}
+                    visible={visible}
+                    onClose={() => setVisible(false)}
+                    setAuthType={setAuthType}
+                />
+            )}
+        </div>
+    );
+};
+
+export default AuthButtons;

package/src/auth/AuthModal.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Modal } from 'antd';
+import Auth from './Auth';
+
+interface AuthModalProps {
+    visible: boolean;
+    authType: 'login' | 'register' | 'forgot';
+    setAuthType: (type: 'login' | 'register' | 'forgot') => void;
+    onClose: () => void;
+}
+
+const AuthModal: React.FC<AuthModalProps> = ({
+    visible,
+    authType,
+    onClose,
+    setAuthType,
+}) => (
+    <Modal
+        open={visible}
+        onCancel={onClose}
+        footer={false}
+        style={{ top: 10 }}
+    >
+        <Auth authType={authType} setAuthType={setAuthType} onFinish={onClose} />
+    </Modal>
+);
+
+export default AuthModal;

package/src/auth/Forgot.tsx

@@ -5,13 +5,13 @@ import { UserOutlined } from '@ant-design/icons';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import { useExistingForm } from '@os-design/form';
-import { graphql, useMutation } from 'react-relay';
+import { useMutation } from 'react-relay';
 import { setLimitExpiresAt } from '../utils/limitExpiresAt';
 import handleFormErrors from '../utils/handleFormErrors';
 import H from '../ui/H';
 import { useFrontendConfig } from '../utils/FrontendContext';
-import { RegisterInput } from '../graphql/RegisterMutation.graphql';
-import {
+import { AuthInput } from '../graphql/RegisterMutation.graphql';
+import ForgotMutationNode, {
   ForgotMutation,
 } from '../graphql/ForgotMutation.graphql';
 import FormItem from '../ui/FormItem';
@@ -22,21 +22,30 @@ interface ForgotProps {
 }
 
 const Forgot: React.FC<ForgotProps> = ({ onFinish, onLoginClick }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
   const router = useRouter();
   const config = useFrontendConfig();
 
-  const { form, useValue, Field } = useExistingForm<RegisterInput>();
+  const { form, useValue, Field } = useExistingForm<AuthInput>();
   const email = useValue('email');
 
-  const [commit, loading] = useMutation<ForgotMutation>(graphql`
-    mutation ForgotMutation($input: SendTokenInput!) {
-      sendToken(input: $input) {
-        codeIsSent
-        limitExpiresAt
-      }
-    }
-  `);
+  /*
+    SKROZ_PROTECTION NOTE:
+    The Relay compiler has generated artifacts for this mutation.
+    Explicit import of ForgotMutationNode is used.
+    
+    Mutation definition (for reference/regeneration):
+  graphql`
+          mutation ForgotMutation($input: SendTokenInput!) {
+            sendToken(input: $input) {
+              codeIsSent
+              limitExpiresAt
+            }
+          }
+        `
+*/
+
+  const [commit, loading] = useMutation<ForgotMutation>(ForgotMutationNode);
 
   const forgotPasswordHandler = useCallback(() => {
     commit({
@@ -47,9 +56,9 @@ const Forgot: React.FC<ForgotProps> = ({ onFinish, onLoginClick }) => {
       },
       onError: (error) => handleFormErrors(form, error),
       onCompleted: (res: any) => {
-        setLimitExpiresAt(res.sendToken.limitExpiresAt || 0);
+        setLimitExpiresAt(res.sendToken.limitExpiresAt);
         if (!res.sendToken.codeIsSent)
-          message.error(t('common:auth.forgotSendError'));
+          message.error(t('auth.forgotSendError'));
         router.push(`/recovery?email=${email}`);
         onFinish();
       },
@@ -58,17 +67,17 @@ const Forgot: React.FC<ForgotProps> = ({ onFinish, onLoginClick }) => {
 
   const loginButton = (
     <Button type='link' onClick={onLoginClick} shape='round'>
-      {t('common:buttons.login')}
+      {t('buttons.login')}
     </Button>
   );
 
   return (
     <div className='auth no-text-selection'>
       <H type='h1' textAlign='center'>
-        {t('common:auth.forgotTitle')}
+        {t('auth.forgotTitle')}
       </H>
       <div className='auth-subtitle'>
-        {t('common:auth.forgotSubtitle')}{' '}
+        {t('auth.forgotSubtitle')}{' '}
         {onLoginClick ? (
           loginButton
         ) : (
@@ -111,14 +120,12 @@ const Forgot: React.FC<ForgotProps> = ({ onFinish, onLoginClick }) => {
           loading={loading}
           onClick={forgotPasswordHandler}
         >
-          {t('common:auth.forgotSendInstructions')}
+          {t('auth.forgotSendInstructions')}
         </Button>
       </div>
 
       <div className='auth-footer'>
-        <div className='auth-footer-issues'>
-          {t('common:auth.forgotIssues')}
-        </div>
+        <div className='auth-footer-issues'>{t('auth.forgotIssues')}</div>
       </div>
     </div>
   );

package/src/auth/Login.tsx

@@ -6,9 +6,9 @@ import Link from 'next/link';
 import { useMutation } from 'react-relay';
 import { useExistingForm } from '@os-design/form';
 import LoginMutationNode, {
-  RegisterInput,
   LoginMutation,
   LoginMutation$data,
+  AuthInput,
 } from '../graphql/LoginMutation.graphql';
 import handleFormErrors from '../utils/handleFormErrors';
 import AuthFooterLinks from './AuthFooterLinks';
@@ -16,6 +16,21 @@ import H from '../ui/H';
 import { useFrontendConfig } from '../utils/FrontendContext';
 import LoginForm from './LoginForm';
 
+/*
+  SKROZ_PROTECTION NOTE:
+  The Relay compiler has generated artifacts for this mutation.
+  Explicit import of LoginMutationNode is used.
+  
+  Mutation definition (for reference/regeneration):
+  graphql`
+        mutation LoginMutation($input: AuthInput!) {
+          login(input: $input) {
+            ok
+          }
+        }
+      `
+*/
+
 interface LoginProps {
   onFinish: () => void;
   isModal: boolean;
@@ -23,9 +38,9 @@ interface LoginProps {
 }
 
 const Login: React.FC<LoginProps> = ({ onFinish, onForgotClick, isModal }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
   const router = useRouter();
-  const { form } = useExistingForm<RegisterInput>();
+  const { form } = useExistingForm<AuthInput>();
   const config = useFrontendConfig();
 
   const [commit, loading] = useMutation<LoginMutation>(LoginMutationNode);
@@ -42,11 +57,11 @@ const Login: React.FC<LoginProps> = ({ onFinish, onForgotClick, isModal }) => {
       },
       onCompleted: (res: LoginMutation$data) => {
         if (!res.login.ok) {
-          message.error(t('common:auth.loginError'));
+          message.error(t('auth.loginError'));
           return;
         }
         onFinish();
-        message.success(t('common:auth.loginSuccess'));
+        message.success(t('auth.loginSuccess'));
         router.reload();
       },
     });
@@ -54,23 +69,23 @@ const Login: React.FC<LoginProps> = ({ onFinish, onForgotClick, isModal }) => {
 
   const forgotButton = (
     <Button type='link' onClick={onForgotClick}>
-      {t('common:auth.forgot')}
+      {t('auth.forgot')}
     </Button>
   );
   const registerButton = (
     <Button type='link' shape='round' className='register-link'>
-      {t('common:buttons.register')}
+      {t('buttons.register')}
     </Button>
   );
 
   return (
     <div className='auth no-text-selection'>
       <H type='h1' textAlign='center'>
-        {t('common:auth.loginTitle')}
+        {t('auth.loginTitle')}
       </H>
       {!isModal && (
         <div className='auth-subtitle'>
-          {t('common:auth.loginSubtitle')}{' '}
+          {t('auth.loginSubtitle')}{' '}
           <Link href={config.registerPath || '/register'} passHref>
             {registerButton}
           </Link>
@@ -85,7 +100,7 @@ const Login: React.FC<LoginProps> = ({ onFinish, onForgotClick, isModal }) => {
           loading={loading}
           onClick={loginHandler}
         >
-          {t('common:buttons.login')}
+          {t('buttons.login')}
         </Button>
       </div>
       <div className='auth-footer'>