@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/auth/Verify.jsx

@@ -1,174 +0,0 @@
-import '../../styles/global.css';
-
-import React, { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import parse from 'html-react-parser';
-import validator from 'validator';
-import Reveal from 'react-reveal/Reveal';
-
-import CustomFetch from '../Fetch';
-
-const Verify = ({ logo }) => {
-    const navigate = useNavigate();
-    const { code } = useParams();
-    const [formData, setFormData] = useState({
-        password: '',
-        passwordRepeat: '',
-        passwordClass: '',
-        passwordRepeatClass: '',
-    });
-
-    const { password, passwordRepeat, passwordClass, passwordRepeatClass } =
-        formData;
-
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setFormData((prevFormData) => ({
-            ...prevFormData,
-            [name]: value,
-            passwordClass: '',
-            passwordRepeatClass: '',
-        }));
-    };
-
-    const validatePassword = () => {
-        let _error = '';
-
-        if (password === '') {
-            _error = 'Please type in your new password.';
-            setFormData((prevFormData) => ({
-                ...prevFormData,
-                passwordClass: 'inputError',
-            }));
-        } else {
-            if (password !== passwordRepeat) {
-                _error =
-                    'The password does not match, please re-type the password.';
-                setFormData((prevFormData) => ({
-                    ...prevFormData,
-                    passwordClass: 'inputError',
-                    passwordRepeatClass: 'inputError',
-                }));
-            } else {
-                if (!validator.isStrongPassword(password)) {
-                    _error =
-                        'Your password is too weak it must contain the following:<br />- Must contain at least 8 characters.<br />- Must contain at least one uppercase letter.<br />- Must contain at least one lowercase letter.<br />- Must contain at least one number.<br />- Must contain at least one symbol.<br />';
-                }
-            }
-        }
-
-        return _error;
-    };
-
-    const handleSubmit = (e) => {
-        if (e) {
-            e.preventDefault();
-            const errorMsg = validatePassword();
-
-            if (errorMsg === '') {
-                CustomFetch(
-                    '/password/reset',
-                    'POST',
-                    {
-                        code: code,
-                        password: password,
-                        password_confirmation: passwordRepeat,
-                    },
-                    function (result) {
-                        if (result.error === '') {
-                            toast.success(
-                                'You have successfully set a new password, please use your new password to login into the system.'
-                            );
-
-                            navigate('/login');
-                        } else {
-                            toast.error(result.error);
-                        }
-                    }
-                );
-            } else {
-                toast.error(<div>{parse(errorMsg)}</div>);
-            }
-        }
-    };
-
-    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>Reset your password</h1>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="password"
-                                            name="password"
-                                            value={password}
-                                            onChange={handleInputChange}
-                                            tabIndex="1"
-                                            className={passwordClass}
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Password
-                                        </span>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="password"
-                                            name="passwordRepeat"
-                                            value={passwordRepeat}
-                                            onChange={handleInputChange}
-                                            tabIndex="2"
-                                            className={passwordRepeatClass}
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Re-type Password
-                                        </span>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                >
-                                    <button
-                                        className={styles.btn}
-                                        type="submit"
-                                        tabIndex="3"
-                                    >
-                                        Reset
-                                    </button>
-                                </div>
-                            </div>
-                        </Reveal>
-                    </form>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Verify;

package/components/crm/auth/styles/Login.module.css

@@ -1,243 +0,0 @@
-.formItem {
-    width: 50%;
-    padding: 0.5em;
-    position: relative;
-    box-sizing: border-box;
-
-    .fi__label {
-        position: relative;
-    }
-
-    .fi__span {
-        position: absolute;
-        transition: all 200ms;
-        opacity: 0.8;
-        left: 0;
-        padding: 19px 20px;
-        transform-origin: top left;
-        cursor: text;
-    }
-
-    .fi__div {
-        transition: all 200ms;
-        opacity: 0.8;
-        left: 0;
-        padding: 19px 13px;
-        border-radius: var(--br);
-        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
-        box-shadow: none;
-    }
-
-    .fi__toggle {
-        width: max-content;
-        padding: 0px 10px 0px 0;
-        box-sizing: border-box;
-        display: inline;
-    }
-
-    .fi__toggletxt {
-        position: relative;
-        left: 5px;
-        font-size: 0.95em;
-        top: -5px;
-    }
-}
-
-.fwItem {
-    flex-basis: 100%;
-}
-
-.lastItem {
-    .btn {
-        width: 100%;
-    }
-}
-
-.loginlogo {
-    display: block;
-    width: 100%;
-    max-width: 140px;
-    height: auto;
-    margin: 0 auto;
-    padding-bottom: 1rem;
-}
-
-.logincontainer {
-    min-height: 100vh;
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-content: center;
-    flex-wrap: wrap;
-}
-
-.login {
-    width: 35rem;
-    height: auto;
-    padding: 1rem;
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-
-    > .formItem {
-        padding: 0.25em 0;
-
-        small {
-            position: absolute;
-            width: 18px;
-            height: 18px;
-            right: 18px;
-            top: 18px;
-            opacity: 0.15;
-        }
-    }
-
-    > .loginitem {
-        width: 100%;
-        padding: 0.25em 0;
-
-        label {
-            width: 100%;
-            padding-bottom: 0.25rem;
-        }
-
-        button {
-            width: 100%;
-        }
-    }
-}
-
-.forgotten {
-    span {
-        display: block;
-        text-align: center;
-        color: var(--paragraph-color);
-        padding: 1rem 0;
-
-        a {
-            color: var(--highlight-color);
-            text-decoration: none;
-        }
-    }
-}
-
-.lcontainer {
-    --sidebar-width: 35%;
-    min-height: 100vh;
-}
-
-.lwrap {
-    display: flex;
-}
-
-.aside {
-    opacity: 1;
-    position: fixed;
-    overflow: hidden;
-    height: 101%;
-    width: var(--sidebar-width);
-}
-
-.fwItem {
-    flex-basis: 100%;
-}
-
-.lastItem .btn {
-    width: 100%;
-}
-
-.login .formItem {
-    padding: 0.25em 0;
-}
-
-.login .formItem small {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    right: 18px;
-    top: 18px;
-    opacity: 0.15;
-}
-
-.login .loginitem {
-    width: 100%;
-    padding: 0.25em 0;
-}
-
-.login .loginitem label {
-    width: 100%;
-    padding-bottom: 0.25rem;
-}
-
-.login .loginitem button {
-    width: 100%;
-}
-
-.forgotten span {
-    display: block;
-    text-align: center;
-    color: var(--paragraph-color);
-    padding: 1rem 0;
-}
-
-.forgotten span a {
-    color: var(--highlight-color);
-    text-decoration: none;
-}
-
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
-}
-
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
-    opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-}
-
-@media (max-width: 1024px) {
-    body {
-        font-size: 85%;
-    }
-
-    .aside {
-        width: 100%;
-        transform: translateX(-2000px);
-        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
-        will-change: transform;
-        z-index: 500;
-    }
-
-    .logincontainer {
-        min-height: 100vh;
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-content: center;
-        flex-wrap: wrap;
-    }
-
-    .login {
-        width: 95%;
-    }
-}

