238 lines
9.5 KiB
Python
238 lines
9.5 KiB
Python
# -*- coding: utf-8 -*-
|
||
"""
|
||
登录页面
|
||
"""
|
||
import reflex as rx
|
||
|
||
from application.states.auth_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)",
|
||
)
|