npm - devextreme-cli - Versions diffs - 1.11.0-alpha.0 → 1.11.0-beta.0 - Mend

devextreme-cli 1.11.0-alpha.0 → 1.11.0-beta.0

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.

Files changed (72) hide show

package/src/templates/nextjs/application/src/app/auth/[type]/page.tsx ADDED Viewed

@@ -0,0 +1,49 @@
+'use client'
+import { use } from 'react';
+import { notFound } from 'next/navigation';
+import { SingleCard } from '@/layouts';
+import {
+  LoginForm,
+  CreateAccountForm,
+  ResetPasswordForm,
+  ChangePasswordForm,
+} from '@/components';
+const formText<%=#isTypeScript%>: Record<string, Record<string, string>><%=/isTypeScript%> = {
+  'login': {
+    title: 'Sign In'
+  },
+  'create-account': {
+    title: 'Sign Up'
+  },
+  'reset-password': {
+    title: 'Reset Password',
+    description: 'Please enter the email address that you used to register, and we will send you a link to reset your password via Email.'
+  },
+  'change-password': {
+    title: 'Change Password',
+  }
+}
+function AuthForm({name}<%=#isTypeScript%>: {name: string}<%=/isTypeScript%>) {
+  switch (name) {
+    case 'login': return <LoginForm />;
+    case 'create-account': return <CreateAccountForm />;
+    case 'reset-password': return <ResetPasswordForm />;
+    case 'change-password': return <ChangePasswordForm />;
+  }
+}
+export default function AuthPage({ params }<%=#isTypeScript%>: {params: Promise<{type: string}>}<%=/isTypeScript%>) {
+  const { type } = use(params)
+  if (!formText[type]) {
+    notFound();
+  }
+  const { title, description } = formText[type];
+  return <SingleCard title={title} description={description}>
+    <AuthForm name={type}/>
+  </SingleCard>
+}

package/src/templates/nextjs/application/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+<%=#isTypeScript%>import type { PropsWithChildren } from 'react';
+<%=/isTypeScript%>import { ThemeProvider } from "@/theme";
+export default function RootLayout({ children }<%=#isTypeScript%>: PropsWithChildren<object><%=/isTypeScript%>) {
+  return (
+    <html lang="en">
+    <title>NextJs Dx App</title>
+      <body className="dx-viewport">
+        <ThemeProvider>
+          <div className='app'>
+            {children}
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/src/templates/nextjs/application/src/app/lib/session.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import 'server-only';
+import { SignJWT, jwtVerify } from 'jose';
+import { cookies } from 'next/headers';
+<%=#isTypeScript%>import type { SessionPayload } from '@/types';
+<%=/isTypeScript%>
+const secretKey = process.env.SESSION_SECRET;
+const encoder = new TextEncoder();
+const encodedKey = encoder.encode(secretKey);
+export async function encrypt(payload<%=#isTypeScript%>: SessionPayload<%=/isTypeScript%>) {
+  return new SignJWT(payload)
+    .setProtectedHeader({ alg: 'HS256' })
+    .setIssuedAt()
+    .setExpirationTime('7d')
+    .sign(encodedKey);
+}
+export async function decrypt(session<%=#isTypeScript%>: string | undefined = ''<%=/isTypeScript%>) {
+  try {
+    const { payload } = await jwtVerify(session, encodedKey, {
+      algorithms: ['HS256'],
+    });
+    return payload;
+  } catch {
+    console.log('Failed to verify session');
+  }
+}
+export async function createSession(userId<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+  const session = await encrypt({ userId, expiresAt });
+  const cookieStore = await cookies();
+  cookieStore.set('session', session, {
+    httpOnly: true,
+    secure: true,
+    expires: expiresAt,
+    sameSite: 'lax',
+    path: '/',
+  });
+}
+export async function deleteSession() {
+  const cookieStore = await cookies();
+  cookieStore.delete('session');
+}

package/src/templates/nextjs/application/src/app/pages/layout.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+<%=#isTypeScript%>import type { PropsWithChildren } from 'react';
+<%=/isTypeScript%>import appInfo from '@/app-info';
+import { Footer } from '@/components';
+import { <%=layout%> as SideNavBarLayout } from '@/layouts';
+export default function Content({children}<%=#isTypeScript%>: PropsWithChildren<object><%=/isTypeScript%>) {
+  return (
+    <SideNavBarLayout title={appInfo.title}>
+      {children}
+      <Footer>
+        Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
+        <br />
+        All trademarks or registered trademarks are property of their
+        respective owners.
+      </Footer>
+    </SideNavBarLayout>
+  );
+}

package/src/templates/nextjs/application/src/app-info.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+const appInfo = {
+    title: '<%=project%>'
+};
+export default appInfo;

package/src/templates/nextjs/application/src/app-navigation.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+export const navigation = [<%=^empty%>
+  {
+    text: 'Home',
+    path: '/pages/home',
+    icon: 'home'
+  },
+  {
+    text: 'Examples',
+    icon: 'folder',
+    items: [
+      {
+        text: 'Profile',
+        path: '/pages/profile'
+      },
+      {
+        text: 'Tasks',
+        path: '/pages/tasks'
+      }
+    ]
+  }
+  <%=/empty%>];

package/src/templates/nextjs/application/src/components/change-password-form/ChangePasswordForm.tsx ADDED Viewed

@@ -0,0 +1,86 @@
+'use client'
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+} from 'devextreme-react/form';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import notify from 'devextreme/ui/notify';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import { changePassword } from '@/app/actions/auth';
+export default function ChangePasswordForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ password: '' });
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
+  e.preventDefault();
+  const { password } = formData.current;
+  setLoading(true);
+  const result = await changePassword(password);
+  setLoading(false);
+  if (result.isOk) {
+    router.push('/login');
+  } else {
+    notify(result.message, 'error', 2000);
+  }
+}, [router]);
+const confirmPassword = useCallback(
+  ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
+  []
+);
+return (
+  <form onSubmit={onSubmit}>
+    <Form formData={formData.current} disabled={loading}>
+      <Item
+        dataField={'password'}
+        editorType={'dxTextBox'}
+        editorOptions={passwordEditorOptions}
+      >
+        <RequiredRule message="Password is required" />
+        <Label visible={false} />
+      </Item>
+      <Item
+        dataField={'confirmedPassword'}
+        editorType={'dxTextBox'}
+        editorOptions={confirmedPasswordEditorOptions}
+      >
+        <RequiredRule message="Password is required" />
+        <CustomRule
+          message={'Passwords do not match'}
+          validationCallback={confirmPassword}
+        />
+        <Label visible={false} />
+      </Item>
+      <ButtonItem>
+        <ButtonOptions
+          width={'100%'}
+          type={'default'}
+          useSubmitBehavior={true}
+        >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Continue'
+              }
+            </span>
+        </ButtonOptions>
+      </ButtonItem>
+    </Form>
+  </form>
+);
+}
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

package/src/templates/nextjs/application/src/components/create-account-form/CreateAccountForm.scss ADDED Viewed

@@ -0,0 +1,19 @@
+.create-account-form {
+  .policy-info {
+    color: var(--base-text-color-alpha-7);
+    font-size: 12px;
+    font-style: normal;
+    a {
+      color: var(--base-text-color-alpha-7);
+    }
+  }
+  .login-link {
+    color: var(--base-accent);
+    font-size: 12px;
+    text-align: center;
+    padding: 6px 0 32px 0;
+    border-bottom: 1px solid var(--border-color);
+  }
+}

package/src/templates/nextjs/application/src/components/create-account-form/CreateAccountForm.tsx ADDED Viewed

