form-craft-package 1.7.7 → 1.7.9-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.7.7",
+  "version": "1.7.9-dev.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/companies/2-unauthenticated/forgot-password.tsx

@@ -1,44 +1,75 @@
-import { Row, Col, Form, Button, Space, Input } from 'antd'
+import { Button, Col, Form, Input, Row, Spin } from 'antd'
 import { useNavigate } from 'react-router-dom'
 import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
+import { useConfigContext } from '../context'
 
 export const ForgotPassword = () => {
+  const { config } = useConfigContext()
   const navigate = useNavigate()
   const { handleForgotPassword } = useLoginHandler()
+
+  const formPadding = config?.loginLayout?.form?.padding
+  const titleColor = config?.loginLayout.form.color
+  const background = config?.loginLayout?.background
+  const logoUrl = config?.siteIdentity?.logoUrl
+  const primaryColor = config?.siteLayout?.siteConfigs?.colors?.primary
+
   return (
-    <Row gutter={[60, 0]} justify="center" className="w-full">
-      <Col xs={24} md={24} lg={10} xl={12} xxl={10} className="flex self-center">
-        <Space size={15} direction="vertical" className="bg-white shadow py-10 px-8 w-full rounded">
-          <div className="text-36 text-primary text-center">Forgot Password?</div>
-          <div className="text-info text-18 text-center mx-auto" style={{ maxWidth: 300 }}>
-            Please enter your account username to reset your password!
+    <Spin spinning={false}>
+      <div className="h-screen w-full flex items-center justify-center overflow-hidden" style={{ background }}>
+        <div
+          className="overflow-auto text-center shadow"
+          style={{
+            padding: formPadding,
+            background: '#fff',
+            width: 400,
+            maxWidth: '100%',
+          }}
+        >
+          {logoUrl && (
+            <div className="flex justify-center mb-4">
+              <img src={logoUrl} alt="Logo" className="h-10 object-contain" />
+            </div>
+          )}
+
+          <div className="font-bold mb-2" style={{ color: titleColor }}>
+            Forgot Password?
           </div>
-          <Form
-            name="forgot_password"
-            id="forgot_password"
-            initialValues={{ remember: false }}
-            layout="vertical"
-            onFinish={({ email }) => handleForgotPassword(email)}
-          >
+
+          <div className="text-sm text-center mb-4 mx-auto">
+            Please enter your account email to reset your password!
+          </div>
+
+          <Form layout="vertical" onFinish={({ email }) => handleForgotPassword(email)}>
             <Row gutter={[0, 10]}>
-              <Form.Item
-                label={'Email'}
-                name={'email'}
-                rules={[{ required: true, message: `Please enter your email` }]}
-              >
-                <Input />
-              </Form.Item>
+              <Col span={24}>
+                <Form.Item label="Email" name="email" rules={[{ required: true, message: 'Please enter your email' }]}>
+                  <Input />
+                </Form.Item>
+              </Col>
             </Row>
+
+            <div className="flex justify-center mt-5">
+              <Button
+                htmlType="submit"
+                className="w-full"
+                style={{
+                  color: '#fff',
+                  backgroundColor: primaryColor,
+                }}
+              >
+                Submit Request
+              </Button>
+            </div>
           </Form>
-          <Button className="btn-success w-full" htmlType="submit" form="forgot_password">
-            Submit Request
-          </Button>
-          <Button className="btn-primary2 w-full" onClick={() => navigate('/login')}>
-            Back to Login
-          </Button>
-        </Space>
-      </Col>
-      <Col xxl={1}></Col>
-    </Row>
+
+          <div className="flex justify-center mt-4">
+            <Button type="link" onClick={() => navigate('/login')}>
+              Back to Login
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Spin>
   )
 }

