46 - User Dashboard & Logout User

Author: codingforentrepreneurs

full_stack_python/auth/__init__.py

@@ -1,11 +1,6 @@
 from .models import UserInfo
-from . import pages
-
-from .state import SessionState
 
 
 __all__ = [
-    'pages',
     'UserInfo',
-    'SessionState'
 ]

full_stack_python/auth/pages.py

@@ -3,9 +3,11 @@
 from reflex_local_auth.pages.login import LoginState, login_form
 from reflex_local_auth.pages.registration import RegistrationState, register_form
 
+from .. import navigation
 from ..ui.base import base_page
 
 from .forms import my_register_form
+from .state import SessionState
 
 def my_login_page()->rx.Component:
     return base_page(
@@ -33,4 +35,24 @@ def my_register_page()->rx.Component:
              min_height="85vh",
         )
 
-    )
+    )
+
+
+def my_logout_page() -> rx.Component:
+    # Welcome Page (Index)
+    my_child = rx.vstack(
+            rx.heading("Are you sure you want logout?", size="7"),
+            rx.link(
+                rx.button("No", color_scheme="gray"),
+                href=navigation.routes.HOME_ROUTE
+            ),
+            rx.button("Yes, please logout", on_click=SessionState.perform_logout),
+            spacing="5",
+            justify="center",
+            align="center",
+            # text_align="center",
+            min_height="85vh",
+            id='my-child'
+        )
+    return base_page(my_child)
+

full_stack_python/auth/state.py

@@ -26,6 +26,11 @@ def on_load(self):
         print(self.is_authenticated)
         print(self.authenticated_user_info)
 
+    def perform_logout(self):
+        self.do_logout()
+        return rx.redirect("/")
+
+
 
 class MyRegisterState(reflex_local_auth.RegistrationState):
     def handle_registration(

full_stack_python/full_stack_python.py

@@ -6,7 +6,14 @@
 from rxconfig import config
 from .ui.base import base_page
 
-from . import auth, blog, contact, navigation, pages
+from .auth.pages import (
+    my_login_page,
+    my_register_page,
+    my_logout_page
+)
+from .auth.state import SessionState
+
+from . import blog, contact, navigation, pages
 
 class State(rx.State):
     """The app state."""
@@ -49,24 +56,30 @@ def index() -> rx.Component:
 app.add_page(index)
 # reflex_local_auth pages
 app.add_page(
-    auth.pages.my_login_page,
+    my_login_page,
     route=reflex_local_auth.routes.LOGIN_ROUTE,
     title="Login",
 )
 app.add_page(
-    auth.pages.my_register_page,
+    my_register_page,
     route=reflex_local_auth.routes.REGISTER_ROUTE,
     title="Register",
 )
 
+app.add_page(
+    my_logout_page,
+    route=navigation.routes.LOGOUT_ROUTE,
+    title="Logout",
+)
+
 # my pages
 app.add_page(pages.about_page, 
              route=navigation.routes.ABOUT_US_ROUTE)
 
 app.add_page(
     pages.protected_page, 
     route="/protected/",
-    on_load=auth.SessionState.on_load
+    on_load=SessionState.on_load
 )
 
 app.add_page(

full_stack_python/navigation/routes.py

@@ -4,4 +4,5 @@
 BLOG_POST_ADD_ROUTE="/blog/add"
 CONTACT_US_ROUTE="/contact"
 CONTACT_ENTRIES_ROUTE="/contact/entries"
+LOGOUT_ROUTE="/logout"
 PRICING_ROUTE="/pricing"

full_stack_python/navigation/state.py

@@ -11,6 +11,9 @@ def to_register(self):
 
     def to_login(self):
         return rx.redirect(reflex_local_auth.routes.LOGIN_ROUTE)
+    
+    def to_logout(self):
+        return rx.redirect(routes.LOGOUT_ROUTE)
 
     def to_about_us(self):
         return rx.redirect(routes.ABOUT_US_ROUTE)

full_stack_python/ui/base.py

@@ -1,5 +1,6 @@
 import reflex as rx
 
+from ..auth.state import SessionState
 from .nav import navbar
 from .dashboard import base_dashboard_page
 
@@ -20,11 +21,10 @@ def base_layout_component(child, *args, **kwargs) -> rx.Component:
     )
 
 def base_page(child: rx.Component, *args, **kwargs) -> rx.Component:
-    is_logged_in = True
     if not isinstance(child,rx. Component):
         child = rx.heading("this is not a valid child element")
     return rx.cond(
-        is_logged_in,
+        SessionState.is_authenticated,
         base_dashboard_page(child, *args, **kwargs),
         base_layout_component(child, *args, **kwargs ),
     )

full_stack_python/ui/sidebar.py

@@ -3,6 +3,34 @@
 
 from .. import navigation 
 
+
+
+def sidebar_logout_item() -> rx.Component:
+    return rx.box(
+        rx.hstack(
+            rx.icon("log-out"),
+            rx.text("Logout", size="4"),
+            width="100%",
+            padding_x="0.5rem",
+            padding_y="0.75rem",
+            align="center",
+            style={
+                "_hover": {
+                    "cursor": "pointer", # css
+                    "bg": rx.color("accent", 4),
+                    "color": rx.color("accent", 11),
+                },
+                "color": rx.color("accent", 11),
+                "border-radius": "0.5em",
+            },
+        ),
+        on_click=navigation.NavState.to_logout,
+        as_='button',
+        underline="none",
+        weight="medium",
+        width="100%",
+    )
+
 def sidebar_dark_mode_toggle_item() -> rx.Component:
     return rx.box(
         rx.hstack(
@@ -96,9 +124,7 @@ def sidebar() -> rx.Component:
                 rx.vstack(
                     rx.vstack(
                         sidebar_dark_mode_toggle_item(),
-                        sidebar_item(
-                            "Log out", "log-out", "/#"
-                        ),
+                        sidebar_logout_item(),
                         spacing="1",
                         width="100%",
                     ),
@@ -169,16 +195,8 @@ def sidebar() -> rx.Component:
                             rx.spacer(),
                             rx.vstack(
                                 rx.vstack(
-                                    sidebar_item(
-                                        "Settings",
-                                        "settings",
-                                        "/#",
-                                    ),
-                                    sidebar_item(
-                                        "Log out",
-                                        "log-out",
-                                        "/#",
-                                    ),
+                                    sidebar_dark_mode_toggle_item(),
+                                    sidebar_logout_item(),
                                     width="100%",
                                     spacing="1",
                                 ),