Add comprehensive unit tests for Security, UserModel, and Validation utilities
- Implemented SecurityTest to validate token generation, CSRF protection, input sanitization, and rate limiting. - Created UserModelTest to ensure correct database operations for user management, including creation, updating, banning, and fetching active users. - Developed ValidationTest to verify input validation and sanitization for user IDs, nicknames, messages, and API requests. - Introduced Security and Validation utility classes with methods for secure token generation, input sanitization, and comprehensive validation rules.
This commit is contained in:
Vincent
parent
5692874b10
commit
41cd7a4fd8
32 changed files with 5796 additions and 368 deletions
|
|
@ -1048,26 +1048,49 @@ a:focus-visible {
|
|||
COMPONENT-SPECIFIC RESPONSIVE UTILITY CLASSES
|
||||
================================================================= */
|
||||
|
||||
/* Button responsive utilities */
|
||||
.btn-responsive-xs { padding: var(--spacing-2) var(--spacing-3) !important; }
|
||||
.btn-responsive-sm { padding: var(--spacing-3) var(--spacing-4) !important; }
|
||||
.btn-responsive-md { padding: var(--spacing-4) var(--spacing-5) !important; }
|
||||
.btn-responsive-lg { padding: var(--spacing-4) var(--spacing-6) !important; }
|
||||
/* Button responsive utilities - Higher specificity for mobile overrides */
|
||||
@media (max-width: calc(var(--breakpoint-sm) - 1px)) {
|
||||
.btn-responsive-xs { padding: var(--spacing-2) var(--spacing-3) !important; }
|
||||
}
|
||||
@media (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px)) {
|
||||
.btn-responsive-sm { padding: var(--spacing-3) var(--spacing-4) !important; }
|
||||
}
|
||||
@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
|
||||
.btn-responsive-md { padding: var(--spacing-4) var(--spacing-5) !important; }
|
||||
}
|
||||
@media (min-width: var(--breakpoint-lg)) {
|
||||
.btn-responsive-lg { padding: var(--spacing-4) var(--spacing-6) !important; }
|
||||
}
|
||||
|
||||
/* Card responsive utilities */
|
||||
.card-responsive-xs .card-body { padding: var(--spacing-3) !important; }
|
||||
.card-responsive-sm .card-body { padding: var(--spacing-4) !important; }
|
||||
.card-responsive-md .card-body { padding: var(--spacing-5) !important; }
|
||||
/* Card responsive utilities - Media query containment */
|
||||
@media (max-width: calc(var(--breakpoint-sm) - 1px)) {
|
||||
.card-responsive-xs .card-body { padding: var(--spacing-3) !important; }
|
||||
}
|
||||
@media (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px)) {
|
||||
.card-responsive-sm .card-body { padding: var(--spacing-4) !important; }
|
||||
}
|
||||
@media (min-width: var(--breakpoint-md)) {
|
||||
.card-responsive-md .card-body { padding: var(--spacing-5) !important; }
|
||||
}
|
||||
|
||||
/* Message responsive utilities */
|
||||
.message-responsive-mobile .message-text { max-width: 85% !important; font-size: var(--font-size-sm) !important; }
|
||||
/* Message responsive utilities - Scoped to specific contexts */
|
||||
.message-responsive-mobile .message-text { max-width: 85% !important; }
|
||||
.message-responsive-tablet .message-text { max-width: 90% !important; }
|
||||
.message-responsive-desktop .message-text { max-width: 95% !important; }
|
||||
|
||||
/* Video player responsive utilities */
|
||||
.video-responsive-mobile .video-player__header { padding: var(--spacing-2) var(--spacing-3) !important; }
|
||||
.video-responsive-tablet .video-player__header { padding: var(--spacing-3) var(--spacing-4) !important; }
|
||||
.video-responsive-desktop .video-player__header { padding: var(--spacing-4) var(--spacing-6) !important; }
|
||||
/* Font size overrides for message text - only when sizing utility is applied */
|
||||
.message-responsive-mobile .message-text { font-size: var(--font-size-sm) !important; }
|
||||
|
||||
/* Video player responsive utilities - Scoped breakpoints */
|
||||
@media (max-width: calc(var(--breakpoint-sm) - 1px)) {
|
||||
.video-responsive-mobile .video-player__header { padding: var(--spacing-2) var(--spacing-3) !important; }
|
||||
}
|
||||
@media (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px)) {
|
||||
.video-responsive-tablet .video-player__header { padding: var(--spacing-3) var(--spacing-4) !important; }
|
||||
}
|
||||
@media (min-width: var(--breakpoint-md)) {
|
||||
.video-responsive-desktop .video-player__header { padding: var(--spacing-4) var(--spacing-6) !important; }
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
DASHBOARD COMPONENTS
|
||||
|
|
|
|||
|
|
@ -385,7 +385,6 @@
|
|||
/* Interactive button icons - more pronounced effects */
|
||||
.icon-button:hover {
|
||||
transform: scale(1.15);
|
||||
filter: brightness(1.2);
|
||||
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Reset and normalize styles */
|
||||
* {
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -10,7 +10,8 @@ body {
|
|||
font-family: var(--font-family-primary);
|
||||
background: var(--bg-darkest);
|
||||
color: var(--text-primary);
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh; /* Dynamic viewport height for mobile */
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,115 +144,6 @@
|
|||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
|
||||
================================================================= */
|
||||
|
||||
/* Responsive Width - Small and up */
|
||||
@media (min-width: var(--breakpoint-sm)) {
|
||||
.sm\:w-full { width: 100%; }
|
||||
.sm\:w-auto { width: auto; }
|
||||
.sm\:w-1\/2 { width: 50%; }
|
||||
.sm\:w-1\/3 { width: 33.333333%; }
|
||||
.sm\:w-2\/3 { width: 66.666667%; }
|
||||
.sm\:w-1\/4 { width: 25%; }
|
||||
.sm\:w-3\/4 { width: 75%; }
|
||||
}
|
||||
|
||||
/* Responsive Width - Medium and up */
|
||||
@media (min-width: var(--breakpoint-md)) {
|
||||
.md\:w-full { width: 100%; }
|
||||
.md\:w-auto { width: auto; }
|
||||
.md\:w-1\/2 { width: 50%; }
|
||||
.md\:w-1\/3 { width: 33.333333%; }
|
||||
.md\:w-2\/3 { width: 66.666667%; }
|
||||
.md\:w-1\/4 { width: 25%; }
|
||||
.md\:w-3\/4 { width: 75%; }
|
||||
}
|
||||
|
||||
/* Responsive Width - Large and up */
|
||||
@media (min-width: var(--breakpoint-lg)) {
|
||||
.lg\:w-full { width: 100%; }
|
||||
.lg\:w-auto { width: auto; }
|
||||
.lg\:w-1\/2 { width: 50%; }
|
||||
.lg\:w-1\/3 { width: 33.333333%; }
|
||||
.lg\:w-2\/3 { width: 66.666667%; }
|
||||
.lg\:w-1\/4 { width: 25%; }
|
||||
.lg\:w-3\/4 { width: 75%; }
|
||||
}
|
||||
|
||||
/* Responsive Width - Extra Large and up */
|
||||
@media (min-width: var(--breakpoint-xl)) {
|
||||
.xl\:w-full { width: 100%; }
|
||||
.xl\:w-auto { width: auto; }
|
||||
.xl\:w-1\/2 { width: 50%; }
|
||||
.xl\:w-1\/3 { width: 33.333333%; }
|
||||
.xl\:w-2\/3 { width: 66.666667%; }
|
||||
.xl\:w-1\/4 { width: 25%; }
|
||||
.xl\:w-3\/4 { width: 75%; }
|
||||
}
|
||||
|
||||
/* Responsive Width - 2XL and up */
|
||||
@media (min-width: var(--breakpoint-2xl)) {
|
||||
.2xl\:w-full { width: 100%; }
|
||||
.2xl\:w-auto { width: auto; }
|
||||
.2xl\:w-1\/2 { width: 50%; }
|
||||
.2xl\:w-1\/3 { width: 33.333333%; }
|
||||
.2xl\:w-2\/3 { width: 66.666667%; }
|
||||
.2xl\:w-1\/4 { width: 25%; }
|
||||
.2xl\:w-3\/4 { width: 75%; }
|
||||
}
|
||||
|
||||
/* Responsive Height - Small and up */
|
||||
@media (min-width: var(--breakpoint-sm)) {
|
||||
.sm\:h-full { height: 100%; }
|
||||
.sm\:h-auto { height: auto; }
|
||||
.sm\:h-screen { height: 100vh; }
|
||||
.sm\:h-1\/2 { height: 50%; }
|
||||
.sm\:h-1\/3 { height: 33.333333%; }
|
||||
.sm\:h-2\/3 { height: 66.666667%; }
|
||||
}
|
||||
|
||||
/* Responsive Height - Medium and up */
|
||||
@media (min-width: var(--breakpoint-md)) {
|
||||
.md\:h-full { height: 100%; }
|
||||
.md\:h-auto { height: auto; }
|
||||
.md\:h-screen { height: 100vh; }
|
||||
.md\:h-1\/2 { height: 50%; }
|
||||
.md\:h-1\/3 { height: 33.333333%; }
|
||||
.md\:h-2\/3 { height: 66.666667%; }
|
||||
}
|
||||
|
||||
/* Responsive Height - Large and up */
|
||||
@media (min-width: var(--breakpoint-lg)) {
|
||||
.lg\:h-full { height: 100%; }
|
||||
.lg\:h-auto { height: auto; }
|
||||
.lg\:h-screen { height: 100vh; }
|
||||
.lg\:h-1\/2 { height: 50%; }
|
||||
.lg\:h-1\/3 { height: 33.333333%; }
|
||||
.lg\:h-2\/3 { height: 66.666667%; }
|
||||
}
|
||||
|
||||
/* Responsive Height - Extra Large and up */
|
||||
@media (min-width: var(--breakpoint-xl)) {
|
||||
.xl\:h-full { height: 100%; }
|
||||
.xl\:h-auto { height: auto; }
|
||||
.xl\:h-screen { height: 100vh; }
|
||||
.xl\:h-1\/2 { height: 50%; }
|
||||
.xl\:h-1\/3 { height: 33.333333%; }
|
||||
.xl\:h-2\/3 { height: 66.666667%; }
|
||||
}
|
||||
|
||||
/* Responsive Height - 2XL and up */
|
||||
@media (min-width: var(--breakpoint-2xl)) {
|
||||
.2xl\:h-full { height: 100%; }
|
||||
.2xl\:h-auto { height: auto; }
|
||||
.2xl\:h-screen { height: 100vh; }
|
||||
.2xl\:h-1\/2 { height: 50%; }
|
||||
.2xl\:h-1\/3 { height: 33.333333%; }
|
||||
.2xl\:h-2\/3 { height: 66.666667%; }
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
RESPONSIVE GRID VARIATION CLASSES - Extra Large breakpoint (xl and up)
|
||||
================================================================= */
|
||||
|
|
@ -555,6 +446,7 @@
|
|||
.h-1\/4 { height: 25%; }
|
||||
.h-2\/4 { height: 50%; }
|
||||
.h-3\/4 { height: 75%; }
|
||||
/* =================================================================
|
||||
RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
|
||||
================================================================= */
|
||||
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@
|
|||
/* Borders & Dividers */
|
||||
--border-color: #1a2332;
|
||||
--border-color-light: #232d3a;
|
||||
--border-color-humane: #232d3a; /* For responsive borders */
|
||||
--divider-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Input & Form Elements */
|
||||
|
|
@ -303,17 +304,34 @@
|
|||
--mq-dashboard-enabled: (min-width: var(--breakpoint-2xl));
|
||||
|
||||
/* =================================================================
|
||||
Z-INDEX SCALE
|
||||
Z-INDEX SCALE - Systematic Layer System
|
||||
================================================================= */
|
||||
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-modal: 1050;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1070;
|
||||
--z-toast: 1080;
|
||||
/* Base layers (0-99) */
|
||||
--z-base: 0;
|
||||
--z-ground: 1;
|
||||
|
||||
/* Content layers (100-299) */
|
||||
--z-content: 100;
|
||||
--z-card: 110;
|
||||
--z-overlay: 200;
|
||||
|
||||
/* Fixed/Positioned elements (300-599) */
|
||||
--z-sticky: 300;
|
||||
--z-dropdown: 400;
|
||||
--z-fixed: 500;
|
||||
|
||||
/* Modals/Dialogs (600-799) */
|
||||
--z-modal-backdrop: 600;
|
||||
--z-modal: 700;
|
||||
--z-popover: 750;
|
||||
|
||||
/* Notifications/Feedback (800-999) */
|
||||
--z-tooltip: 800;
|
||||
--z-toast: 900;
|
||||
|
||||
/* Legacy compatibility */
|
||||
--z-modal-legacy: 1000; /* Keep for existing code */
|
||||
|
||||
/* =================================================================
|
||||
ICON SIZE SCALE
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue