@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/crm/auth/Login.jsx

@@ -0,0 +1,223 @@
+import '../../styles/global.css';
+
+import React, { useEffect, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import { toast } from 'react-toastify';
+import { Person, LockOff } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+
+import styles from './styles/Login.module.scss';
+
+const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
+    const location = useLocation();
+
+    const [auth, setAuth] = useState({
+        email: '',
+        password: '',
+        location: location,
+    });
+
+    const [authClass, setAuthClass] = useState({
+        username: '',
+        password: '',
+    });
+
+    const renderSsoButton = () => {
+        let content =
+            providers && providers.length > 0 ? (
+                <div className="formItem fwItem lastItem forgotten">
+                    <span>OR</span>
+                </div>
+            ) : null;
+
+        if (providers) {
+            providers.forEach((provider) => {
+                switch (provider) {
+                    case 'azure':
+                        content = (
+                            <>
+                                {content}
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
+                                >
+                                    <button
+                                        className={styles.btn}
+                                        onClick={(e) => {
+                                            e.preventDefault();
+
+                                            window.location.href =
+                                                '/auth/azure';
+                                        }}
+                                    >
+                                        <img
+                                            src={
+                                                'https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png'
+                                            }
+                                            width="13px"
+                                            height="13px"
+                                        />{' '}
+                                        Microsoft
+                                    </button>
+                                </div>
+                            </>
+                        );
+                        break;
+                }
+            });
+        }
+
+        return content;
+    };
+
+    const handleChange = (e) => {
+        if (e) {
+            setAuth((prevState) => ({
+                ...prevState,
+                [e.target.name]: e.target.value,
+            }));
+        }
+    };
+
+    const handleSubmit = (e) => {
+        if (e) {
+            e.preventDefault();
+
+            CustomFetch(
+                '/login/authenticate',
+                'POST',
+                {
+                    ...auth,
+                    location:
+                        location.state && location.state.previousUrl
+                            ? location.state.previousUrl
+                            : '',
+                },
+                (result) => {
+                    if (result.error === '') {
+                        setUserProfile(result.user);
+
+                        if (result.previous && result.previous !== '') {
+                            window.location.href = result.previous;
+                        } else {
+                            setSystemAuth(true);
+                        }
+                    } else {
+                        setSystemAuth(false);
+                        setAuthClass((prevState) => ({
+                            ...prevState,
+                            username: 'inputError',
+                            password: 'inputError',
+                        }));
+
+                        toast.error(
+                            'Could not log in with the supplied credentials, please try again.'
+                        );
+                    }
+                },
+                (error) => {
+                    setAuthClass((prevState) => ({
+                        ...prevState,
+                        username: 'inputError',
+                        password: 'inputError',
+                    }));
+
+                    if (String(error) === 'CSRF token mismatch.') {
+                        toast.error(
+                            'Auth token has timed out, please reload the page before attempting to log back in.'
+                        );
+                    } else {
+                        toast.error(String(error));
+                    }
+                }
+            );
+        }
+    };
+
+    return (
+        <div className={styles.lcontainer}>
+            <div className={styles.lwrap}>
+                <div className={styles.logincontainer}>
+                    <form onSubmit={handleSubmit}>
+                        <Reveal effect="fadeInUp">
+                            <div className={styles.login}>
+                                <img
+                                    src={logo}
+                                    alt="CRM"
+                                    className={styles.loginlogo}
+                                />
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem}`}
+                                >
+                                    <label className={styles.fi__label}>
+                                        <input
+                                            type="text"
+                                            name="email"
+                                            value={auth.email}
+                                            onChange={handleChange}
+                                            tabIndex="1"
+                                            className={authClass.username}
+                                            placeholder=" "
+                                        />
+                                        <span className={styles.fi__span}>
+                                            Email
+                                        </span>
+                                        <small>
+                                            <Person strokeWidth={2} size={18} />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem}`}
+                                >
+                                    <label className={styles.fi__label}>
+                                        <input
+                                            type="password"
+                                            name="password"
+                                            value={auth.password}
+                                            onChange={handleChange}
+                                            tabIndex="2"
+                                            className={authClass.password}
+                                            placeholder=" "
+                                        />
+                                        <span className={styles.fi__span}>
+                                            Password
+                                        </span>
+                                        <small>
+                                            <LockOff
+                                                strokeWidth={2}
+                                                size={18}
+                                            />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
+                                >
+                                    <button
+                                        className={styles.btn}
+                                        type="submit"
+                                    >
+                                        Login
+                                    </button>
+                                </div>
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
+                                >
+                                    <span>
+                                        Forgot your password?{' '}
+                                        <Link to="/reset">Click Here</Link>
+                                    </span>
+                                </div>
+                                {renderSsoButton()}
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Login;

