@visns-studio/visns-components 5.4.6 → 5.4.8

package/src/components/crm/auth/styles/Profile.module.scss

@@ -1,8 +1,12 @@
-/* Profile.module.css */
+/* Profile.module.scss */
 
+/* Form field label animation */
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
+select:not(:placeholder-shown) + .fi__span,
+input:focus + .fi__span,
+textarea:focus + .fi__span,
+select:focus + .fi__span {
     transform: translateY(-40%) translateX(10px) scale(0.9);
     opacity: 1;
     padding: 0 0.25rem;
@@ -56,16 +60,6 @@ select:not(:placeholder-shown) + .fi__span {
     border: 1px solid var(--border-color);
     box-sizing: border-box;
     padding: 5px;
-    margin: 0.5rem 0;
-    height: auto;
-}
-
-.grid__subnav {
-    flex: 1;
-    background: white;
-    border-radius: var(--br);
-    box-sizing: border-box;
-    padding: 5px;
     margin: 8px 0;
     height: auto;
     box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
@@ -195,6 +189,10 @@ select:not(:placeholder-shown) + .fi__span {
     padding: 0.35em;
     position: relative;
     box-sizing: border-box;
+
+    @media (max-width: 768px) {
+        width: 100%;
+    }
 }
 
 .fi__label {
@@ -255,18 +253,46 @@ select:not(:placeholder-shown) + .fi__span {
     padding: 10px;
 }
 
+/* Removed signatureContainer and signatureLabel styles as they're no longer needed */
+
+.signaturePadWrapper {
+    width: 100%;
+    margin-bottom: 0.5rem;
+    position: relative;
+    z-index: 1;
+
+    canvas {
+        max-width: 100%;
+        height: auto !important;
+    }
+}
+
 .polActions {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: auto;
+    display: flex;
+    gap: 0.5em;
+    z-index: 10;
+
+    @media (max-width: 768px) {
+        position: static;
+        margin: 1.5rem 0;
+        justify-content: flex-end;
+        width: 100%;
+    }
 }
 
 .polActions button {
-    display: block;
-    float: left;
     padding: 0.65em 1em;
-    margin: 0 0.25em;
+    margin: 0;
+    transition: all 0.2s ease;
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
 }
 
 .btn {
@@ -284,18 +310,441 @@ select:not(:placeholder-shown) + .fi__span {
     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);
+    &:hover:not(:disabled) {
+        color: var(--tertiary-color);
+        background: var(--secondary-color);
+        border: 1px solid rgba(var(--secondary-color-rgb), 1.1);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
 }
 
 .inputError {
     border-color: red !important;
 }
 
+.loading {
+    position: relative;
+    cursor: wait;
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 1em;
+        height: 1em;
+        top: 50%;
+        right: 0.5em;
+        margin-top: -0.5em;
+        border: 2px solid rgba(255, 255, 255, 0.5);
+        border-top-color: white;
+        border-radius: 50%;
+        animation: spinner 0.6s linear infinite;
+    }
+}
+
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Two-Factor Authentication Styles */
+.twoFactorSection {
+    padding: 0.75rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.twoFactorStatus {
+    margin-bottom: 1.5rem;
+
+    h3 {
+        margin-bottom: 0.75rem;
+        font-size: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 500;
+    }
+
+    p {
+        margin-bottom: 1.25rem;
+        line-height: 1.4;
+        color: var(--paragraph-color);
+        font-size: 0.9rem;
+    }
+}
+
+.statusEnabled {
+    color: #2ecc71;
+    font-weight: 500;
+    padding: 0.2rem 0.4rem;
+    background-color: rgba(46, 204, 113, 0.1);
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+.statusDisabled {
+    color: #e74c3c;
+    font-weight: 500;
+    padding: 0.2rem 0.4rem;
+    background-color: rgba(231, 76, 60, 0.1);
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+.confirmedMessage {
+    margin: 1rem 0;
+    padding: 0.75rem;
+    background-color: rgba(46, 204, 113, 0.1);
+    border-left: 3px solid #2ecc71;
+    border-radius: var(--br);
+    color: #333;
+    font-size: 0.9rem;
+}
+
+.btnPrimary {
+    background-color: var(--primary-color);
+    color: white;
+    font-size: 0.85rem;
+    padding: 0.5rem 0.85rem;
+
+    &:hover:not(:disabled) {
+        filter: brightness(90%);
+    }
+}
+
+.btnSecondary {
+    background-color: #f1f1f1;
+    color: #333;
+    border: 1px solid #ddd;
+    font-size: 0.85rem;
+    padding: 0.5rem 0.85rem;
+
+    &:hover:not(:disabled) {
+        background-color: #e5e5e5;
+    }
+}
+
+.btnDanger {
+    background-color: #e74c3c;
+    color: white;
+    font-size: 0.85rem;
+    padding: 0.5rem 0.85rem;
+
+    &:hover:not(:disabled) {
+        background-color: #c0392b;
+    }
+}
+
+.twoFactorSetup {
+    margin-top: 1.5rem;
+    padding: 1.5rem;
+    background-color: white;
+    border-radius: var(--br);
+    border: 1px solid #e0e0e0;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
+    width: 100%;
+
+    h3 {
+        margin-bottom: 1.25rem;
+        font-size: 1rem;
+        font-weight: 500;
+        color: var(--primary-color);
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid #f0f0f0;
+    }
+}
+
+.setupSteps {
+    margin-left: 0;
+    margin-bottom: 1.5rem;
+    font-size: 0.9rem;
+    counter-reset: step-counter;
+    list-style-type: none;
+
+    li {
+        margin-bottom: 1.5rem;
+        padding-left: 2.5rem;
+        position: relative;
+
+        &:before {
+            content: counter(step-counter);
+            counter-increment: step-counter;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 1.75rem;
+            height: 1.75rem;
+            background-color: var(--primary-color);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+
+        p {
+            margin-bottom: 0.75rem;
+            font-weight: 500;
+            font-size: 0.9rem;
+            color: #333;
+        }
+
+        ul {
+            margin-left: 0;
+            margin-bottom: 1rem;
+            list-style-type: none;
+            background-color: #f9f9f9;
+            padding: 0.75rem 1rem;
+            border-radius: var(--br);
+            border-left: 3px solid var(--primary-color);
+
+            li {
+                margin-bottom: 0.5rem;
+                font-size: 0.85rem;
+                padding-left: 0;
+                position: relative;
+                padding-left: 1rem;
+
+                &:before {
+                    content: '•';
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    color: var(--primary-color);
+                    font-size: 1rem;
+                    width: auto;
+                    height: auto;
+                    background-color: transparent;
+                    border-radius: 0;
+                    counter-increment: none;
+                }
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                a {
+                    color: var(--primary-color);
+                    text-decoration: none;
+                    font-weight: 500;
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.qrCodeContainer {
+    display: flex;
+    justify-content: center;
+    margin: 0.75rem 0;
+    padding: 1rem;
+    background-color: white;
+    border-radius: var(--br);
+    border: 1px solid #e0e0e0;
+    width: 100%;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+    }
+}
+
+.qrCodeSvg {
+    width: 180px;
+    height: 180px;
+
+    svg {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+    }
+}
+
+.qrPlaceholder {
+    width: 180px;
+    height: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+    color: #666;
+    font-size: 0.85rem;
+    border-radius: 4px;
+    animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.6;
+    }
+}
+
+.secretKeyContainer {
+    display: flex;
+    align-items: center;
+    margin: 0.75rem 0;
+    gap: 0.5rem;
+    background-color: #f9f9f9;
+    padding: 0.75rem;
+    border-radius: var(--br);
+    border: 1px solid #e0e0e0;
+    width: 100%;
+}
+
+.secretKey {
+    padding: 0.5rem 0.75rem;
+    background-color: white;
+    border-radius: var(--br);
+    font-family: monospace;
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+    color: #333;
+    user-select: all;
+    border: 1px solid #ddd;
+    flex-grow: 1;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.copyButton {
+    padding: 0.4rem 0.75rem;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: var(--br);
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        filter: brightness(90%);
+    }
+
+    &:active {
+        transform: translateY(1px);
+    }
+}
+
+.verificationCodeContainer {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin: 0.75rem 0;
+    background-color: #f9f9f9;
+    padding: 1rem;
+    border-radius: var(--br);
+    border: 1px solid #e0e0e0;
+    width: 100%;
+}
+
+.verificationCodeInput {
+    padding: 0.75rem;
+    font-size: 1.1rem;
+    letter-spacing: 4px;
+    width: 140px;
+    text-align: center;
+    border: 1px solid #ddd;
+    border-radius: var(--br);
+    font-family: monospace;
+    font-weight: 600;
+    color: #333;
+    background-color: white;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+
+    &:focus {
+        border-color: var(--primary-color);
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+    }
+
+    &::placeholder {
+        color: #bbb;
+        letter-spacing: 2px;
+    }
+}
+
+.recoveryCodes {
+    margin: 0.75rem 0;
+    padding: 1rem;
+    background-color: #f9f9f9;
+    border-radius: var(--br);
+    border: 1px solid #e0e0e0;
+    width: 100%;
+}
+
+.recoveryCodesContainer {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.recoveryCode {
+    padding: 0.5rem 0.75rem;
+    background-color: white;
+    border-radius: var(--br);
+    border: 1px solid #ddd;
+    font-family: monospace;
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+    color: #333;
+    user-select: all;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+    text-align: center;
+}
+
+.noRecoveryCodes {
+    padding: 1rem;
+    text-align: center;
+    color: #666;
+    font-style: italic;
+    font-size: 0.9rem;
+}
+
+.recoveryCodesWarning {
+    margin-top: 0.75rem;
+    padding: 0.75rem;
+    background-color: rgba(231, 76, 60, 0.1);
+    border-left: 3px solid #e74c3c;
+    border-radius: var(--br);
+    color: #333;
+    font-size: 0.85rem;
+}
+
+.setupActions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid #f0f0f0;
+}
+
 .crmtitle {
     min-height: auto;
     padding: 1rem;

package/src/components/crm/auth/styles/TwoFactorAuth.module.scss

@@ -0,0 +1,65 @@
+// Import the Login styles to maintain consistency
+@import './Login.module.scss';
+
+// Additional styles specific to the 2FA component
+.instructions {
+    text-align: center;
+    margin: 0.5rem 0 1.5rem;
+    color: var(--paragraph-color);
+    font-size: 0.95rem;
+    line-height: 1.4;
+}
+
+.login {
+    h2 {
+        text-align: center;
+        margin: 0;
+        color: var(--heading-color);
+        font-weight: 500;
+    }
+}
+
+// Style for the verification code input
+.formItem {
+    input[name='verificationCode'] {
+        letter-spacing: 0.25rem;
+        font-size: 1.2rem;
+        text-align: center;
+    }
+}
+
+.rememberMeIndicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0.75rem auto 0;
+    padding: 0.6rem 1rem;
+    background-color: rgba(var(--primary-rgb), 0.08);
+    border-radius: var(--br);
+    border-left: 3px solid var(--primary-color);
+    max-width: 80%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+
+    &:hover {
+        background-color: rgba(var(--primary-rgb), 0.12);
+        transform: translateY(-1px);
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+
+    span {
+        font-size: 0.85rem;
+        color: var(--primary-color);
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+
+        &::before {
+            content: '✓';
+            display: inline-block;
+            margin-right: 0.5rem;
+            font-weight: bold;
+            font-size: 0.9rem;
+        }
+    }
+}

package/src/components/crm/generic/GenericAuth.jsx

@@ -17,6 +17,7 @@ import GenericMain from './GenericMain';
 import Login from '../auth/Login';
 import Reset from '../auth/Reset';
 import Verify from '../auth/Verify';
+import TwoFactorAuth from '../auth/TwoFactorAuth';
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
@@ -111,6 +112,17 @@ const GenericAuth = ({
                         />
                     }
                 />
+                <Route
+                    path="2fa"
+                    element={
+                        <TwoFactorAuthComponent
+                            loginBg={loginBg}
+                            logo={logo}
+                            setIsAuthenticated={setIsAuthenticated}
+                            setUserProfile={setUserProfile}
+                        />
+                    }
+                />
                 <Route
                     element={
                         <ProtectedRoute
@@ -174,4 +186,15 @@ const VerifyComponent = React.memo(({ loginBg, logo, setIsAuthenticated }) => (
     <Verify loginBg={loginBg} logo={logo} setSystemAuth={setIsAuthenticated} />
 ));
 
+const TwoFactorAuthComponent = React.memo(
+    ({ loginBg, logo, setIsAuthenticated, setUserProfile }) => (
+        <TwoFactorAuth
+            loginBg={loginBg}
+            logo={logo}
+            setSystemAuth={setIsAuthenticated}
+            setUserProfile={setUserProfile}
+        />
+    )
+);
+
 export default GenericAuth;