2025-08-01 12:39:25 +07:00
|
|
|
@tailwind base;
|
|
|
|
|
@tailwind components;
|
|
|
|
|
@tailwind utilities;
|
feat(auth): implement multi-step authentication flow with UI
This commit replaces the placeholder login page with a comprehensive, multi-step authentication system. It introduces a new `AuthPage` that orchestrates the user flow between login, signup, and OTP verification.
- **Login Form**: Supports both email and WhatsApp credentials, with input validation and API integration.
- **Signup Form**: Includes fields for full name, email, and WhatsApp, with real-time password strength validation.
- **OTP Form**: Provides a view for users to verify their account after signup.
- **UI/UX**: The entire authentication experience is restyled with a new background, Poppins font, custom brand colors, and improved form components for a polished look and feel.
- **Dependencies**: Adds `axios` for handling API requests to the backend.
BREAKING CHANGE: The `LoginPage` component has been deleted and is replaced by the new `AuthPage` component. All references to `LoginPage` must be updated.
2025-08-02 15:26:12 +07:00
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
@apply bg-login-bg bg-cover bg-center font-sans;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Webkit Autofill Override */
|
|
|
|
|
input:-webkit-autofill,
|
|
|
|
|
input:-webkit-autofill:hover,
|
|
|
|
|
input:-webkit-autofill:focus,
|
|
|
|
|
input:-webkit-autofill:active {
|
|
|
|
|
-webkit-text-fill-color: #fff !important;
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.10) inset !important;
|
|
|
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-03 13:03:32 +07:00
|
|
|
|
|
|
|
|
.typing-indicator {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.typing-indicator span {
|
|
|
|
|
height: 8px;
|
|
|
|
|
width: 8px;
|
|
|
|
|
background-color: #9E9E9E;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin: 0 2px;
|
|
|
|
|
animation: typing-wave 1.4s infinite ease-in-out both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.typing-indicator span:nth-child(1) {
|
|
|
|
|
animation-delay: -0.32s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.typing-indicator span:nth-child(2) {
|
|
|
|
|
animation-delay: -0.16s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes typing-wave {
|
|
|
|
|
0%, 80%, 100% {
|
|
|
|
|
transform: scale(0);
|
|
|
|
|
}
|
|
|
|
|
40% {
|
|
|
|
|
transform: scale(1.0);
|
|
|
|
|
}
|
|
|
|
|
}
|