fix: hide sidebar and chat UI on login screen using session_state

TalkHeal.py

@@ -1,69 +1,49 @@
 import streamlit as st
-from auth.auth_utils import init_db, register_user, authenticate_user
+from auth.auth_utils import init_db
+from components.login_page import show_login_page
 
 st.set_page_config(page_title="TalkHeal", page_icon="💬", layout="wide")
 
+# --- DB Initialization ---
 if "db_initialized" not in st.session_state:
     init_db()
     st.session_state["db_initialized"] = True
 
+# --- Auth State Initialization ---
 if "authenticated" not in st.session_state:
     st.session_state.authenticated = False
 if "show_signup" not in st.session_state:
     st.session_state.show_signup = False
 
-def show_login_ui():
-    st.subheader("🔐 Login")
-    email = st.text_input("Email", key="login_email")
-    password = st.text_input("Password", type="password", key="login_password")
-    if st.button("Login"):
-        success, user = authenticate_user(email, password)
-        if success:
-            st.session_state.authenticated = True
-            # Set user_email and user_name separately for journaling page access
-            st.session_state.user_email = user["email"]
-            st.session_state.user_name = user["name"]
+# --- LOGIN PAGE ---
+if not st.session_state.authenticated:
+    show_login_page()
+    st.stop()
+
+# --- TOP RIGHT BUTTONS: THEME TOGGLE & LOGOUT ---
+if st.session_state.get("authenticated", False):
+    col_spacer, col_theme, col_logout = st.columns([5, 0.5, 0.7])
+    with col_spacer:
+        pass  # empty spacer to push buttons right
+    with col_theme:
+        is_dark = st.session_state.get('dark_mode', False)
+        if st.button("🌙" if is_dark else "☀️", key="top_theme_toggle", help="Toggle Light/Dark Mode", use_container_width=True):
+            st.session_state.dark_mode = not is_dark
+            st.session_state.theme_changed = True
             st.rerun()
-        else:
-            st.warning("Invalid email or password.")
-    st.markdown("Don't have an account? [Sign up](#)", unsafe_allow_html=True)
-    if st.button("Go to Sign Up"):
-        st.session_state.show_signup = True
-        st.rerun()
-
-def show_signup_ui():
-    st.subheader("📝 Sign Up")
-    name = st.text_input("Name", key="signup_name")
-    email = st.text_input("Email", key="signup_email")
-    password = st.text_input("Password", type="password", key="signup_password")
-    if st.button("Sign Up"):
-        success, message = register_user(name, email, password)
-        if success:
-            st.success("Account created! Please log in.")
-            st.session_state.show_signup = False
+    with col_logout:
+        if st.button("Logout", key="logout_btn", use_container_width=True):
+            for key in ["authenticated", "user_email", "user_name", "show_signup"]:
+                if key in st.session_state:
+                    del st.session_state[key]
             st.rerun()
-        else:
-            st.error(message)
-    st.markdown("Already have an account? [Login](#)", unsafe_allow_html=True)
-    if st.button("Go to Login"):
-        st.session_state.show_signup = False
-        st.rerun()
 
-if not st.session_state.authenticated:
-    if st.session_state.show_signup:
-        show_signup_ui()
-    else:
-        show_login_ui()
-else:
+# --- MAIN UI (only after login) ---
+header_col1, header_col2, header_col3 = st.columns([6, 1, 1])
+with header_col1:
     st.title(f"Welcome to TalkHeal, {st.session_state.user_name}! 💬")
     st.markdown("Navigate to other pages from the sidebar.")
 
-    if st.button("Logout"):
-        for key in ["authenticated", "user_email", "user_name", "show_signup"]:
-            if key in st.session_state:
-                del st.session_state[key]
-        st.rerun()
-
 import google.generativeai as genai
 from core.utils import save_conversations, load_conversations
 from core.config import configure_gemini, PAGE_CONFIG
@@ -170,4 +150,20 @@ def get_tone_prompt():
     }
     setTimeout(scrollToBottom, 100);
 </script>
-""", unsafe_allow_html=True) 
+""", unsafe_allow_html=True)
+
+st.markdown("""
+<style>
+header[data-testid="stHeader"] button {
+    font-size: 14px !important;
+    border-radius: 50% !important;
+    padding: 0.5em !important;
+    width: 40px !important;
+    height: 40px !important;
+}
+header[data-testid="stHeader"] span, header[data-testid="stHeader"] div {
+    font-size: 16px !important;
+    overflow: hidden !important;
+}
+</style>
+""", unsafe_allow_html=True)

components/header.py

@@ -2,38 +2,12 @@
 
 def render_header():
     with st.container():
