...

app/auth.py

@@ -2,7 +2,6 @@ import os
 import base64
 import streamlit as st
 from app.db import supabase
-import streamlit.components.v1 as components
 
 
 def auth_view():
@@ -11,7 +10,6 @@ def auth_view():
     left, center, right = st.columns([1, 2, 1])
     with center:
         # Header: smaller PNP logo and centered title
-        # Path logo
         logo_path = os.path.join("assets", "pnp-logo.png")
 
         # Convert ke base64 biar bisa di-embed langsung
@@ -32,91 +30,15 @@ def auth_view():
             unsafe_allow_html=True
         )
 
-        # --- Hash to Query Parameter Migration ---
-        # Use more compatible approach for Streamlit
-        st.markdown(
-            """
-            <script>
-            // Streamlit-compatible hash migration
-            if (typeof window !== 'undefined') {
-                (function() {
-                    try {
-                        var hash = window.location.hash;
-                        var hasParams = hash && hash.length > 1;
-                        var migrated = sessionStorage ? sessionStorage.getItem('hash_migrated') : null;
-                        
-                        if (hasParams && !migrated) {
-                            // Simple string parsing to avoid URL constructor issues
-                            var hashContent = hash.substring(1);
-                            var pairs = hashContent.split('&');
-                            var queryParams = new URLSearchParams(window.location.search);
-                            var hasAuthParams = false;
-                            
-                            for (var i = 0; i < pairs.length; i++) {
-                                var pair = pairs[i].split('=');
-                                if (pair.length === 2) {
-                                    var key = decodeURIComponent(pair[0]);
-                                    var value = decodeURIComponent(pair[1]);
-                                    
-                                    // Check for Supabase auth parameters
-                                    if (key === 'access_token' || key === 'type' || key === 'refresh_token') {
-                                        hasAuthParams = true;
-                                    }
-                                    
-                                    queryParams.set(key, value);
-                                }
-                            }
-                            
-                            if (hasAuthParams) {
-                                if (sessionStorage) {
-                                    sessionStorage.setItem('hash_migrated', 'true');
-                                }
-                                
-                                var newUrl = window.location.origin + window.location.pathname;
-                                if (queryParams.toString()) {
-                                    newUrl += '?' + queryParams.toString();
-                                }
-                                
-                                window.location.replace(newUrl);
-                            }
-                        }
-                    } catch (e) {
-                        console && console.log && console.log('Hash migration error:', e);
-                    }
-                })();
-            }
-            </script>
-            """,
-            unsafe_allow_html=True
-        )
-
-        # Clear migration flag after successful page load with query params
-        try:
-            qp = st.query_params if hasattr(st, 'query_params') else st.experimental_get_query_params()
-            get_q = lambda k: qp.get(k, None) if hasattr(st, 'query_params') else (qp.get(k, [None])[0] if isinstance(qp.get(k, None), list) else qp.get(k, None))
-            
-            # If we have recovery parameters, clear the migration flag
-            if get_q("type") == "recovery":
-                st.markdown(
-                    """
-                    <script>
-                    if (typeof sessionStorage !== 'undefined') {
-                        sessionStorage.removeItem('hash_migrated');
-                    }
-                    </script>
-                    """,
-                    unsafe_allow_html=True
-                )
-        except Exception as e:
-            pass  # Silently handle errors in production
-
         # Read query params for recovery flow
         try:
-            qp = st.query_params if hasattr(st, 'query_params') else st.experimental_get_query_params()
-            get_q = lambda k: qp.get(k, None) if hasattr(st, 'query_params') else (qp.get(k, [None])[0] if isinstance(qp.get(k, None), list) else qp.get(k, None))
+            if hasattr(st, 'query_params'):
+                qp = st.query_params
+                get_q = lambda k: qp.get(k, None)
+            else:
+                qp = st.experimental_get_query_params()
+                get_q = lambda k: (qp.get(k, [None])[0] if isinstance(qp.get(k, None), list) else qp.get(k, None))
         except Exception:
-            # Fallback for older Streamlit versions
-            import urllib.parse as urlparse
             qp = {}
             get_q = lambda k: None
 
@@ -124,34 +46,127 @@ def auth_view():
         access_token = get_q("access_token")
         refresh_token = get_q("refresh_token")
         
-        # Debug info (remove in production)
-        if os.getenv("DEBUG_MODE") == "true" and st.checkbox("Show debug info"):
-            st.write("Query params:", dict(qp) if hasattr(qp, 'items') else qp)
-            st.write("Type:", q_type)
-            st.write("Has access token:", bool(access_token))
-            st.write("Has refresh token:", bool(refresh_token))
+        # Check if user is coming from email but params are in wrong format
+        # Tampilkan helper hanya jika tidak ada query params yang valid
+        if not q_type and not access_token:
+            st.markdown("---")
+            st.info("Datang dari link email reset password? Jika halaman reset tidak muncul otomatis, klik tombol di bawah:")
+            
+            col1, col2 = st.columns([1, 1])
+            with col1:
+                if st.button("Saya dari Link Email", use_container_width=True, help="Klik jika Anda mengakses dari link email reset password"):
+                    st.info("Instruksi sederhana:")
+                    st.markdown("""
+                    1. **Lihat URL di address bar browser Anda**
+                    2. **Ganti tanda `#` dengan `?`** (jika ada)
+                    3. **Tekan Enter** untuk reload halaman
+                    
+                    **Contoh:**
+                    - Dari: `app.com/#access_token=abc`  
+                    - Jadi: `app.com/?access_token=abc`
+                    """)
+                    
+            with col2:
+                if st.button("Butuh Bantuan", use_container_width=True):
+                    st.markdown("""
+                    **Masalah umum dan solusi:**
+                    
+                    **Link tidak berfungsi?**  
+                    Coba minta link reset password baru
+                    
+                    **Halaman kosong setelah klik link?**  
+                    Ganti `#` dengan `?` di URL browser
+                    
+                    **Masih tidak bisa?**  
+                    Gunakan tab "Forgot Password" di bawah
+                    """)
 
+        # Debug info untuk development (hanya tampil jika ada query params)
+        if os.getenv("DEBUG_MODE") == "true" and (q_type or access_token):
+            with st.expander("Debug Info", expanded=False):
+                st.write("Query params:", dict(qp) if hasattr(qp, 'items') else qp)
+                st.write("Type:", q_type)
+                st.write("Has access token:", bool(access_token))
+                st.write("Has refresh token:", bool(refresh_token))
+
+        # RECOVERY MODE - Reset Password
         if q_type == "recovery":
-            st.success("🔑 Halaman Reset Password")
+            st.success("Halaman Reset Password")
             st.info("Silakan masukkan password baru Anda di bawah ini.")
             
+            # Validasi token availability
+            if not access_token or not refresh_token:
+                st.error("Token reset password tidak valid atau sudah expired.")
+                st.markdown("**Kemungkinan penyebab:**")
+                st.markdown("- Link sudah pernah digunakan sebelumnya")
+                st.markdown("- Link sudah expired (biasanya berlaku 1 jam)")
+                st.markdown("- URL tidak lengkap")
+                
+                st.info("**Solusi:** Minta link reset password yang baru menggunakan form di bawah.")
+                
+                if st.button("Minta Link Reset Baru", use_container_width=True):
+                    # Clear query params dan redirect ke forgot password
+                    if hasattr(st, 'query_params'):
+                        params_to_clear = ['type', 'access_token', 'refresh_token', 'expires_in', 'expires_at', 'token_type']
+                        for param in params_to_clear:
+                            if param in st.query_params:
+                                del st.query_params[param]
+                    st.rerun()
+                return
+            
+            # Form untuk reset password
             with st.form("reset_password_form", clear_on_submit=False):
                 st.markdown("### Set Password Baru")
                 new_password = st.text_input("Password Baru", type="password", help="Minimal 6 karakter")
                 confirm_password = st.text_input("Konfirmasi Password Baru", type="password")
