Add one-time token login flow and deep-link handling
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Text, View, StyleSheet, Image } from 'react-native';
|
||||
import { TextInput, Button, HelperText } from 'react-native-paper';
|
||||
import API from './../API.js';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { useNavigation, useRoute } from '@react-navigation/native';
|
||||
import i18n from "../i18nMessages.js";
|
||||
|
||||
|
||||
@@ -11,7 +11,12 @@ let LoginForm = () => {
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [tries, setTries] = useState(0);
|
||||
const [tokenLinkSending, setTokenLinkSending] = useState(false);
|
||||
const [tokenLoginLoading, setTokenLoginLoading] = useState(false);
|
||||
const [tokenLoginError, setTokenLoginError] = useState('');
|
||||
const navigation = useNavigation();
|
||||
const route = useRoute();
|
||||
const handledTokenRef = useRef('');
|
||||
const resetPasswordBol = tries > 2;
|
||||
|
||||
const resetPassword = async () => {
|
||||
@@ -40,6 +45,44 @@ let LoginForm = () => {
|
||||
//alert(i18n.t('message.wrongInformation'))
|
||||
};
|
||||
|
||||
const requestOneTimeLink = async () => {
|
||||
if (!email.trim()) return;
|
||||
setTokenLinkSending(true);
|
||||
setTokenLoginError('');
|
||||
try {
|
||||
await API.resetPassword(email.trim());
|
||||
alert("If this account exists, we sent a one-time sign-in link to your email.");
|
||||
} finally {
|
||||
setTokenLinkSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = typeof route?.params?.token === "string" ? route.params.token.trim() : "";
|
||||
if (!token) return;
|
||||
if (handledTokenRef.current === token) return;
|
||||
handledTokenRef.current = token;
|
||||
let cancelled = false;
|
||||
const consumeToken = async () => {
|
||||
setTokenLoginLoading(true);
|
||||
setTokenLoginError('');
|
||||
const r = await API.logInWithPasswordToken(token);
|
||||
if (cancelled) return;
|
||||
setTokenLoginLoading(false);
|
||||
if (r?.status === "ok") {
|
||||
return navigation.reset({
|
||||
index: 0,
|
||||
routes: [{ name: 'MainNavigation' }],
|
||||
});
|
||||
}
|
||||
setTokenLoginError(r?.status || "Invalid or expired token");
|
||||
};
|
||||
consumeToken();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [route?.params?.token]);
|
||||
|
||||
return (
|
||||
<View style={styles.mainView}>
|
||||
<TextInput
|
||||
@@ -73,6 +116,12 @@ let LoginForm = () => {
|
||||
{error === 'incorrect password' ? <HelperText type="error" visible={true}>
|
||||
{i18n.t("message.reviewPassword")}
|
||||
</HelperText> : <></>}
|
||||
{tokenLoginLoading ? <HelperText type="info" visible={true}>
|
||||
Signing you in from email link...
|
||||
</HelperText> : <></>}
|
||||
{tokenLoginError ? <HelperText type="error" visible={true}>
|
||||
{tokenLoginError}
|
||||
</HelperText> : <></>}
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<Button
|
||||
style={styles.button}
|
||||
@@ -93,6 +142,13 @@ let LoginForm = () => {
|
||||
</Button> : <></>
|
||||
}
|
||||
</View>
|
||||
<Button
|
||||
style={styles.button}
|
||||
disabled={!email.trim() || tokenLinkSending}
|
||||
onPress={requestOneTimeLink}
|
||||
>
|
||||
{tokenLinkSending ? "Sending..." : "Email me a one-time sign-in link"}
|
||||
</Button>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user