-        # Top bar with hamburger menu and theme toggle
-        col1, col2, col3 = st.columns([0.1, 0.8, 0.1])
-
-        with col1:
-            if st.button("☰", key="top_hamburger_menu", help="Toggle Sidebar", use_container_width=True):
-                if st.session_state.sidebar_state == "expanded":
-                    st.session_state.sidebar_state = "collapsed"
-                else:
-                    st.session_state.sidebar_state = "expanded"
-                st.rerun()
-
-        with col3:
-            is_dark = st.session_state.get('dark_mode', False)
-            if st.button("🌙" if is_dark else "☀️", key="top_theme_toggle", help="Toggle Light/Dark Mode", use_container_width=True):
-                st.session_state.dark_mode = not is_dark
-                st.session_state.theme_changed = True
-                st.rerun()
-
-        st.markdown("""
-        <div class="main-header">
-            <h1>TalkHeal</h1>
-            <p>Your Mental Health Companion 💙</p>
-        </div>
-        """, unsafe_allow_html=True)
-        ## Commented out this part of the header because the 'emergency button' functionality is quite similar, hence causing redundancy. ##
-
-        # with st.expander("📍 Find Help Nearby"):
-        #     location_input = st.text_input("Enter your city", key="header_location_search")
-        #     if st.button("🔍 Search Centers", key="header_search_nearby"):
-        #         if location_input:
-        #             search_url = f"https://www.google.com/maps/search/mental+health+centers+{location_input.replace(' ', '+')}"
-        #             st.markdown(f'<a href="{search_url}" target="_blank">🗺️ View Mental Health Centers Near {location_input}</a>', unsafe_allow_html=True)
-        #             st.success("Opening search results in a new tab...")
-        #         else:
-        #             st.warning("Please enter a city name")
+        # Only one column for header
+        column = st.columns(1)[0]
+        with column:
+            st.markdown("""
+            <div class="main-header" style="text-align:center;">
+                <h1 style="margin-bottom:0;">TalkHeal</h1>
+                <p style="margin-top:0;">Your Mental Health Companion 💙</p>
+            </div>
+            """, unsafe_allow_html=True)

components/login_page.py

@@ -0,0 +1,72 @@
+import streamlit as st
+from auth.auth_utils import register_user, authenticate_user
+
+def show_login_page():
+    st.markdown(
+        """
+        <style>
+        html, body {
+            height: 100%;
+            min-height: 100vh;
+            background: url('assets/pink.png') no-repeat center center fixed !important;
+            background-size: cover !important;
+        }
+        [data-testid="stSidebar"] {display: none;}
+        .block-container {
+            background: rgba(255,255,255,0.15);
+            border-radius: 20px;
+            max-width: 400px;
+            margin: auto;
+            padding-top: 80px;
+        }
+        .switch-link {
+            color: #e75480;
+            font-weight: bold;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+        </style>
+        """, unsafe_allow_html=True
+    )
+
+    # Use session state to switch between login and signup
+    if "show_signup" not in st.session_state:
+        st.session_state.show_signup = False
+
+    if st.session_state.show_signup:
+        st.subheader("📝 Sign Up")
+        name = st.text_input("Name", key="signup_name")
+        email = st.text_input("Email", key="signup_email")
+        password = st.text_input("Password", type="password", key="signup_password")
+        if st.button("Sign Up"):
+            success, message = register_user(name, email, password)
+            if success:
+                st.success("Account created! Welcome.")
+                st.session_state.authenticated = True
+                st.session_state.user_email = email
+                st.session_state.user_name = name
+                st.session_state.show_signup = False
+                st.rerun()
+            else:
+                st.error(message)
+        # Only this button for switching to login
+        if st.button("Already have an account? Login"):
+            st.session_state.show_signup = False
+            st.rerun()
+    else:
+        st.subheader("🔐 Login")
+        email = st.text_input("Email", key="login_email")
+        password = st.text_input("Password", type="password", key="login_password")
+        if st.button("Login"):
+            success, user = authenticate_user(email, password)
+            if success:
+                st.session_state.authenticated = True
+                st.session_state.user_email = user["email"]
+                st.session_state.user_name = user["name"]
+                st.rerun()
+            else:
+                st.warning("Invalid email or password.")
+        # Only this button for switching to signup
+        if st.button("Don't have an account? Sign up"):
+            st.session_state.show_signup = True
+            st.rerun()

streamlit.toml

@@ -1,2 +1,2 @@
-GEMINI_API_KEY = "AIzaSyDsLJgA58LvgFtnUdVBLFb08GZQV0wXYjQ"
+GEMINI_API_KEY = "GEMINI_API_KEY"