-                submit_reset = st.form_submit_button(" Update Password", use_container_width=True)
+                
+                # Password strength indicator
+                if new_password:
+                    strength_score = 0
+                    feedback = []
+                    
+                    if len(new_password) >= 6:
+                        strength_score += 1
+                    else:
+                        feedback.append("Minimal 6 karakter")
+                    
+                    if any(c.isupper() for c in new_password):
+                        strength_score += 1
+                    else:
+                        feedback.append("Gunakan huruf besar")
+                    
+                    if any(c.islower() for c in new_password):
+                        strength_score += 1
+                    else:
+                        feedback.append("Gunakan huruf kecil")
+                    
+                    if any(c.isdigit() for c in new_password):
+                        strength_score += 1
+                    else:
+                        feedback.append("Gunakan angka")
+                    
+                    # Display strength
+                    if strength_score <= 1:
+                        st.error(f"Password lemah: {', '.join(feedback)}")
+                    elif strength_score <= 2:
+                        st.warning(f"Password cukup: {', '.join(feedback)}")
+                    elif strength_score <= 3:
+                        st.info("Password baik")
+                    else:
+                        st.success("Password sangat kuat!")
+                
+                submit_reset = st.form_submit_button("Update Password", use_container_width=True)
                 
             if submit_reset:
+                # Validasi input
                 if not new_password:
-                    st.error(" Password tidak boleh kosong.")
+                    st.error("Password tidak boleh kosong.")
                 elif len(new_password) < 6:
-                    st.error(" Password minimal 6 karakter.")
+                    st.error("Password minimal 6 karakter.")
                 elif new_password != confirm_password:
-                    st.error(" Konfirmasi password tidak sama.")
-                elif not access_token or not refresh_token:
-                    st.error(" Token pemulihan tidak valid. Silakan klik ulang tautan dari email.")
-                    st.info("💡 Tip: Pastikan Anda mengklik tautan langsung dari email tanpa menyalin-paste.")
+                    st.error("Konfirmasi password tidak sama.")
                 else:
+                    # Proses update password
                     try:
                         with st.spinner("Mengupdate password..."):
                             # Set session dengan token dari URL
@@ -161,121 +176,90 @@ def auth_view():
                             result = supabase.auth.update_user({"password": new_password})
                             
                             if result:
-                                st.success(" Password berhasil diubah!")
-                                st.info("🔄 Silakan login dengan password baru Anda.")
+                                st.success("Password berhasil diubah!")
+                                st.success("Sekarang Anda dapat login dengan password baru!")
+                                
+                                # Show success message with countdown
+                                placeholder = st.empty()
+                                for i in range(5, 0, -1):
+                                    placeholder.info(f"Halaman akan kembali ke login dalam {i} detik...")
+                                    import time
+                                    time.sleep(1)
+                                
+                                # Clear query params dan redirect
+                                if hasattr(st, 'query_params'):
+                                    params_to_clear = ['type', 'access_token', 'refresh_token', 'expires_in', 'expires_at', 'token_type']
+                                    for param in params_to_clear:
+                                        if param in st.query_params:
+                                            del st.query_params[param]
                                 
-                                # Clear query parameters setelah sukses
-                                st.markdown(
-                                    """
-                                    <script>
-                                    if (typeof window !== 'undefined') {
-                                        setTimeout(function() {
-                                            try {
-                                                var params = ['type', 'access_token', 'refresh_token', 'expires_in', 'expires_at', 'token_type'];
-                                                var search = new URLSearchParams(window.location.search);
-                                                var changed = false;
-                                                
-                                                for (var i = 0; i < params.length; i++) {
-                                                    if (search.has(params[i])) {
-                                                        search.delete(params[i]);
-                                                        changed = true;
-                                                    }
-                                                }
-                                                
-                                                if (changed) {
-                                                    var newUrl = window.location.pathname;
-                                                    if (search.toString()) {
-                                                        newUrl += '?' + search.toString();
-                                                    }
-                                                    window.history.replaceState({}, document.title, newUrl);
-                                                }
-                                                
-                                                if (typeof sessionStorage !== 'undefined') {
-                                                    sessionStorage.removeItem('hash_migrated');
-                                                }
-                                                
-                                                // Optional: reload page to show login form
-                                                setTimeout(function() { window.location.reload(); }, 2000);
-                                            } catch (e) {
-                                                console && console.log && console.log('Cleanup error:', e);
-                                                window.location.reload();
-                                            }
-                                        }, 1000);
-                                    }
-                                    </script>
-                                    """,
-                                    unsafe_allow_html=True
-                                )
+                                placeholder.empty()
+                                st.rerun()
                             else:
