# -*- coding: utf-8 -*- """ 登录页面 """ import reflex as rx from application.states import AuthState def login_page() -> rx.Component: """ 登录页面 :return: Component """ return rx.center( rx.hstack( rx.vstack( # 标题 rx.text( "登录解锁更多功能", margin_bottom="24px", line_height="32px", font_size="var(--prismui-font-size-5)", font_weight="var(--prismui-font-weight-4)", ), # 邮箱输入框 rx.input( placeholder="请输入邮箱", # 值绑定邮箱 value=AuthState.email, # 值变化事件：设置邮箱 on_change=AuthState.set_email, # 获取焦点事件：重置错误信息 on_focus=AuthState.reset_error, line_height="16px", width="100%", height="45px", padding="4px", margin_bottom="24px", border_radius="var(--prismui-border-radius-4)", ), # 验证码输入框 rx.hstack( rx.input( placeholder="请输入验证码", # 值绑定验证码 value=AuthState.captcha_code, max_length=6, # 值变化事件：设置验证码 on_change=AuthState.set_captcha_code, # 获取焦点事件：重置错误信息 on_focus=AuthState.reset_error, flex=1, height="100%", padding="4px", border_radius="var(--prismui-border-radius-4)", line_height="16px", border="none !important", ), rx.button( rx.text( rx.cond( AuthState.countdown > 0, f"{AuthState.countdown} s", "获取验证码", ), line_height="16px", white_space="nowrap", # 若验证码发送禁用状态为是则颜色设置为 color-4，否则设置为 color-5（主题色） color=rx.cond( AuthState.is_captcha_code_sending_button_disabled, "var(--prismui-color-4)", "var(--prismui-color-5)", ), padding="0 12px", ), # 若再次发送验证码倒计时大于0则显示倒计时，否则显示获取验证码 # 点击事件：发送验证码 on_click=AuthState.send_captcha_code, # 是否禁用绑定验证码发送禁用状态 disabled=AuthState.is_captcha_code_sending_button_disabled, margin="0 8px", background_color="var(--prismui-background-color-1)", border="none", cursor=rx.cond( AuthState.is_captcha_code_sending_button_disabled, "not-allowed", "pointer", ), style={ "_hover": { "background-color": "var(--prismui-background-color-1)" } }, ), width="100%", height="45px", align_items="center", border="var(--prismui-border-1)", border_radius="var(--prismui-border-radius-4)", ), rx.text( AuthState.error, width="100%", min_height="20px", text_align="left", line_height="20px", font_size="var(--prismui-font-size-1)", color="var(--prismui-color-6)", ), rx.box( rx.cond( AuthState.is_captcha_code_sent, rx.hstack( rx.icon( "circle-check", width="12px", height="12px", color="var(--prismui-color-2)", ), rx.text( "验证码已发送，请耐心等待", line_height="14px", font_size="var(--prismui-font-size-1)", color="var(--prismui-color-2)", ), margin="0 0 10px 0", gap="4px", ), ), display="flex", align_items="center", min_height="34px", ), rx.hstack( rx.checkbox( checked=AuthState.is_policies_agreed, # 值变化事件：切换协议同意状态 on_change=AuthState.toggle_policies_agreed, cursor="pointer", style={ "&::before": { "width": "12px !important", "height": "12px !important", }, "& svg": { "width": "8px !important", "height": "8px !important", }, "&[data-state='checked']::before": { "background-color": "var(--prismui-color-5) !important", }, }, ), rx.text( "我已阅读并同意", color="var(--prismui-color-2)", line_height="14px", ), rx.link( "用户协议、隐私政策", href="#", line_height="14px", color="var(--prismui-color-5)", cursor="pointer", ), margin_bottom="10px", align_items="center", gap="4px", font_size="var(--prismui-font-size-1)", ), rx.button( "登录", on_click=AuthState.login, loading=AuthState.is_logging_in, color="var(--prismui-color-9)", width="100%", height="38px", background_color="var(--prismui-background-color-4)", border_radius="var(--prismui-border-radius-4)", cursor="pointer", style={ "_hover": { "background-color": "var(--prismui-background-color-5)" } }, ), rx.text( "登录遇到问题？加他微信去吐槽", margin="20px 0 40px 0", line_height="14px", font_size="12px", color="var(--prismui-color-2)", ), width="396px", height="100%", padding="40px 48px 0 48px", align_items="center", ), rx.vstack( rx.image( src="/qrcode.png", width="208px", height="208px", padding="20px", background_color="var(--prismui-background-color-1)", border="var(--prismui-border-2)", border_radius="var(--prismui-border-radius-6)", ), rx.text( "加微信好友", margin="10px 0 12px 0", line_height="32px", font_size="var(--prismui-font-size-2)", font_weight="var(--prismui-font-weight-2)", ), align_items="center", justify_content="center", width="396px", height="100%", padding="72px 32px", ), background="var(--prismui-background-2)", border="1px solid #2222220f", border_radius="var(--prismui-border-radius-6)", box_shadow="0 4px 64px 0 #0000001a", overflow="hidden", ), position="absolute", top="0", left="0", z_index="9999", width="100vw", height="100vh", backdrop_filter="blur(4px)", )