Last active
April 26, 2021 03:24
-
-
Save ejabu/e2756e2a61f84497a24d539a439d8f40 to your computer and use it in GitHub Desktop.
Apollo Otp Timer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const OtpModal = ({ modal, toggle, phoneNumber = '', successCb }) => { | |
const [otp, setOtp] = useState(''); | |
const [timer, setTimer] = useState(10); | |
const [hasResendOtp, setHasResendOtp] = useState(false); | |
const [errorMessage, setErrorMessage] = useState(''); | |
useEffect(() => { | |
const interval = setInterval(() => { | |
setTimer((timer) => { | |
if (timer === 1 || timer === 0) { | |
setHasResendOtp(true); | |
return 0; | |
} else { | |
return timer - 1; | |
} | |
}); | |
}, 1000); | |
return () => clearInterval(interval); | |
}, []); | |
function handleDismiss() { | |
setOtp(''); | |
} | |
const resendOtp = () => { | |
if (hasResendOtp) { | |
API.post('v2/auth/login/', { phone_number: phoneNumber }) | |
.then(() => { | |
setHasResendOtp(false); | |
setTimer(10); | |
}) | |
.catch((e) => { | |
alert('gagal mengirim otp kode'); | |
}); | |
} | |
return null; | |
}; | |
const handleChange = async (otp) => { | |
setOtp(otp); | |
if (otp.length !== 6) { | |
return; | |
} | |
const payload = { phone_number: phoneNumber, otp_code: otp }; | |
try { | |
const tokenV2 = await getTokenV2(payload); | |
const tokenV1 = await getTokenV1(tokenV2); | |
const cookies = new Cookies(); | |
cookies.set('oto-token', tokenV1, { domain: process.env.COOKIES_DOMAIN, path: '/' }); | |
if (typeof successCb === 'function') { | |
successCb(tokenV2); | |
} | |
} catch (error) { | |
setOtp(''); | |
setErrorMessage('Kode OTP Salah') | |
} | |
}; | |
return ( | |
<> | |
<Modal | |
onClosed={handleDismiss} | |
isOpen={modal} | |
toggle={toggle} | |
className="oi-modal" | |
centered={true} | |
keyboard={false}> | |
<div className="modal-title-otp"> | |
<div | |
className="box-icon-40 cursor-pointer-all mri-8" | |
style={{ | |
width: '48px', | |
height: '48px', | |
backgroundColor: '#F7F7FC' | |
}}> | |
<div | |
onClick={toggle} | |
style={{ | |
width: '48px', | |
height: '48px', | |
background: 'url("/icon/oi-arrow.svg") no-repeat center center' | |
}}></div> | |
</div> | |
<span className="mle-4">Verifikasi OTP</span> | |
</div> | |
<div className="modal-close-button " onClick={toggle}> | |
<CloseIconLarge /> | |
</div> | |
<div className="modal-subtitle-otp"> | |
Masukkan 6 digit Kode OTP yang terkirim ke nomor Kamu. | |
</div> | |
{/* Subsection */} | |
<div className="my-32 mx-auto"> | |
<OtpInput | |
isInputNum={true} | |
containerStyle="containers" | |
inputStyle={{ | |
height: '48px', | |
width: '40px', | |
background: '#FCFCFC', | |
border: '1px solid #D6D8E7', | |
borderRadius: '12px', | |
fontSize: '16px', | |
color: '#2C59D1' | |
}} | |
value={otp} | |
onChange={handleChange} | |
numInputs={6} | |
separator={<span className="w-8"> </span>} | |
/> | |
</div> | |
<div | |
className="countdown" | |
style={{ | |
margin: '0px auto 274px' | |
}}> | |
{errorMessage && <div>{errorMessage}</div>} | |
{hasResendOtp ? ( | |
<a className="cursor-pointer-all" onClick={() => resendOtp()}> | |
Kirim Ulang Kode Otp | |
</a> | |
) : ( | |
<> | |
<span>Kirim ulang kode otp dalam </span> | |
<span className="text-orange-300">{timer} </span> | |
<span>detik</span> | |
</> | |
)} | |
</div> | |
</Modal> | |
</> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment