@visns-studio/visns-components 4.7.2 → 4.7.4

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

@@ -0,0 +1,174 @@
+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/src/components/crm/auth/styles/Login.module.scss

@@ -0,0 +1,243 @@
+.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/src/components/crm/auth/styles/Profile.module.scss

@@ -0,0 +1,222 @@
+/* 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 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;
+}
+
+.btn:hover {
+    color: var(--tertiary-color);
+    background: var(--secondary-color);
+    border: 1px solid rgba(var(--secondary-color-rgb), 1.1);
+}
+
+.inputError {
+    border-color: red !important;
+}