How can I encrypt a page without page functions?

[SHDocter]

Question

I used nginx reverse proxy nicegui, and I have a GUI that cannot use page functions, but I need to set a password for this GUI. What should I do?

[rodja]

I have a GUI that cannot use page functions

Is that really true? You can also share state between pages.

but I need to set a password for this GUI.

You could configure nginx with basic authentication.

[rodja]

Sorry @SHDocter, I do not understand. I suggest you start a new discussion with a minimal reproducible example. It should show the core problem you are struggling with when using page functions.

[SHDocter]

import asyncio
from nicegui import ui

class CountdownTimer:
    def __init__(self, start_time):
        self._start_time = start_time
        self._remaining_time = start_time
        self._paused = False 
        self._running = False
        self._paused_event = asyncio.Event()
        self._paused_event.set()
        self._task = None

    def get_tmp_time(self):
        return float(self._remaining_time)

    async def _run(self, label):
        while self._running and self._remaining_time > 0:
            if self._paused:
                await self._paused_event.wait()  # Wait until unpaused

            self._remaining_time -= 1

            minute, second = divmod(self._remaining_time, 60)
            hour, minute = divmod(minute, 60)
            label.set_text("%02d:%02d:%02d" % (hour, minute, second))
            await asyncio.sleep(1) # 异步阻塞1s

        if self._remaining_time <= 0:
            await self.stop(time_badge)

            input_hour.set_value(0)
            input_minute.set_value(0)
            input_second.set_value(0)

    def start(self, label):
        global cd_status
        # 如果倒计时未在运行
        if not self._running:
            self._running = True # 修改运行状态
            self._remaining_time = self._start_time  # 设置开始时间
            if self._remaining_time != 0: # 防止写入0时开始倒计时
                self._task = asyncio.create_task(self._run(label)) # 创建倒计时协程
                # 重置时间输入框
                input_hour.set_value(0)
                input_minute.set_value(0)
                input_second.set_value(0)
                cd_status = True # 设置倒计时运行状态
            else:
                ui.notify("please input time", type="negative")
                self._running = False

    # 暂停倒计时
    async def pause(self):
        if self._running and not self._paused: # 如果倒计时在运行且没有暂停
            self._paused = True
            self._paused_event.clear()  # Pause the timer

    # 继续倒计时
    def resume(self):
        if self._running and self._paused:
            self._paused = False
            self._paused_event.set()  # Resume the timer

    # 停止倒计时
    async def stop(self, label):
        if self._running:
            self._running = False
            self._paused = False
            if self._task:
                self._task.cancel() # 结束协程
            label.set_text("00:00:00")
            self._remaining_time = self._start_time  # Reset the timer
            start_button.enable()
            input_hour.set_value(0)
            input_minute.set_value(0)
            input_second.set_value(0)

    def set_time(self, time):
        # 如果计时器正在运行，首先停止它
        if self._running:
            self._running = False
            if self._task:
                self._task.cancel()

        # 更新起始时间和剩余时间
        self._start_time = time
        self._remaining_time = time

        # 更新 UI 上的显示
        hour, minute = divmod(self._remaining_time, 3600)
        minute, second = divmod(minute, 60)
        time_badge.set_text("%02d:%02d:%02d" % (hour, minute, second))

        # 如果计时器没有运行，则重新启动计时器
        if not self._running:
            self._running = True
            self._task = asyncio.create_task(self._run(time_badge))

def start_task():
    global countdown_timer
    countdown_timer = CountdownTimer((input_hour.value * 3600) + (input_minute.value * 60) + input_second.value)
    if countdown_timer._start_time == 0:
        countdown_timer._start_time = (input_hour.value * 3600) + (input_minute.value * 60) + input_second.value
        countdown_timer._remaining_time = countdown_timer._start_time
    countdown_timer.start(time_badge)


# gui
with ui.card(align_items="center").classes("absolute-center"):
    time_badge = ui.badge("00:00:00", outline=True).classes("text-9xl")

    with ui.row():
        start_button = ui.button('start', on_click=lambda: start_task())
        cancel_button = ui.button('stop', on_click=lambda: countdown_timer.stop(time_badge))

    with ui.row():
        input_hour = ui.number("hour", value=0, min=0).style("width: 100px")
        input_minute = ui.number("minute", value=0, min=0).style("width: 100px")
        input_second = ui.number("second", value=0, min=0).style("width: 100px")

ui.run()

If I use page functions,the CountdownTimer class how to retrieve variables for buttons and input boxes?

If I use OBS Studio's browser source capture http://test.com/nicegui/capture_cd and use nginx basic authentication, It will return a 401 error

[SHDocter]

@ui.page("/")
def index():
    global time_badge, input_hour, input_minute, input_second
    with ui.card(align_items="center").classes("absolute-center"):
        time_badge = ui.badge("00:00:00", outline=True).classes("text-9xl")

        with ui.row():
            start_button = ui.button('start', on_click=lambda: start_task())
            cancel_button = ui.button('stop', on_click=lambda: countdown_timer.stop(time_badge))

        with ui.row():
            input_hour = ui.number("hour", value=0, min=0).style("width: 100px")
            input_minute = ui.number("minute", value=0, min=0).style("width: 100px")
            input_second = ui.number("second", value=0, min=0).style("width: 100px")

If I change it this way, the countdown will be canceled when I refresh the page.

[rodja]

In general when programming: if you want an object exist longer than the function call, you should create it outside of it. In your case the start_task creates a new CountdownTimer object for every time someone accesses the page. Here a short example on how I would approach a global countdown UI:

from datetime import timedelta
from nicegui import app, ui

class Countdown:
    def __init__(self):
        self.remaining = timedelta(seconds=10)
        app.timer(1, self.update)

    def update(self):
        if self.remaining > timedelta(seconds=0):
            self.remaining -= timedelta(seconds=1)
        else:
            self.remaining = timedelta(seconds=0)

    def restart(self):
        self.remaining = timedelta(seconds=10)

countdown = Countdown() # NOTE: this is global so each visitor sees the same countdown

@ui.page('/')
def page():
    ui.label().bind_text_from(countdown, 'remaining', lambda remaining: f'{remaining.seconds}')
    ui.button('Restart', on_click=countdown.restart)

ui.run()

[SHDocter]

oh I have found a way! Thank you very much!