package/src/components/crm/auth/Profile.jsx

@@ -0,0 +1,280 @@
+// src/components/Profile.jsx
+import '../../styles/global.css';
+
+import React, { useState, useEffect, useRef } from 'react';
+import PasswordStrengthBar from 'react-password-strength-bar';
+import { toast } from 'react-toastify';
+import SignaturePad from 'react-signature-pad-wrapper';
+import CustomFetch from '../Fetch';
+import TableFilter from '../TableFilter';
+import styles from './styles/Profile.module.scss';
+
+const Profile = ({ userProfile, setUserProfile }) => {
+    const signatureRef = useRef(null);
+    const [profile, setProfile] = useState({
+        name: '',
+        email: '',
+        password: '',
+        password_confirmation: '',
+    });
+
+    const [inputClasses, setInputClasses] = useState({
+        name: '',
+        email: '',
+        password: '',
+        password_confirmation: '',
+    });
+
+    const [filters, setFilters] = useState([
+        {
+            id: 'overview',
+            show: true,
+            label: 'Overview',
+            class: 'subactive',
+        },
+    ]);
+
+    const handleClearSignature = (e) => {
+        if (e) {
+            e.preventDefault();
+            signatureRef.current.clear();
+        }
+    };
+
+    const handleChangeProfile = (e) => {
+        const { name, value } = e.target;
+        setProfile((prevProfile) => ({
+            ...prevProfile,
+            [name]: value,
+        }));
+    };
+
+    const handleSubmitProfile = async (e) => {
+        try {
+            if (e) {
+                e.preventDefault();
+            }
+
+            // Validate required fields
+            if (profile.name.trim() === '' || profile.email.trim() === '') {
+                setInputClasses({
+                    name: profile.name.trim() === '' ? styles.inputError : '',
+                    email: profile.email.trim() === '' ? styles.inputError : '',
+                });
+
+                toast.error('Please fill in all the required fields.');
+                return;
+            }
+
+            // Validate password and confirmation
+            if (
+                profile.password &&
+                profile.password !== profile.password_confirmation
+            ) {
+                setInputClasses({
+                    ...inputClasses,
+                    password: styles.inputError,
+                    password_confirmation: styles.inputError,
+                });
+
+                toast.error('Passwords do not match.');
+                return;
+            }
+
+            // Create a new payload object
+            let payload = {
+                name: profile.name,
+                email: profile.email,
+            };
+
+            // Conditionally add password to payload if it has a value
+            if (profile.password.trim() !== '') {
+                payload.password = profile.password;
+                payload.password_confirmation = profile.password_confirmation;
+            }
+
+            payload.signature = signatureRef.current.toDataURL();
+
+            const res = await CustomFetch(
+                `/ajax/users/${userProfile.id}`,
+                'PUT',
+                payload
+            );
+
+            setUserProfile((prevState) => ({
+                ...prevState,
+                name: res.data.user.name,
+                signature: res.data.user.signature,
+            }));
+            toast.success('Your profile has been successfully updated.');
+        } catch (err) {
+            console.log(err);
+        }
+    };
+
+    const renderContent = (filter) => {
+        if (filter.show && filter.id === 'overview') {
+            return (
+                <div className={styles.gridtxt} key={filter.id}>
+                    <div className={styles.gridtxt__header}>
+                        <span>Overview</span>
+                    </div>
+                    <div className={styles.formcontainer}>
+                        <form
+                            className={styles.modalForm}
+                            onSubmit={handleSubmitProfile}
+                        >
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <input
+                                        type="text"
+                                        name="name"
+                                        onChange={handleChangeProfile}
+                                        className={`${styles.input} ${inputClasses.name}`}
+                                        value={profile.name}
+                                    />
+                                    <span className={styles.fi__span}>
+                                        Name *
+                                    </span>
+                                </label>
+                            </div>
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <input
+                                        type="text"
+                                        name="email"
+                                        readOnly
+                                        className={`${styles.input} ${inputClasses.email}`}
+                                        value={profile.email}
+                                    />
+                                    <span className={styles.fi__span}>
+                                        Email *
+                                    </span>
+                                </label>
+                            </div>
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <span
+                                        className={`${styles.fi__span} ${styles.prefocus}`}
+                                    >
+                                        Password
+                                    </span>
+                                    <input
+                                        type="password"
+                                        name="password"
+                                        onChange={handleChangeProfile}
+                                        value={profile.password}
+                                        className={`${styles.input} ${inputClasses.password}`}
+                                    />
+                                    <PasswordStrengthBar
+                                        password={profile.password}
+                                    />
+                                </label>
+                            </div>
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <span
+                                        className={`${styles.fi__span} ${styles.prefocus}`}
+                                    >
+                                        Password Confirmation
+                                    </span>
+                                    <input
+                                        type="password"
+                                        name="password_confirmation"
+                                        onChange={handleChangeProfile}
+                                        value={profile.password_confirmation}
+                                        className={`${styles.input} ${inputClasses.password_confirmation}`}
+                                    />
+                                </label>
+                            </div>
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <SignaturePad
+                                        ref={signatureRef}
+                                        height={200}
+                                        options={{
+                                            penColor: 'black',
+                                        }}
+                                        redrawOnResize
+                                        canvasProps={{
+                                            style: {
+                                                border: '2px solid #ccc',
+                                                borderRadius: '10px',
+                                                padding: '10px',
+                                            },
+                                            className: styles.sigcanvas,
+                                        }}
+                                    />
+                                    <span className={styles.fi__span}>
+                                        Signature
+                                    </span>
+                                </label>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div className={styles.polActions}>
+                        <button
+                            className={styles.btn}
+                            onClick={handleSubmitProfile}
+                        >
+                            Save
+                        </button>
+                        <button
+                            className={styles.btn}
+                            onClick={handleClearSignature}
+                        >
+                            Clear
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+        return null;
+    };
+
+    useEffect(() => {
+        setProfile((prevState) => ({
+            ...prevState,
+            name: userProfile.name,
+            email: userProfile.email,
+            password: '',
+            password_confirmation: '',
+        }));
+
+        if (userProfile.signature) {
+            signatureRef.current.fromDataURL(userProfile.signature);
+        }
+    }, [userProfile]);
+
+    return (
+        <div>
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
+                        <h1>My Profile</h1>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.grid}>
+                <div className={styles.grid__subrow}>
+                    <div className={styles.grid__subnav}>
+                        <TableFilter
+                            filters={filters}
+                            setFilters={setFilters}
+                        />
+                    </div>
+                    <div className={styles.grid__subcontent}>
+                        {filters.map((filter) => (
+                            <React.Fragment key={`filter-${filter.id}`}>
+                                {renderContent(filter)}
+                            </React.Fragment>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Profile;

package/src/components/crm/auth/Reset.jsx

@@ -0,0 +1,111 @@
+import '../../styles/global.css';
+
+import React, { useState } from 'react';
+import Reveal from 'react-reveal/Reveal';
+import { toast } from 'react-toastify';
+import parse from 'html-react-parser';
+import { Person } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+
+import styles from './styles/Reset.module.scss';
+
+const Reset = ({ logo }) => {
+    const [email, setEmail] = useState('');
+    const [emailClass, setEmailClass] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        if (email === '') {
+            const error = 'Please type in your email address.';
+            setEmailClass('inputError');
+            toast.error(<div>{parse(error)}</div>);
+            return;
+        }
+
+        CustomFetch(
+            '/password/forgot',
+            'POST',
+            { email: email },
+            function (result) {
+                if (result.error === '') {
+                    setEmail('');
+                    toast.success(
+                        'You have successfully requested to reset your password, an email will be sent shortly. Please follow the instruction on the email.'
+                    );
+                } else {
+                    toast.error(result.error);
+                }
+            }
+        );
+    };
+
+    return (
+        <div className={styles.lcontainer}>
+            <div className={styles.lwrap}>
+                <aside
+                    className={styles.aside}
+                    style={{
+                        backgroundImage: `url(${loginBg})`,
+                        backgroundSize: 'cover',
+                    }}
+                ></aside>
+                <div className={styles.logincontainer}>
+                    <form onSubmit={handleSubmit}>
+                        <Reveal effect="fadeInUp">
+                            <div className={styles.login}>
+                                <img
+                                    src={logo}
+                                    alt="CRM"
+                                    className={styles.loginlogo}
+                                />
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem}`}
+                                >
+                                    <h1>Forgot your password?</h1>
+                                </div>
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem}`}
+                                >
+                                    <label className={styles.fi__label}>
+                                        <input
+                                            type="email"
+                                            name="email"
+                                            value={email}
+                                            onChange={(e) => {
+                                                setEmail(e.target.value);
+                                                setEmailClass('');
+                                            }}
+                                            tabIndex="1"
+                                            className={emailClass}
+                                        />
+                                        <span className={styles.fi__span}>
+                                            Email
+                                        </span>
+                                        <small>
+                                            <Person strokeWidth={2} size={18} />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div
+                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
+                                >
+                                    <button
+                                        className={styles.btn}
+                                        type="submit"
+                                        tabIndex="2"
+                                    >
+                                        Reset Password
+                                    </button>
+                                </div>
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Reset;