@@ -0,0 +1,107 @@
+'use client'
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  CustomRule,
+  EmailRule
+} from 'devextreme-react/form';
+import notify from 'devextreme/ui/notify';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import { signUp } from '@/app/actions/auth';
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
+import './CreateAccountForm.scss';
+export default function CreateAccountForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ email: '', password: '' });
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
+    e.preventDefault();
+    const { email, password } = formData.current;
+    setLoading(true);
+    const result = await signUp(email, password);
+    setLoading(false);
+    if (result.isOk) {
+      router.push('/login');
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+  }, [router]);
+  const confirmPassword = useCallback(
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
+    []
+  );
+  return (
+    <form className={'create-account-form'} onSubmit={onSubmit}>
+      <Form formData={formData.current} disabled={loading}>
+        <Item
+          dataField={'email'}
+          editorType={'dxTextBox'}
+          editorOptions={emailEditorOptions}
+        >
+          <RequiredRule message="Email is required" />
+          <EmailRule message="Email is invalid" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'password'}
+          editorType={'dxTextBox'}
+          editorOptions={passwordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'confirmedPassword'}
+          editorType={'dxTextBox'}
+          editorOptions={confirmedPasswordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <CustomRule
+            message={'Passwords do not match'}
+            validationCallback={confirmPassword}
+          />
+          <Label visible={false} />
+        </Item>
+        <Item>
+          <div className='policy-info'>
+            By creating an account, you agree to the <Link href="#">Terms of Service</Link> and <Link href="#">Privacy Policy</Link>
+          </div>
+        </Item>
+        <ButtonItem>
+          <ButtonOptions
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Create a new account'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+      </Form>
+      <div className={'login-link'}>
+        Have an account? <Link href={'/login'}>Sign In</Link>
+      </div>
+    </form>
+  );
+}
+const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

package/src/templates/nextjs/application/src/components/footer/Footer.scss ADDED Viewed

@@ -0,0 +1,12 @@
+.footer {
+  display: block;
+  color: var(--base-text-color-alpha-7);
+  border-top: 1px solid var(--footer-border-color);
+  padding-top: 20px;
+  padding-bottom: 24px;
+  margin: 0 40px;
+  @media (max-width: 599.99px) {
+    margin: 0 20px;
+  }
+}

package/src/templates/nextjs/application/src/components/footer/Footer.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import './Footer.scss';
+export default function Footer({ ...rest }) {
+  return <footer className={'footer'} {...rest} />;
+}

package/src/templates/nextjs/application/src/components/header/Header.scss ADDED Viewed

@@ -0,0 +1,40 @@
+@use "../../dx-styles.scss" as *;
+header {
+  background-color: var(--base-bg);
+}
+.header-component {
+  flex: 0 0 auto;
+  z-index: 1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+.dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {
+  padding: 0 40px;
+  @media (max-width: 599.99px) {
+    padding: 0 20px;
+  }
+}
+.dx-toolbar .dx-toolbar-item.dx-toolbar-button.menu-button {
+  width: $side-panel-min-width;
+  text-align: center;
+  padding: 0;
+}
+.header-title .dx-item-content {
+  padding: 0;
+  margin: 0;
+}
+.dx-theme-generic {
+  .header-toolbar {
+    padding: 10px 0;
+  }
+  .user-button>.dx-button-content {
+    padding: 3px;
+  }
+}

package/src/templates/nextjs/application/src/components/header/Header.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import Toolbar, { Item } from 'devextreme-react/toolbar';
+import Button from 'devextreme-react/button';
+import UserPanel from '@/components/user-panel/UserPanel';
+import './Header.scss';
+import { ThemeSwitcher } from '@/components/theme-switcher/ThemeSwitcher';
+<%=#isTypeScript%>import type { HeaderProps } from '@/types';<%=/isTypeScript%>
+const renderMenuItem = () => <UserPanel menuMode='list' />;
+export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
+  return (
+    <header className={'header-component'}>
+      <Toolbar className={'header-toolbar'}>
+        <Item
+          visible={menuToggleEnabled}
+          location={'before'}
+          widget={'dxButton'}
+          cssClass={'menu-button'}
+        >
+          <Button icon="menu" stylingMode="text" onClick={toggleMenu} />
+        </Item>
+        <Item
+          location={'before'}
+          cssClass={'header-title'}
+          text={title}
+          visible={!!title}
+        />
+        <Item
+          location={'after'}
+        >
+          <ThemeSwitcher />
+        </Item>
+        <Item location='after' locateInMenu='auto' menuItemRender={renderMenuItem}>
+          <UserPanel menuMode='context' />
+        </Item>
+      </Toolbar>
+    </header>
+)}

package/src/templates/nextjs/application/src/components/index.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+export { default as Header } from './header/Header';
+export { default as Footer } from './footer/Footer';
+export { default as LoginForm } from './login-form/LoginForm';
+export { default as ResetPasswordForm } from './reset-password-form/ResetPasswordForm';
+export { default as ChangePasswordForm } from './change-password-form/ChangePasswordForm';
+export { default as CreateAccountForm } from './create-account-form/CreateAccountForm';
+export { default as SideNavigationMenu } from './side-navigation-menu/SideNavigationMenu';

package/src/templates/nextjs/application/src/components/login-form/LoginForm.scss ADDED Viewed

@@ -0,0 +1,12 @@
+.login-form {
+  .link {
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    margin: 6px 0 50px;
+  }
+  .form-text {
+    color: var(--base-text-color-alpha-7);
+  }
+}

package/src/templates/nextjs/application/src/components/login-form/LoginForm.tsx ADDED Viewed

@@ -0,0 +1,101 @@
+'use client'
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import Form, {
+  Item,
+  Label,
+  ButtonItem,
+  ButtonOptions,
+  RequiredRule,
+  EmailRule
+} from 'devextreme-react/form';
+import LoadIndicator from 'devextreme-react/load-indicator';
+import Button from 'devextreme-react/button';
+import notify from 'devextreme/ui/notify';
+import { signIn } from '@/app/actions/auth';
+import './LoginForm.scss';
+export default function LoginForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const formData = useRef({ email: '', password: '' });
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
+    e.preventDefault();
+    const { email, password } = formData.current;
+    setLoading(true);
+    const result = await signIn(email, password);
+    if (!result.isOk) {
+      setLoading(false);
+      notify(result.message, 'error', 2000);
+    } else {
+      router.push('/');
+    }
+  }, [router]);
+  const onCreateAccountClick = useCallback(() => {
+    router.push('/auth/create-account');
+  }, [router]);
+  return (
+    <form className={'login-form'} onSubmit={onSubmit}>
+      <Form formData={formData.current} disabled={loading}>
+        <Item
+          dataField={'email'}
+          editorType={'dxTextBox'}
+          editorOptions={emailEditorOptions}
+        >
+          <RequiredRule message="Email is required" />
+          <EmailRule message="Email is invalid" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'password'}
+          editorType={'dxTextBox'}
+          editorOptions={passwordEditorOptions}
+        >
+          <RequiredRule message="Password is required" />
+          <Label visible={false} />
+        </Item>
+        <Item
+          dataField={'rememberMe'}
+          editorType={'dxCheckBox'}
+          editorOptions={rememberMeEditorOptions}
+        >
+          <Label visible={false} />
+        </Item>
+        <ButtonItem>
+          <ButtonOptions
+            width={'100%'}
+            type={'default'}
+            useSubmitBehavior={true}
+          >
+            <span className="dx-button-text">
+              {
+                loading
+                  ? <LoadIndicator width={'24px'} height={'24px'} visible={true} />
+                  : 'Sign In'
+              }
+            </span>
+          </ButtonOptions>
+        </ButtonItem>
+      </Form>
+      <div className={'link'}>
+        <Link href={'/auth/reset-password'}>Forgot password?</Link>
+      </div>
+      <Button
+        text={'Create an account'}
+        stylingMode={ 'outlined' }
+        width={'100%'}
+        onClick={onCreateAccountClick}
+      />
+    </form>
+  );
+}
+const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
+const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
+const rememberMeEditorOptions = { text: 'Remember me', elementAttr: { class: 'form-text' } };

package/src/templates/nextjs/application/src/components/reset-password-form/ResetPasswordForm.scss ADDED Viewed

@@ -0,0 +1,12 @@
+.reset-password-form {
+  .submit-button {
+    margin-top: 18px;
+  }
+  .login-link {
+    color: var(--base-accent);
+    font-size: 12px;
+    text-align: center;
+    margin-top: 6px;
+  }
+}