package/src/components/companies/2-unauthenticated/index.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom'
 
 export function UnauthenticatedLayout() {
   const { config } = useConfigContext()
+  console.log(config?.siteLanguages)
   const navigate = useNavigate()
   const loginLayout = config?.loginLayout
   const siteIdentity = config?.siteIdentity

package/src/components/form/layout-renderer/1-row/header-render.tsx

@@ -17,7 +17,7 @@ export const LayoutRowConditionalHeaderRenderer = ({
       <Collapse
         className="fc-collapsible-row bg-transparent"
         bordered={false}
-        defaultActiveKey={['1']}
+        defaultActiveKey={[]}
         items={[
           {
             key: '1',

package/src/types/companies/site-layout/authenticated/index.tsx

@@ -77,7 +77,7 @@ export const layoutTemplates = [
           <div key={form.id} className="">
             <Link
               to={href}
-              target={form.customLink || form.newTab ? '_blank' : '_self'}
+              target={form.newTab ? '_blank' : '_self'}
               onClick={isParentMenu ? () => toggleMenu(form.id) : undefined}
               style={{
                 width: `${navigationWidth - 25}px`,
@@ -127,15 +127,16 @@ export const layoutTemplates = [
       const menu = (
         <Menu className="text-primary">
           {menuItems?.map(({ name, icon: Icon, onClick }) => (
-            <Menu.Item key={name}>
-              <Button type="link" onClick={onClick} className="flex items-center gap-2 px-3 py-1 leading-6 text-md">
+            <Menu.Item key={name} onClick={onClick}>
+              <div className="flex items-center gap-2 px-3 py-1 text-md">
                 <Icon />
                 {name}
-              </Button>
+              </div>
             </Menu.Item>
           ))}
         </Menu>
       )
+
       return (
         <Layout className="h-screen overflow-y-auto fc-layout">
           <Header className="sticky top-0 z-40 flex items-center shadow-sm justify-between px-1 overflow-hidden fc-header">
@@ -190,7 +191,7 @@ export const layoutTemplates = [
                 <Button type="link" className="">
                   <span className="ml-4 text-primary text-md font-semibold">
                     <div className="hidden">{userName}</div>
-                    <span className="italic text-warning font-normal">User info coming soon...</span>
+                    <span className="italic text-warning font-normal">Admin</span>
                   </span>
                   <FaCaretDown className="text-primary ml-1" />
                 </Button>
@@ -281,7 +282,7 @@ export const layoutTemplates = [
           <div key={form.id} className="relative group">
             <Link
               to={href}
-              target={form.customLink || form.newTab ? '_blank' : '_self'}
+              target={form.newTab ? '_blank' : '_self'}
               onClick={isParentMenu ? (e) => e.preventDefault() : undefined}
               style={{
                 borderRadius: `${siteConfigs?.Link.borderRadius}px`,
@@ -330,15 +331,16 @@ export const layoutTemplates = [
       const menu = (
         <Menu className="text-primary">
           {menuItems?.map(({ name, icon: Icon, onClick }) => (
-            <Menu.Item key={name}>
-              <Button type="link" onClick={onClick} className="flex items-center gap-2 px-3 py-1 leading-6 text-md">
+            <Menu.Item key={name} onClick={onClick}>
+              <div className="flex items-center gap-2 px-3 py-1 text-md">
                 <Icon />
                 {name}
-              </Button>
+              </div>
             </Menu.Item>
           ))}
         </Menu>
       )
+
       return (
         <Layout className="fc-layout">
           <Header className="fc-header sticky top-0 z-40 flex items-center shadow-sm justify-between px-1 overflow-hidden">
@@ -403,7 +405,7 @@ export const layoutTemplates = [
                 <Button type="link" className="">
                   <span className="ml-4 text-primary text-md font-semibold">
                     <div className="hidden">{userName}</div>
-                    <span className="italic text-warning font-normal">User info coming soon...</span>
+                    <span className="italic text-warning font-normal">Admin</span>
                   </span>
                   <FaCaretDown className="text-primary ml-1" />
                 </Button>
@@ -484,7 +486,7 @@ export const layoutTemplates = [
           <div key={form.id} className="menu-item">
             <Link
               to={href}
-              target={form.customLink || form.newTab ? '_blank' : '_self'}
+              target={form.newTab ? '_blank' : '_self'}
               onClick={isParentMenu ? () => toggleMenu(form.id) : undefined}
               style={{
                 width: `${navigationWidth - 25}px`,
@@ -535,11 +537,11 @@ export const layoutTemplates = [
       const menu = (
         <Menu className="text-primary">
           {menuItems?.map(({ name, icon: Icon, onClick }) => (
-            <Menu.Item key={name}>
-              <Button type="link" onClick={onClick} className="flex items-center gap-2 px-3 py-1 leading-6">
+            <Menu.Item key={name} onClick={onClick}>
+              <div className="flex items-center gap-2 px-3 py-1 text-md">
                 <Icon />
                 {name}
-              </Button>
+              </div>
             </Menu.Item>
           ))}
         </Menu>
@@ -588,7 +590,7 @@ export const layoutTemplates = [
                   ) : (
                     <span className="text-primary font-semibold text-md">
                       <div className="hidden">{userName}</div>
-                      <span className="italic text-warning font-normal">User info coming soon...</span>
+                      <span className="italic text-warning font-normal">Admin</span>
                     </span>
                   )}
                   <FaCaretDown className="text-primary ml-1" />
@@ -654,7 +656,7 @@ export const layoutTemplates = [
                     ) : (
                       <span className="text-primary font-semibold text-md">
                         <div className="hidden">{userName}</div>
-                        <span className="italic text-warning font-normal">User info coming soon...</span>
+                        <span className="italic text-warning font-normal">Admin</span>
                       </span>
                     )}
                     <FaCaretDown className="text-primary ml-1" />