@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/auth/Login.jsx

@@ -1,223 +0,0 @@
-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.css';
-
-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/components/crm/auth/Profile.jsx

@@ -1,280 +0,0 @@
-// 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.css';
-
-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/components/crm/auth/Reset.jsx

@@ -1,111 +0,0 @@
-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.css';
-
-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;