raven-login System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the "raven-login" project. This project aims to create a replica of the Citibank login page, including a username and password area, followed by an additional verification form.

System Overview

The "raven-login" project is designed to replicate the login experience of the Citibank website. The system will include a login page for user authentication and a subsequent form for additional user verification. The project will focus on replicating the visual elements of the Citibank login page while ensuring a seamless user experience.

Functional Requirements

• As a User, I should be able to enter my username and password on the login page.
• As a User, I should be able to submit my login credentials for authentication.
• As a User, I should be redirected to a form page after successful login.
• As a User, I should be able to enter my date of birth, first name, and last name for additional verification on the form page.
• As a User, I should receive feedback if my login or verification details are incorrect.

User Personas

• User: A person who needs to log in using their username and password and complete additional verification by providing personal details.

Core User Flows

1. User navigates to the login page -> enters username and password -> submits credentials -> if successful, redirected to verification form -> enters date of birth, first name, and last name -> submits form for additional verification.

Visuals Colors and Theme

• primary: #004B87 (Deep Blue)
• primary_light: #5A9BD4 (Light Blue)
• secondary: #FF6F61 (Coral)
• accent: #FFD700 (Gold)
• highlight: #FFA500 (Orange)
• bg: #F0F0F0 (Light Grey)
• surface: rgba(255, 255, 255, 0.9) (White)
• text: #333333 (Dark Grey)
• text_muted: #777777 (Muted Grey)
• border: rgba(0, 75, 135, 0.2) (Light Blue)

Signature Design Concept

The homepage will feature an interactive "Digital Vault" concept. Upon landing, users will see a 3D vault door that rotates open as they scroll down, revealing the login form inside. This vault animation will be created using @react-three/fiber and @react-three/drei for a realistic 3D effect. As users hover over the login fields, subtle light reflections will animate across the vault's surface, enhancing the secure and premium feel of the site.

Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model. The vault door will create a layered depth effect as users scroll, with the login form appearing naturally within the vault. This approach will provide a visually rich first impression, emphasizing security and sophistication.

Non-Functional Requirements

• The system should ensure secure handling of user credentials and personal information.
• The login and verification processes must be completed within 5 seconds to ensure a smooth user experience.
• The system should be compatible with major web browsers and responsive on mobile devices.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using alembic for migrations
• Local orchestration: Docker, docker-compose

Assumptions and Constraints

• The project will replicate only the first two pages of the Citibank login process.
• The visual elements will be closely aligned with the Citibank login page for consistency.
• The system will not include the final pop-up integration as per the user's request.

Glossary

• User: An individual accessing the login system.
• Verification Form: A form requiring additional personal information for user verification.
• Parallax: A design technique where background images move slower than foreground images, creating a sense of depth.