Add app.py

app.py

@@ -0,0 +1,445 @@
+"""
+Secure Auth App with GitHub-backed Encrypted Storage
+Material Design UI with Gradio
+"""
+
+import gradio as gr
+import bcrypt
+from datetime import datetime
+from github_storage import read_users, write_users
+
+# Material Design CSS
+MATERIAL_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+* {
+    font-family: 'Roboto', sans-serif !important;
+}
+
+.gradio-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    min-height: 100vh !important;
+}
+
+.main-container {
+    max-width: 420px !important;
+    margin: 40px auto !important;
+    padding: 0 !important;
+}
+
+.auth-card {
+    background: white !important;
+    border-radius: 16px !important;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
+    padding: 40px !important;
+    margin: 20px !important;
+}
+
+.auth-card h1 {
+    color: #333 !important;
+    font-weight: 500 !important;
+    font-size: 28px !important;
+    text-align: center !important;
+    margin-bottom: 8px !important;
+}
+
+.auth-card p {
+    color: #666 !important;
+    text-align: center !important;
+    margin-bottom: 32px !important;
+}
+
+.auth-card input {
+    border: 2px solid #e0e0e0 !important;
+    border-radius: 8px !important;
+    padding: 14px 16px !important;
+    font-size: 16px !important;
+    transition: border-color 0.3s ease !important;
+}
+
+.auth-card input:focus {
+    border-color: #667eea !important;
+    outline: none !important;
+}
+
+.primary-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 14px 32px !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+}
+
+.secondary-btn {
+    background: transparent !important;
+    color: #667eea !important;
+    border: 2px solid #667eea !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+}
+
+.secondary-btn:hover {
+    background: #667eea !important;
+    color: white !important;
+}
+
+.error-msg {
+    background: #ffebee !important;
+    color: #c62828 !important;
+    padding: 12px 16px !important;
+    border-radius: 8px !important;
+    margin: 16px 0 !important;
+    font-size: 14px !important;
+}
+
+.success-msg {
+    background: #e8f5e9 !important;
+    color: #2e7d32 !important;
+    padding: 12px 16px !important;
+    border-radius: 8px !important;
+    margin: 16px 0 !important;
+    font-size: 14px !important;
+}
+
+.welcome-container {
+    text-align: center !important;
+}
+
+.welcome-container h1 {
+    font-size: 32px !important;
+    margin-bottom: 16px !important;
+}
+
+.welcome-email {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    font-size: 24px !important;
+    font-weight: 500 !important;
+    margin: 24px 0 !important;
+}
+
+.avatar-circle {
+    width: 100px !important;
+    height: 100px !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border-radius: 50% !important;
+    margin: 0 auto 24px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 40px !important;
+    color: white !important;
+    font-weight: 500 !important;
+}
+
+.link-btn {
+    color: #667eea !important;
+    background: none !important;
+    border: none !important;
+    cursor: pointer !important;
+    font-size: 14px !important;
+    text-decoration: underline !important;
+}
+"""
+
+def hash_password(password: str) -> str:
+    """Hash password using bcrypt."""
+    return bcrypt.hashpw(password.encode(), bcrypt.gensalt()).decode()
+
+def verify_password(password: str, hashed: str) -> bool:
+    """Verify password against hash."""
+    return bcrypt.checkpw(password.encode(), hashed.encode())
+
+def sign_up(email: str, password: str, confirm_password: str):
+    """Handle user registration."""
+    # Validation
+    if not email or not password or not confirm_password:
+        return (
+            gr.update(visible=True),   # sign_in_container
+            gr.update(visible=False),  # sign_up_container
+            gr.update(visible=False),  # welcome_container
+            "",                         # welcome_email
+            gr.update(value="⚠️ All fields are required", visible=True),  # message
+        )
+    
+    if "@" not in email or "." not in email:
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            "",
+            gr.update(value="⚠️ Please enter a valid email address", visible=True),
+        )
+    
+    if len(password) < 6:
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            "",
+            gr.update(value="⚠️ Password must be at least 6 characters", visible=True),
+        )
+    
+    if password != confirm_password:
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            "",
+            gr.update(value="⚠️ Passwords do not match", visible=True),
+        )
+    
+    try:
+        # Load existing users
+        data = read_users()
+        
+        # Check if user exists
+        if email.lower() in data.get("users", {}):
+            return (
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                "",
+                gr.update(value="⚠️ An account with this email already exists", visible=True),
+            )
+        
+        # Create new user
+        data.setdefault("users", {})
+        data["users"][email.lower()] = {
+            "password_hash": hash_password(password),
+            "created_at": datetime.utcnow().isoformat()
+        }
+        
+        # Save to GitHub
+        if write_users(data):
+            return (
+                gr.update(visible=False),
+                gr.update(visible=False),
+                gr.update(visible=True),
+                email,
+                gr.update(value="", visible=False),
+            )
+        else:
+            return (
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                "",
+                gr.update(value="⚠️ Failed to save user data. Please try again.", visible=True),
+            )
+    except Exception as e:
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            "",
+            gr.update(value=f"⚠️ Error: {str(e)}", visible=True),
+        )
+
+def sign_in(email: str, password: str):
+    """Handle user login."""
+    if not email or not password:
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            "",
+            gr.update(value="⚠️ Email and password are required", visible=True),
+        )
+    
+    try:
+        data = read_users()
+        user = data.get("users", {}).get(email.lower())
+        
+        if not user:
+            return (
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                "",
+                gr.update(value="⚠️ No account found with this email", visible=True),
+            )
+        
+        if not verify_password(password, user["password_hash"]):
+            return (
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                "",
+                gr.update(value="⚠️ Incorrect password", visible=True),
+            )
+        
+        # Success
+        return (
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=True),
+            email,
+            gr.update(value="", visible=False),
+        )
+    except Exception as e:
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            "",
+            gr.update(value=f"⚠️ Error: {str(e)}", visible=True),
+        )
+
+def show_sign_up():
+    """Switch to sign up view."""
+    return (
+        gr.update(visible=False),
+        gr.update(visible=True),
+        gr.update(visible=False),
+        "",
+        gr.update(value="", visible=False),
+    )
+
+def show_sign_in():
+    """Switch to sign in view."""
+    return (
+        gr.update(visible=True),
+        gr.update(visible=False),
+        gr.update(visible=False),
+        "",
+        gr.update(value="", visible=False),
+    )
+
+def logout():
+    """Handle logout."""
+    return (
+        gr.update(visible=True),
+        gr.update(visible=False),
+        gr.update(visible=False),
+        "",
+        gr.update(value="", visible=False),
+    )
+
+# Build the UI
+with gr.Blocks(css=MATERIAL_CSS, title="Secure Auth") as demo:
+    
+    # State for storing current user email
+    current_email = gr.State("")
+    
+    with gr.Column(elem_classes="main-container"):
+        
+        # Sign In Container
+        with gr.Column(visible=True, elem_classes="auth-card") as sign_in_container:
+            gr.HTML("<h1>Welcome Back</h1>")
+            gr.HTML("<p>Sign in to continue</p>")
+            
+            sign_in_email = gr.Textbox(
+                label="Email",
+                placeholder="Enter your email",
+                type="email"
+            )
+            sign_in_password = gr.Textbox(
+                label="Password",
+                placeholder="Enter your password",
+                type="password"
+            )
+            
+            message = gr.HTML("", visible=False, elem_classes="error-msg")
+            
+            sign_in_btn = gr.Button("Sign In", elem_classes="primary-btn")
+            
+            gr.HTML("<br>")
+            gr.HTML("<p style='text-align: center; color: #666;'>Don't have an account?</p>")
+            go_to_sign_up_btn = gr.Button("Create Account", elem_classes="secondary-btn")
+        
+        # Sign Up Container
+        with gr.Column(visible=False, elem_classes="auth-card") as sign_up_container:
+            gr.HTML("<h1>Create Account</h1>")
+            gr.HTML("<p>Sign up to get started</p>")
+            
+            sign_up_email = gr.Textbox(
+                label="Email",
+                placeholder="Enter your email",
+                type="email"
+            )
+            sign_up_password = gr.Textbox(
+                label="Password",
+                placeholder="Create a password (min 6 characters)",
+                type="password"
+            )
+            sign_up_confirm = gr.Textbox(
+                label="Confirm Password",
+                placeholder="Confirm your password",
+                type="password"
+            )
+            
+            sign_up_btn = gr.Button("Sign Up", elem_classes="primary-btn")
+            
+            gr.HTML("<br>")
+            gr.HTML("<p style='text-align: center; color: #666;'>Already have an account?</p>")
+            go_to_sign_in_btn = gr.Button("Sign In", elem_classes="secondary-btn")
+        
+        # Welcome Container
+        with gr.Column(visible=False, elem_classes="auth-card") as welcome_container:
+            gr.HTML("<div class='welcome-container'>")
+            gr.HTML("<div class='avatar-circle'>👋</div>")
+            gr.HTML("<h1>Welcome!</h1>")
+            gr.HTML("<p>You're successfully signed in as:</p>")
+            welcome_email_display = gr.HTML("<div class='welcome-email'></div>")
+            gr.HTML("</div>")
+            
+            gr.HTML("<br><br>")
+            logout_btn = gr.Button("Sign Out", elem_classes="secondary-btn")
+    
+    # Event handlers
+    outputs = [sign_in_container, sign_up_container, welcome_container, current_email, message]
+    
+    sign_in_btn.click(
+        sign_in,
+        inputs=[sign_in_email, sign_in_password],
+        outputs=outputs
+    )
+    
+    sign_up_btn.click(
+        sign_up,
+        inputs=[sign_up_email, sign_up_password, sign_up_confirm],
+        outputs=outputs
+    )
+    
+    go_to_sign_up_btn.click(
+        show_sign_up,
+        outputs=outputs
+    )
+    
+    go_to_sign_in_btn.click(
+        show_sign_in,
+        outputs=outputs
+    )
+    
+    logout_btn.click(
+        logout,
+        outputs=outputs
+    )
+    
+    # Update welcome email display when current_email changes
+    current_email.change(
+        lambda email: f"<div class='welcome-email'>{email}</div>",
+        inputs=[current_email],
+        outputs=[welcome_email_display]
+    )
+
+if __name__ == "__main__":
+    demo.launch()