91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import { useDispatch } from '../state/Store';
|
|
import { Translate, translate } from "../i18n/i18n";
|
|
import API, { APIError } from "../API";
|
|
import { setAccessToken } from "../state/UserSlice";
|
|
import { Center, Button, Text } from 'native-base';
|
|
import SigninForm from "../components/forms/signinform";
|
|
import SignupForm from "../components/forms/signupform";
|
|
import TextButton from "../components/TextButton";
|
|
import { GoogleSignin, GoogleSigninButton } from '@react-native-community/google-signin';
|
|
import Constants from 'expo-constants';
|
|
|
|
const hanldeSignin = async (username: string, password: string, apiSetter: (accessToken: string) => void): Promise<string> => {
|
|
try {
|
|
const apiAccess = await API.authenticate({ username, password });
|
|
apiSetter(apiAccess);
|
|
return translate("loggedIn");
|
|
} catch (error) {
|
|
if (error instanceof APIError) return translate(error.userMessage);
|
|
if (error instanceof Error) return error.message;
|
|
return translate("unknownError");
|
|
}
|
|
};
|
|
|
|
const handleSignup = async (username: string, password: string, email: string, apiSetter: (accessToken: string) => void): Promise<string> => {
|
|
try {
|
|
const apiAccess = await API.createAccount({ username, password, email });
|
|
apiSetter(apiAccess);
|
|
return translate("loggedIn");
|
|
} catch (error) {
|
|
if (error instanceof APIError) return translate(error.userMessage);
|
|
if (error instanceof Error) return error.message;
|
|
return translate("unknownError");
|
|
}
|
|
};
|
|
|
|
GoogleSignin.configure({
|
|
webClientId: Constants.manifest?.extra?.googleClientId,
|
|
offlineAccess: true,
|
|
});
|
|
|
|
const AuthenticationView = () => {
|
|
const dispatch = useDispatch();
|
|
const [mode, setMode] = React.useState("signin" as "signin" | "signup");
|
|
const [signinInProgress, setSigninInProgress] = React.useState(false);
|
|
|
|
|
|
const handleGoogleSignin = React.useCallback(async () => {
|
|
try {
|
|
setSigninInProgress(true);
|
|
await GoogleSignin.hasPlayServices();
|
|
const userInfo = await GoogleSignin.signIn();
|
|
const apiAccess = await API.authWithGoogle({ token: userInfo.idToken });
|
|
dispatch(setAccessToken(apiAccess));
|
|
return;
|
|
} catch (error) {
|
|
console.log(error);
|
|
if (error instanceof APIError) return translate(error.userMessage);
|
|
if (error instanceof Error) return error.message;
|
|
return translate("unknownError");
|
|
} finally {
|
|
setSigninInProgress(false);
|
|
}
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<Center style={{ flex: 1 }}>
|
|
<Text><Translate translationKey='welcome'/></Text>
|
|
{mode === "signin"
|
|
? <SigninForm onSubmit={(username, password) => hanldeSignin(username, password, (accessToken) => dispatch(setAccessToken(accessToken)))} />
|
|
: <SignupForm onSubmit={(username, password, email) => handleSignup(username, password, email, (accessToken) => dispatch(setAccessToken(accessToken)))} />
|
|
}
|
|
{ mode ==="signin" && <Button variant="outline" marginTop={5} colorScheme="error" >{translate("forgottenPassword")}</Button> }
|
|
<TextButton
|
|
translate={{ translationKey: mode === "signin" ? "signUpBtn" : "signInBtn" }}
|
|
variant='outline' marginTop={5} colorScheme='primary'
|
|
onPress={() => setMode(mode === "signin" ? "signup" : "signin")}
|
|
/>
|
|
<GoogleSigninButton
|
|
style={{ width: 192, height: 48, marginTop: 5 }}
|
|
size={GoogleSigninButton.Size.Wide}
|
|
color={GoogleSigninButton.Color.Dark}
|
|
onPress={handleGoogleSignin}
|
|
disabled={signinInProgress}
|
|
/>
|
|
</Center>
|
|
);
|
|
};
|
|
|
|
export default AuthenticationView;
|