You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React, { useMemo, useState } from "react"; import { View } from "react-native"; import ETextInput, { ETextInputBorder } from "@components/ETextInput"; import EFullButton from "@components/EButton"; import EText, { ECaptionText, ELabelText, ETitleText } from "@components/EText"; import ENavButtons from "@components/ENavButtons";
// implement logic here later.
export default function CreatePassword(props: any) { const [password, setPassword] = useState<string>(""); const [validation, setValidation] = useState<string>(""); const [visible, setVisible] = useState<boolean>(true); const border = useMemo(() => { if (password.length === 0 && validation.length === 0) return ETextInputBorder.Nothing; if (validation !== password) return ETextInputBorder.Fail; if (validation.length >= 8) return ETextInputBorder.Success; return ETextInputBorder.Fail; }, [password, validation]); return ( <> <View style={{ flex: 1, flexDirection: "column", }} > <ENavButtons back={true} /> <View style={{ flexDirection: "column", marginTop: 0 }}> <View style={{ marginBottom: 24 }}> <ETitleText style={{ marginBottom: 8 }}> 비밀번호 설정하기 </ETitleText> <EText> 비밀번호를 설정해주세요. 영문, 숫자를 조합한 8자 이상으로 만들어주세요 </EText> </View> <View style={{ rowGap: 8 }}> <ELabelText>비밀번호</ELabelText> <ETextInput border={border} placeholder="" value={password} setValue={setPassword} passwordHidden={visible} setPasswordHidden={setVisible} /> <ETextInput border={border} placeholder="비밀번호 다시 입력하기" value={validation} setValue={setValidation} passwordHidden={visible} setPasswordHidden={setVisible} /> {border === ETextInputBorder.Nothing && ( <ECaptionText> 영문/숫자 조합 8자 이상으로 만들어주세요 </ECaptionText> )} {border === ETextInputBorder.Fail && ( <> <ECaptionText error={true}> 영문/숫자 조합 8자 이상으로 만들어주세요 </ECaptionText> <ECaptionText error={true}> 비밀번호가 일치하는지 확인해주세요 </ECaptionText> </> )} </View> </View> <EFullButton style={{ marginTop: 24 }} text="비밀번호 설정하기" active={border == ETextInputBorder.Success} /> </View> </> ); }
|