-                                st.error(" Gagal mengubah password. Silakan coba lagi.")
+                                st.error("Gagal mengubah password. Silakan coba lagi.")
                                 
                     except Exception as e:
-                        st.error(f" Error: {str(e)}")
-                        st.info("💡 Jika masalah berlanjut, minta tautan reset password baru.")
+                        st.error(f"Error: {str(e)}")
+                        st.info("Jika masalah berlanjut, minta link reset password baru.")
             
-            # Tampilkan tombol untuk kembali ke login
-            if st.button("← Kembali ke Login", use_container_width=True):
-                # Clear query params and reload
-                st.markdown(
-                    """
-                    <script>
-                    if (typeof window !== 'undefined') {
-                        try {
-                            var params = ['type', 'access_token', 'refresh_token', 'expires_in', 'expires_at', 'token_type'];
-                            var search = new URLSearchParams(window.location.search);
-                            
-                            for (var i = 0; i < params.length; i++) {
-                                search.delete(params[i]);
-                            }
-                            
-                            var newUrl = window.location.pathname;
-                            if (search.toString()) {
-                                newUrl += '?' + search.toString();
-                            }
-                            
-                            window.history.replaceState({}, document.title, newUrl);
-                            
-                            if (typeof sessionStorage !== 'undefined') {
-                                sessionStorage.removeItem('hash_migrated');
-                            }
-                            
-                            window.location.reload();
-                        } catch (e) {
-                            window.location.href = window.location.pathname;
-                        }
-                    }
-                    </script>
-                    """,
-                    unsafe_allow_html=True
-                )
+            # Tombol alternatif
+            st.markdown("---")
+            col1, col2 = st.columns([1, 1])
+            with col1:
+                if st.button("Kembali ke Login", use_container_width=True):
+                    if hasattr(st, 'query_params'):
+                        params_to_clear = ['type', 'access_token', 'refresh_token', 'expires_in', 'expires_at', 'token_type']
+                        for param in params_to_clear:
+                            if param in st.query_params:
+                                del st.query_params[param]
+                    st.rerun()
+            
+            with col2:
+                if st.button("Minta Link Baru", use_container_width=True):
+                    if hasattr(st, 'query_params'):
+                        params_to_clear = ['type', 'access_token', 'refresh_token', 'expires_in', 'expires_at', 'token_type']
+                        for param in params_to_clear:
+                            if param in st.query_params:
+                                del st.query_params[param]
+                    st.rerun()
             
             return  # Exit early, don't show other tabs
 
-        # Auth tabs inside wrapper (only show when not in recovery mode)
-        tab_login, tab_register, tab_forgot = st.tabs([" Login", "📝 Register", "🔑 Forgot Password"])
+        # NORMAL MODE - Login/Register/Forgot Password Tabs
+        tab_login, tab_register, tab_forgot = st.tabs(["Login", "Register", "Forgot Password"])
 
         with tab_login:
-            st.markdown("### Masuk ke Akun Anda")
+            st.markdown("### Selamat Datang Kembali")
+            
+            # Quick tips untuk login
+            with st.expander("Tips Login", expanded=False):
+                st.markdown("""
+                - Pastikan email dan password sudah benar
+                - Jika lupa password, gunakan tab "Forgot Password"
+                - Untuk akun baru, gunakan tab "Register"
+                """)
+            
             with st.form("login_form"):
