Notice
Recent Posts
Recent Comments
250x250
Creative Code
Lunar-(5)중간정리1(로그인 전체 기능구현) 본문
728x90
--> 아이디와 비밀번호를 입력하면 sqlite 데이터 베이스에 저장되어있는 유저 데이터와 비교해 일치할 시 로그인 가능
※로그인 화면 코드(pages/login.py)
"""Login page. Uses auth_layout to render UI shared with the sign up page."""
import reflex as rx
from lunar.state.auth import AuthState
def login():
return rx.container(
rx.container(height='150px'),
rx.hstack(
rx.vstack(
rx.container(height='30px'),
rx.image(
src = '/space2.jpg',
),
width = '500px',
height= '100%',
),
rx.container(width='30px'),
rx.vstack(
rx.hstack(
rx.vstack(
rx.container(height='20px'),
rx.image(
src = "/moonico.ico",
width="70px",
height="70px",
),
),
rx.vstack(
rx.container(height='8px'),
rx.container(
rx.text(
"Lunar",
style={
"fontSize": "50px",
"fontWeight": "bolder",
"letterSpacing": "3px",
"fontFamily": "Comic Sans MS, Cursive",
"background": "-webkit-linear-gradient(-45deg, #e04a3f, #24d6d6)",
"-webkit-background-clip": "text",
"color": "black",
},
mb=-3,
),
rx.text(
"Share your daily life with people!",
style={
'background': "-webkit-linear-gradient(-45deg, #e04a3f, #4e8be6)",
'background_clip': "text", # 텍스트에만 그라데이션 적용
'color': "transparent", # 텍스트 색상을 투명으로 설정
'font_weight': "bold",
'fontSize':'20px',
},
),
),
),
),
rx.container(height='20px'),
rx.container(
rx.vstack(
rx.container(
rx.input(placeholder="Nickname", on_blur=AuthState.set_username, mb=4),
rx.input(
type_="password",
placeholder="Password",
on_blur=AuthState.set_password,
mb=4,
),
rx.button(
"Log in",
on_click=AuthState.login,
bg="#212963",
color="white",
_hover={"bg": "blue.600"},
),
center_content=True,
align_items="left",
bg="white",
border="1px solid #eaeaea",
p=4,
max_width="400px",
border_radius="20px",
background= 'rgb(255,255,255,0.7)'
),
rx.container(height='10px'),
rx.vstack(
rx.text(
'Forgot your id? ',
rx.link('Find Id!',href="/findid",color='red.500'),
color='gray.600',
),
rx.text(
'Forgot your password? ',
rx.link('Find Password!',href="/findpassword",color='green.500'),
color="gray.600",
),
rx.text(
"Don't have an account yet? ",
rx.link("Sign up!", href="/signup", color="blue.500"),
color="gray.600",
),
align_items='start',
),
rx.container(height='30px') ,
),
),
width='500px',
height='auto',
center_content=True,
borderRadius='40px',
boxShadow='10px 10px 100px #79d0ed',
background= 'rgb(255,255,255,0.7)'
),
),
center_content=True,
# justifyContent='center',
maxWidth='auto',
maxHeight='auto',
height='100vh',
# style={
# 'background-image':"url('/space2.jpg')",
# 'background-size':'cover',
# }
)
--> 사용자의 이름, 이메일, 생년월일 입력시 유저의 아이디를 알려주는 기능
※ 아이디 찾기 화면 전체 코드 (pages/findid.py)
"""findid page. Uses auth_layout to render UI shared with the sign up page."""
import reflex as rx
from lunar.state.auth import AuthState
def findid():
return rx.container(
rx.container(height='150px'),
rx.hstack(
rx.vstack(
rx.hstack(
rx.vstack(
rx.container(height='20px'),
rx.image(
src = "/moonico.ico",
width="70px",
height="70px",
),
),
rx.vstack(
rx.container(height='8px'),
rx.container(
rx.text(
"Lunar",
style={
"fontSize": "50px",
"fontWeight": "bolder",
"letterSpacing": "3px",
"fontFamily": "Comic Sans MS, Cursive",
"background": "-webkit-linear-gradient(-45deg, #e04a3f, #24d6d6)",
"-webkit-background-clip": "text",
"color": "black",
},
mb=-3,
),
rx.text(
"Share your daily life with people!",
style={
'background': "-webkit-linear-gradient(-45deg, #e04a3f, #4e8be6)",
'background_clip': "text", # 텍스트에만 그라데이션 적용
'color': "transparent", # 텍스트 색상을 투명으로 설정
'font_weight': "bold",
'fontSize':'20px',
},
),
),
),
),
rx.container(height='30px'),
rx.image(
src = '/space2.jpg',
),
width = '500px',
height= '100%',
),
rx.container(width='30px'),
rx.vstack(
rx.container(height='20px'),
rx.container(
rx.vstack(
rx.container(
rx.input(placeholder="your name", on_blur=AuthState.set_user_find_id_name, mb=4),
rx.input(
placeholder="email",
on_blur=AuthState.set_user_find_id_email,
mb=4,
),
rx.hstack(
rx.input(placeholder='birth year', on_blur=AuthState.set_user_find_id_year),
rx.input(placeholder='birth month', on_blur=AuthState.set_user_find_id_month),
rx.input(placeholder='birth day', on_blur=AuthState.set_user_find_id_day),
),
rx.container(height='10px'),
rx.button(
"Find id",
on_click=AuthState.find_user_id,
bg="#212963",
color="white",
_hover={"bg": "blue.600"},
),
center_content=True,
align_items="left",
bg="white",
border="1px solid #eaeaea",
p=4,
max_width="400px",
border_radius="20px",
background= 'rgb(255,255,255,0.7)'
),
rx.container(height='10px'),
rx.vstack(
rx.text(
"Don't have an account yet? ",
rx.link("Sign up!", href="/signup", color="blue.500"),
color="gray.600",
),
rx.text(
"Already have an account? ",
rx.link("Sign in here.", href="/", color="yellow.500"),
color="gray.600",
),
rx.text(
'Forgot your password? ',
rx.link('Find Password!',href='/findpassword', color='green.500'),
color='gray.600',
),
align_items='start',
),
rx.container(height='30px') ,
),
),
width='500px',
height='auto',
center_content=True,
borderRadius='40px',
boxShadow='10px 10px 100px #79d0ed',
background= 'rgb(255,255,255,0.7)'
),
),
center_content=True,
# justifyContent='center',
maxWidth='auto',
maxHeight='auto',
height='100vh',
# style={
# 'background-image':"url('/space2.jpg')",
# 'background-size':'cover',
# }
)
--> 유저의 아이디, 이메일 , 생년월일 입력시 비밀번호 힌트를 제공하는 기능
※ 비밀번호 찾기 화면 전체 코드 (pages/findpassword.py)
"""findpassword page. Uses auth_layout to render UI shared with the sign up page."""
import reflex as rx
from lunar.state.auth import AuthState
def findpassword():
return rx.container(
rx.container(height='150px'),
rx.hstack(
rx.vstack(
rx.hstack(
rx.vstack(
rx.container(height='20px'),
rx.image(
src = "/moonico.ico",
width="70px",
height="70px",
),
),
rx.vstack(
rx.container(height='8px'),
rx.container(
rx.text(
"Lunar",
style={
"fontSize": "50px",
"fontWeight": "bolder",
"letterSpacing": "3px",
"fontFamily": "Comic Sans MS, Cursive",
"background": "-webkit-linear-gradient(-45deg, #e04a3f, #24d6d6)",
"-webkit-background-clip": "text",
"color": "black",
},
mb=-3,
),
rx.text(
"Share your daily life with people!",
style={
'background': "-webkit-linear-gradient(-45deg, #e04a3f, #4e8be6)",
'background_clip': "text", # 텍스트에만 그라데이션 적용
'color': "transparent", # 텍스트 색상을 투명으로 설정
'font_weight': "bold",
'fontSize':'20px',
},
),
),
),
),
rx.container(height='30px'),
rx.image(
src = '/space2.jpg',
),
width = '500px',
height= '100%',
),
rx.container(width='30px'),
rx.vstack(
rx.container(height='20px'),
rx.container(
rx.vstack(
rx.container(
rx.input(placeholder="id", on_blur=AuthState.set_user_find_password_id, mb=4),
rx.input(
placeholder="email",
on_blur=AuthState.set_user_find_password_email_address,
mb=4,
),
rx.hstack(
rx.input(placeholder='birth year', on_blur=AuthState.set_user_find_password_year),
rx.input(placeholder='birth month', on_blur=AuthState.set_user_find_password_month),
rx.input(placeholder='birth day', on_blur=AuthState.set_user_find_password_day),
),
rx.container(height='10px'),
rx.button(
"Find password",
on_click=AuthState.find_user_password,
bg="#212963",
color="white",
_hover={"bg": "blue.600"},
),
center_content=True,
align_items="left",
bg="white",
border="1px solid #eaeaea",
p=4,
max_width="400px",
border_radius="20px",
background= 'rgb(255,255,255,0.7)'
),
rx.container(height='10px'),
rx.vstack(
rx.text(
"Don't have an account yet? ",
rx.link("Sign up!", href="/signup", color="blue.500"),
color="gray.600",
),
rx.text(
"Already have an account? ",
rx.link("Sign in here.", href="/", color="yellow.500"),
color="gray.600",
),
align_items='start',
),
rx.container(height='30px') ,
),
),
width='500px',
height='auto',
center_content=True,
borderRadius='40px',
boxShadow='10px 10px 100px #79d0ed',
background= 'rgb(255,255,255,0.7)'
),
),
center_content=True,
# justifyContent='center',
maxWidth='auto',
maxHeight='auto',
height='100vh',
# style={
# 'background-image':"url('/space2.jpg')",
# 'background-size':'cover',
# }
)
--> 사용자 아이디 중복체크 확인, 비밀번호(8~16자리 알파벳과 숫자로 구성), 비밀번호 확인 기능, 이메일 정보 등록, 생년월일 정보 등록 기능
※회원가입 화면 전체 코드 (pages/signup.py)
"""signup page. Uses auth_layout to render UI shared with the sign up page."""
import reflex as rx
from lunar.state.auth import AuthState
def signup():
return rx.container(
rx.container(height='100px'),
rx.hstack(
rx.vstack(
rx.hstack(
rx.vstack(
rx.container(height='20px'),
rx.image(
src = "/moonico.ico",
width="70px",
height="70px",
),
),
rx.vstack(
rx.container(height='8px'),
rx.container(
rx.text(
"Lunar",
style={
"fontSize": "50px",
"fontWeight": "bolder",
"letterSpacing": "3px",
"fontFamily": "Comic Sans MS, Cursive",
"background": "-webkit-linear-gradient(-45deg, #e04a3f, #24d6d6)",
"-webkit-background-clip": "text",
"color": "black",
},
mb=-3,
),
rx.text(
"Share your daily life with people!",
style={
'background': "-webkit-linear-gradient(-45deg, #e04a3f, #4e8be6)",
'background_clip': "text", # 텍스트에만 그라데이션 적용
'color': "transparent", # 텍스트 색상을 투명으로 설정
'font_weight': "bold",
'fontSize':'20px',
},
),
),
),
),
rx.container(height='40px'),
rx.image(
src = '/space2.jpg',
),
width = '500px',
height= '100%',
),
rx.container(width='30px'),
rx.vstack(
rx.container(height='20px'),
rx.container(
rx.hstack(
rx.input(placeholder="Nickname", on_blur=AuthState.set_username),
rx.button(
"Check",
on_click=AuthState.id_check,
bg="#212963",
color="white",
_hover={"bg": "blue.600"},
),
),
rx.container(height='16px'),
rx.form_control(
rx.input(
placeholder="password",
on_blur=AuthState.set_password,
type_='password',
),
rx.cond(
AuthState.time_valid_password,
rx.form_error_message(
"The password must be 8 to 16 characters containing a combination of numbers and alphabets."
),
rx.form_helper_text("password is valid"),
),
is_invalid=AuthState.time_valid_password,
is_required=True,
),
rx.container(height='16px'),
rx.form_control(
rx.input(
placeholder="password",
on_blur=AuthState.set_confirm_password,
type_='password',
),
rx.cond(
AuthState.time_valid_confirm_password,
rx.form_error_message(
"Please check your password again."
),
rx.form_helper_text("The passwords match."),
),
is_invalid=AuthState.time_valid_confirm_password,
is_required=True,
),
rx.container(height='16px'),
rx.form_control(
rx.input(
placeholder="your name",
on_blur=AuthState.set_user_realname,
),
rx.cond(
AuthState.time_valid_username,
rx.form_error_message(
"The name must be between 2 and 20 characters."
),
rx.form_helper_text("name is valid"),
),
is_invalid=AuthState.time_valid_username,
is_required=True,
),
rx.container(height='16px'),
rx.form_control(
rx.input(
placeholder="your email address",
on_blur=AuthState.set_user_email_address,
),
rx.cond(
AuthState.time_valid_email_address,
rx.form_error_message(
"Please enter correct email."
),
rx.form_helper_text("check"),
),
is_invalid=AuthState.time_valid_email_address,
is_required=True,
),
rx.container(height='16px'),
rx.hstack(
rx.select(
AuthState.year,
placeholder="birth year",
on_change=AuthState.set_user_birthday_year,
color_schemes="twitter",
),
rx.select(
AuthState.month,
placeholder="birth month",
on_change=AuthState.set_user_birthday_month,
color_schemes="twitter",
),
rx.select(
AuthState.day,
placeholder="birth day",
on_change=AuthState.set_user_birthday_day,
color_schemes="twitter",
),
),
rx.vstack(
rx.container(height='20px'),
rx.button(
"Sign up",
on_click=AuthState.signup,
bg="#212963",
color="white",
_hover={"bg": "blue.600"},
),
center_content=True,
align_items="left",
bg="white",
max_width="400px",
border_radius="20px",
background= 'rgb(255,255,255,0.7)'
),
align_items="left",
bg="white",
border="1px solid #eaeaea",
p=4,
max_width="400px",
border_radius="lg",
),
rx.text(
"Already have an account? ",
rx.link("Sign in here.", href="/", color="yellow.500"),
color="gray.600",
),
rx.container(height='10px'),
width='500px',
height='auto',
center_content=True,
borderRadius='40px',
boxShadow='10px 10px 100px #79d0ed',
background= 'rgb(255,255,255,0.7)'
),
),
center_content=True,
justify_content=True,
maxWidth='auto',
maxHeight='auto',
height='100vh',
)728x90
'Projects' 카테고리의 다른 글
| Lunar-(7)홈화면 기능 추가(사진 업로드, 공감기능, 댓글기능) (0) | 2023.12.14 |
|---|---|
| Lunar-(6)홈화면 UI 구성 (0) | 2023.12.11 |
| Lunar-(4)비밀번호 찾기 화면 (1) | 2023.12.06 |
| Lunar-(3)로그인 회원가입 상세 조건 추가 (1) | 2023.12.05 |
| Lunar-(2)로그인화면 UI개선, 회원가입화면 생일설정, 이름, 이메일 정보 추가 (0) | 2023.12.04 |
'Projects' Related Articles
more
