Skip to content
This repository has been archived by the owner on Mar 7, 2023. It is now read-only.

Commit

Permalink
fix(login): update login form to check user email address for verific…
Browse files Browse the repository at this point in the history 
…ation
  • Loading branch information
@rhahao
rhahao committed Jan 27, 2022
1 parent 4a9f95b commit a0a639c
Show file tree
Hide file tree
Showing 5 changed files with 397 additions and 308 deletions.
112 changes: 80 additions & 32 deletions src/components/root/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,11 @@ const Login = () => {
const [btnDisabled, setBtnDisabled] = useState(true);
const [isProcessing, setIsProcessing] = useState(false);
const [isCompleted, setIsCompleted] = useState(false);
const [verifyLink, setVerifyLink] = useState('');
const [isLogin, setIsLogin] = useState(false);

const [isCreateWithLink, setIsCreateWithLink] = useState(false);
const [isCreateWithoutLink, setIsCreateWithoutLink] = useState(false);
const [isAccountNotVerified, setIsAccountNotVerified] = useState(false);
const [isEmailResent, setIsEmailResent] = useState(false);

const [isOpen, setIsOpen] = useRecoilState(isLoginOpenState);

Expand Down Expand Up @@ -84,9 +87,8 @@ const Login = () => {
setIsUserLogged(true);
handleClose();
} else {
setIsLogin(true);
if (data.message !== 'VERIFY_FAILED') {
setVerifyLink(data.message);
setIsAccountNotVerified(true);
}
setIsCompleted(true);
setIsProcessing(false);
Expand Down Expand Up @@ -138,8 +140,10 @@ const Login = () => {
.then(async (res) => {
const data = await res.json();
if (res.status === 200) {
if (data.message !== 'VERIFY_FAILED') {
setVerifyLink(data.message);
if (data.message === 'VERIFY_FAILED') {
setIsCreateWithoutLink(true);
} else {
setIsCreateWithLink(true);
}
setIsCompleted(true);
setIsProcessing(false);
Expand All @@ -159,6 +163,47 @@ const Login = () => {
}
};

const resendVerification = async () => {
setIsCompleted(false);
setIsCreateWithLink(false);
setIsCreateWithoutLink(false);
setIsAccountNotVerified(false);
setIsProcessing(true);
const reqPayload = {
email: email,
password: password,
};

if (apiHost !== '') {
fetch(`${apiHost}api/resend-verification`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(reqPayload),
})
.then(async (res) => {
const data = await res.json();
if (res.status === 200 && data.message === 'CHECK_EMAIL') {
setIsEmailResent(true);
setIsCompleted(true);
setIsProcessing(false);
} else {
setIsProcessing(false);
setAppMessage(data.message);
setAppSeverity('warning');
setAppSnackOpen(true);
}
})
.catch(() => {
setIsProcessing(false);
setAppMessage(t('login.createFailed'));
setAppSeverity('error');
setAppSnackOpen(true);
});
}
};

const handleTypeLoginCheck = (e) => {
setIsNewAccount(e.target.checked);
setPassword('');
Expand Down Expand Up @@ -297,40 +342,43 @@ const Login = () => {
<>
{isCompleted && (
<>
{isLogin && (
{isEmailResent && (
<Typography sx={{ width: '250px' }}>
{t('login.accountNewLink')}
</Typography>
)}

{isNewAccount && (
<>
{verifyLink.length === 0 && (
{isCreateWithLink && (
<Typography sx={{ width: '250px' }}>
{t('login.accountNotVerifiedNoLink')}
{t('login.accountCreated')}
</Typography>
)}
{verifyLink.length > 0 && (
<Typography sx={{ width: '250px' }}>
{t('login.accountNotVerified')}
<Link href={verifyLink}>
{t('login.accountActivate')}
</Link>
.
</Typography>
{isCreateWithoutLink && (
<>
<Typography sx={{ width: '250px' }}>
{t('login.accountCreatedNoLink')}
</Typography>
<Typography sx={{ width: '250px' }}>
<Link component='button' onClick={resendVerification}>
{t('login.accountResendLink')}
</Link>
</Typography>
</>
)}
</>
)}
{!isLogin && (
{!isNewAccount && isAccountNotVerified && (
<>
{verifyLink.length === 0 && (
<Typography sx={{ width: '250px' }}>
{t('login.accountCreateWithoutLink')}
</Typography>
)}
{verifyLink.length > 0 && (
<Typography sx={{ width: '250px' }}>
{t('login.accountCreateWithLink')}
<Link href={verifyLink}>
{t('login.accountActivate')}
</Link>
.
</Typography>
)}
<Typography sx={{ width: '250px' }}>
{t('login.accountNotVerified')}
</Typography>
<Typography sx={{ width: '250px' }}>
<Link component='button' onClick={resendVerification}>
{t('login.accountResendLink')}
</Link>
</Typography>
</>
)}

Expand Down
10 changes: 5 additions & 5 deletions src/locales/e.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,14 @@
"login.confirmPassword": "Confirm password",
"login.newAccount": "NEW ACCOUNT",
"login.createAccount": "Create",
"login.accountCreateWithLink": "Account successfully created. Please visit this link to activate your account: ",
"login.accountActivate": "Activate",
"login.accountCreateWithoutLink": "Account successfully created. Please login again to activate your account.",
"login.accountNotFound": "The provided login does not exist yet.",
"login.accountDisabled": "The account that you are trying to access is currently disabled.",
"login.accountNotVerified": "You are logged in, but you are account is not yet activated. Please visit this link to activate it: ",
"login.accountNotVerifiedNoLink": "Please login again to activate your account",
"login.createFailed": "An error occured and your account could not be created",
"login.accountCreated": "Your account is created, but you have to check the verification email before using it.",
"login.accountCreatedNoLink": "Your account is created, but we failed to send the verification email",
"login.accountNotVerified": "This account is valid, but it is not yet verified. Please check your email address to verify it",
"login.accountResendLink": "Resend verification email",
"login.accountNewLink": "The verification email has been resent",

"administration.congConnectInfo": "CONNECTION INFORMATION",
"administration.swsPocketAccess": "ACCESS TO SWS POCKET",
Expand Down
10 changes: 5 additions & 5 deletions src/locales/mg.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,14 @@
"login.confirmPassword": "Avereno ampidirina",
"login.newAccount": "KAONTY VAOVAO",
"login.createAccount": "Hamorona",
"login.accountCreateWithLink": "Vita ny famoronana ny kaonty vaovao. Tsindrio ity rohy ity mba hampandehanana ny kaontinao: ",
"login.accountActivate": "Hanamarina",
"login.accountCreateWithoutLink": "Vita ny famoronana ny kaonty vaovao. Miverina miditra mba hampandehanana ny kaontinao.",
"login.accountNotFound": "Tsy mbola misy ireo fanazavana nampidirinao ireo.",
"login.accountDisabled": "Natsahatra io kaonty tianao hidirana io.",
"login.accountNotVerified": "Tafiditra ianao fa saingy tsy mbola azo ampiasaina ny kaontinao. Tsindrio ity rohy ity mba hampandehanana ny kaontinao: ",
"login.accountNotVerifiedNoLink": "Miverena miditra indray mba hampandehanana ny kaontinao",
"login.createFailed": "Nisy olana ka tsy afaka namboarina ny kaontinao",
"login.accountCreated": "Vita ny fanamboarana ny kaontinao. Alohan’ny hampiasana azy ity, dia hamarino aloha ny hafatra lasa any amin’ny adiresinao",
"login.accountCreatedNoLink": "Vita ny fanamboarana ny kaontinao. Nisy olana anefa ka tsy mbola lasa ny hafatra fanamarinana izany",
"login.accountNotVerified": "Azo ampiasaina io kaonty io saingy tsy mbola voamarina. Hamarino ny hafatra any amin’ny adiresinao hanamarinana azy ity",
"login.accountResendLink": "Hamerina handefa ny hafatra fanamarinana",
"login.accountNewLink": "Naverina nalefa ny hafatra fanamarinana ny kaontinao",

"administration.congConnectInfo": "FANAZAVANA AMIN’NY FAMPIASANA INTERNET",
"administration.swsPocketAccess": "AFAKA MAMPIASA SWS POCKET",
Expand Down
Loading

0 comments on commit a0a639c

Please sign in to comment.