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.
82 lines
2.9 KiB
82 lines
2.9 KiB
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>
|
|
</>
|
|
);
|
|
}
|