package/components/crm/auth/styles/Profile.module.css

@@ -1,222 +0,0 @@
-/* Profile.module.css */
-
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
-    opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-    border-radius: var(--br);
-}
-
-.grid {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-}
-
-.grid__row {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-}
-
-.grid__full {
-    width: 100%;
-    background: white;
-    border-radius: var(--br);
-    border: 1px solid var(--border-color);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 0;
-    margin: 5px;
-}
-
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 10px 20px;
-    margin: 5px;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid var(--border-color);
-    position: relative;
-}
-
-.crmtitle h1 {
-    font-weight: 700;
-    font-size: 1.25em;
-    margin: 0;
-    padding: 0.25rem 0;
-    color: var(--paragraph-color);
-    text-transform: capitalize;
-}
-
-.grid__subrow {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-}
-
-.grid__subnav {
-    flex: 1;
-    background: white;
-    border-radius: var(--br);
-    border: 1px solid var(--border-color);
-    box-sizing: border-box;
-    padding: 5px;
-    margin: 5px;
-    height: auto;
-}
-
-.grid__subcontent {
-    flex: 0 1 85%;
-    background: white;
-    border-radius: var(--br);
-    border: 1px solid var(--border-color);
-    box-sizing: border-box;
-    padding: 0;
-    margin: 5px;
-    height: auto;
-    position: relative;
-}
-
-.gridtxt__header {
-    width: 100%;
-    display: block;
-    background: var(--border-color);
-    box-sizing: border-box;
-    padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
-    margin-bottom: 0;
-    font-weight: 700;
-    text-align: center;
-    color: var(--paragraph-color);
-    position: relative;
-}
-
-.formcontainer {
-    width: 100%;
-}
-
-.modalForm {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
-}
-
-.formItem {
-    width: 50%;
-    padding: 0.35em;
-    position: relative;
-    box-sizing: border-box;
-}
-
-.fi__label {
-    position: relative;
-    display: block;
-}
-
-.fi__span {
-    position: absolute;
-    transition: all 200ms;
-    opacity: 0.8;
-    left: 0;
-    padding: 19px 20px;
-    transform-origin: top left;
-    cursor: text;
-}
-
-.prefocus {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
-    opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-    border-radius: var(--br);
-    z-index: 500;
-}
-
-.input,
-.textarea,
-.select {
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid transparent;
-    padding: 1rem;
-    outline: none;
-    width: 100%;
-    box-sizing: border-box;
-    color: var(--paragraph-color);
-    transition: box-shadow 0.15s linear;
-}
-
-.input:hover,
-.textarea:hover,
-.select:hover {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
-    transition: border 0.15s linear;
-}
-
-.input:focus,
-.textarea:focus,
-.select:focus {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
-}
-
-.sigcanvas {
-    border: 2px solid #ccc;
-    border-radius: 10px;
-    padding: 10px;
-}
-
-.polActions {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: auto;
-}
-
-.polActions button {
-    display: block;
-    float: left;
-    padding: 0.65em 1em;
-    margin: 0 0.25em;
-}
-
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--secondary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid darken(var(--primary-color), 10%);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-}
-
-.btn:hover {
-    color: var(--tertiary-color);
-    background: var(--secondary-color);
-    border: 1px solid darken(var(--secondary-color), 10%);
-}
-
-.inputError {
-    border-color: red !important;
-}