-                email = st.text_input(" Email", placeholder="contoh@email.com")
-                password = st.text_input(" Password", type="password")
-                submitted = st.form_submit_button(" Login", use_container_width=True)
+                email = st.text_input("Email", placeholder="contoh@email.com")
+                password = st.text_input("Password", type="password")
+                remember_me = st.checkbox("Ingat saya")
+                submitted = st.form_submit_button("Login", use_container_width=True)
                 
             if submitted:
                 if not email or not password:
-                    st.error(" Email dan password harus diisi.")
+                    st.error("Email dan password harus diisi.")
                     return
                     
                 # Demo password fallback
                 shared_pw = os.getenv("APP_DEMO_PASSWORD")
                 if shared_pw and password == shared_pw:
                     st.session_state["user"] = {"id": "demo-user", "email": email or "demo@example.com"}
-                    st.success(" Login demo berhasil")
+                    st.success("Login demo berhasil")
                     st.rerun()
                     return
                 
                 try:
-                    with st.spinner("Logging in..."):
+                    with st.spinner("Memverifikasi kredensial..."):
                         auth_res = supabase.auth.sign_in_with_password({
                             "email": email,
                             "password": password,
@@ -289,33 +273,52 @@ def auth_view():
                                     "access_token": getattr(session_obj, "access_token", None),
                                     "refresh_token": getattr(session_obj, "refresh_token", None),
                                 }
-                            st.success(" Login berhasil!")
+                            st.success("Login berhasil! Selamat datang!")
                             st.rerun()
                         else:
-                            st.error(" Email atau password salah.")
+                            st.error("Email atau password salah.")
+                            st.info("Cek kembali email dan password Anda, atau gunakan 'Forgot Password' jika lupa.")
                 except Exception as e:
-                    st.error(f" Gagal login: {str(e)}")
+                    st.error(f"Gagal login: {str(e)}")
 
         with tab_register:
-            st.markdown("### Buat Akun Baru")
-            st.caption(" Anda akan menerima email konfirmasi setelah registrasi.")
+            st.markdown("### Daftar Akun Baru")
+            st.caption("Buat akun untuk mulai menggunakan PNP Bot")
+            
             with st.form("register_form"):
-                r_email = st.text_input(" Email", key="reg_email", placeholder="contoh@email.com")
-                r_password = st.text_input(" Password", type="password", key="reg_password", help="Minimal 6 karakter")
-                r_password2 = st.text_input(" Konfirmasi Password", type="password", key="reg_password2")
-                submitted_r = st.form_submit_button("📝 Daftar", use_container_width=True)
+                r_email = st.text_input("Email", key="reg_email", placeholder="contoh@email.com")
+                r_password = st.text_input("Password", type="password", key="reg_password", help="Minimal 6 karakter, gunakan kombinasi huruf dan angka")
+                r_password2 = st.text_input("Konfirmasi Password", type="password", key="reg_password2")
+                
+                # Password strength untuk register juga
+                if r_password:
+                    strength_score = 0
+                    if len(r_password) >= 6: strength_score += 1
+                    if any(c.isupper() for c in r_password): strength_score += 1
+                    if any(c.islower() for c in r_password): strength_score += 1
+                    if any(c.isdigit() for c in r_password): strength_score += 1
+                    
+                    if strength_score <= 1:
+                        st.error("Password terlalu lemah")
+                    elif strength_score <= 2:
+                        st.warning("Password cukup")
+                    elif strength_score <= 3:
+                        st.info("Password baik")
+                    else:
+                        st.success("Password sangat kuat!")
+                
+                submitted_r = st.form_submit_button("Daftar Sekarang", use_container_width=True)
                 
             if submitted_r:
                 if not r_email or not r_password:
-                    st.error(" Email dan password harus diisi.")
+                    st.error("Email dan password harus diisi.")
                 elif len(r_password) < 6:
-                    st.error(" Password minimal 6 karakter.")
+                    st.error("Password minimal 6 karakter.")
                 elif r_password != r_password2:
-                    st.error(" Konfirmasi password tidak sama.")
+                    st.error("Konfirmasi password tidak sama.")
                 else:
                     try:
                         with st.spinner("Mendaftarkan akun..."):
-                            # Set redirect URL dengan prioritas yang lebih clear
                             redirect_url = os.getenv("SUPABASE_EMAIL_REDIRECT")
                             if not redirect_url:
                                 redirect_url = os.getenv("NEXT_PUBLIC_SITE_URL", "https://yozora721-pnp-chatbot-v1.hf.space/")
@@ -325,25 +328,40 @@ def auth_view():
                                 "password": r_password,
                                 "options": {"email_redirect_to": redirect_url}
                             })
-                            st.success(" Registrasi berhasil!")
-                            st.info(" Silakan cek email untuk konfirmasi akun.")
+                            st.success("Registrasi berhasil!")
+                            st.info("Email konfirmasi telah dikirim ke " + r_email)
+                            st.info("**Langkah selanjutnya:**")
+                            st.info("1. Buka email Anda")
+                            st.info("2. Klik link konfirmasi")
+                            st.info("3. Kembali ke halaman ini untuk login")
+                            st.warning("Periksa folder spam jika email tidak ditemukan dalam 5 menit")
                     except Exception as e:
-                        st.error(f" Gagal registrasi: {str(e)}")
+                        st.error(f"Gagal registrasi: {str(e)}")
 
         with tab_forgot:
             st.markdown("### Reset Password")
-            st.caption(" Kami akan mengirim tautan reset password ke email Anda.")
+            st.caption("Masukkan email Anda untuk menerima link reset password")
+            
+            # Instruksi yang jelas tanpa copy-paste
+            st.info("""
+            **Cara kerja reset password:**
+            1. Masukkan email dan klik "Kirim Link Reset"
+            2. Buka email dari PNP Bot
+            3. Klik link di email (link akan membuka halaman ini)
+            4. Jika halaman reset tidak muncul, ganti `#` dengan `?` di URL browser
+            5. Set password baru Anda
+            """)
+            
             with st.form("forgot_form"):
-                f_email = st.text_input(" Email", key="forgot_email", placeholder="contoh@email.com")
-                submitted_f = st.form_submit_button(" Kirim Link Reset", use_container_width=True)
+                f_email = st.text_input("Email", key="forgot_email", placeholder="contoh@email.com")
+                submitted_f = st.form_submit_button("Kirim Link Reset", use_container_width=True)
                 
             if submitted_f:
                 if not f_email:
-                    st.error(" Email harus diisi.")
+                    st.error("Email harus diisi.")
                 else:
                     try:
-                        with st.spinner("Mengirim email reset..."):
-                            # Set redirect URL dengan prioritas yang lebih clear
+                        with st.spinner("Mengirim email..."):
                             redirect_url = os.getenv("SUPABASE_EMAIL_REDIRECT")
                             if not redirect_url:
                                 redirect_url = os.getenv("NEXT_PUBLIC_SITE_URL", "https://yozora721-pnp-chatbot-v1.hf.space/")
@@ -352,7 +370,25 @@ def auth_view():
                                 f_email, 
                                 {"redirect_to": redirect_url}
                             )
-                            st.success(" Email reset password telah dikirim!")
-                            st.info(" Periksa kotak masuk (dan folder spam) untuk tautan reset password.")
+                            st.success("Link reset password telah dikirim!")
+                            st.info(f"Silakan cek email di **{f_email}**")
+                            
+                            # Tips tanpa copy paste
+                            with st.expander("Troubleshooting", expanded=False):
+                                st.markdown("""
+                                **Jika mengalami masalah:**
+                                
+                                **Email tidak masuk?**  
+                                Tunggu 2-3 menit, periksa folder spam
+                                
+                                **Link tidak berfungsi?**  
+                                Di browser, ganti tanda `#` dengan `?` pada URL
+                                
+                                **Halaman kosong setelah klik link?**  
+                                Refresh halaman atau coba browser lain
+                                
+                                **Link sudah expired?**  
+                                Minta link baru (berlaku 1 jam)
+                                """)
                     except Exception as e:
-                        st.error(f" Gagal mengirim email: {str(e)}")
+                        st.error(f"Gagal mengirim email: {str(e)}")