Local Storage

from reactpy import component, event, html, use_context, use_state

from reactpy_utils import LocalStorageProvider
from reactpy_utils.types import EventArgs

from .app_context import AppContext, AppState


@component
def App():
    app_state, set_app_state = use_state(AppState())

    return AppContext(
        LocalStorageProvider(ExamplePage(), ctx=AppContext, storage_key="local-storage-example"),
        value=(app_state, set_app_state),
    )


@component
def ExamplePage():
    app_state, set_app_state = use_context(AppContext)

    @event
    def on_click(_evt: EventArgs):
        set_app_state(app_state.update(dark_mode=not app_state.dark_mode))

    return html.div(
        html.h2({"id": "h2"}, f"dark_mode={app_state.dark_mode}"),
        html.button({"id": "toggle_btn", "on_click": on_click}, "Toggle Dark Mode"),
    )

from reactpy_utils import DynamicContextModel, create_dynamic_context


class AppState(DynamicContextModel):
    dark_mode: bool = True


AppContext = create_dynamic_context(AppState)

import base64
import json

from cryptography.fernet import Fernet
from typing_extensions import Self

from reactpy_utils import DynamicContextModel, create_dynamic_context

# Use Fernet.generate_key() to create keys. The key remains on
# the server, only encrypted data is sent to the browser.

fernet = Fernet(b"3qgHqyfztBTIDpPc1AFYt9vPXQ1Ni5lF4vwfhaMzWBs=")


def decode(data: str) -> dict:
    """Decode encrypted json data to a json object"""
    encMessage = base64.b64decode(data)
    plane = fernet.decrypt(encMessage).decode()
    return json.loads(plane)


def encode(plain_text: str) -> str:
    """Encode the plain_text stringified json object to an encrypted, base64, stringified json object"""
    encMessage = fernet.encrypt(plain_text.encode())
    encMessage64 = base64.b64encode(encMessage).decode("utf-8")
    return json.dumps({"data": encMessage64})


class EncryptedDynamicContextBase(DynamicContextModel):
    """Fernet encryption base class. The fields of all models derived from this
    class will be stored in an a encrypted form in the browser"""

    def update(self: Self, **kwargs) -> Self:
        kwargs = decode(**kwargs)
        return super().update(**kwargs)

    def dumps(self, sort_keys=True) -> str:
        plane_text = super().dumps(sort_keys=sort_keys)
        return encode(plane_text)


# Example usage of defining an encrypted user model & context


class UserState(EncryptedDynamicContextBase):
    user_name: str
    password: str


UserContext = create_dynamic_context(UserState)