Add authentication validation example.

1989ONCE · May 4, 2023 · d5a2040 · d5a2040
1 parent 60ed086
commit d5a2040
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 93 deletions.
diff --git a/navigation/AuthStack.jsx b/navigation/AuthStack.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 
-import { AuthScreen } from '../screens/Auth/Login';
+import { AuthScreen } from '../screens/Auth';
 
 const Stack = createStackNavigator();
 
@@ -12,8 +12,6 @@ export function AuthStack() {
       screenOptions={{ headerShown: false }}
     >
       <Stack.Screen name="Login" component={AuthScreen} />
-      {/* <Stack.Screen name='Signup' component={SignupScreen} />
-      <Stack.Screen name='ForgotPassword' component={ForgotPasswordScreen} /> */}
     </Stack.Navigator>
   );
 }
diff --git a/screens/Auth/Login.jsx b/screens/Auth/Login.jsx
@@ -1,27 +1,25 @@
 import React, { useState } from 'react';
-import { SafeAreaView } from 'react-native';
 
 import {
-  Avatar, Box, Button, Heading, Input, Link, Text, Image,
+  Box, Button, Heading, Input, Text,
 } from 'native-base';
-import { signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
-import * as ImagePicker from 'expo-image-picker';
-import logo from '../../assets/icon.png';
-import ActiveController from '../../controller/Active';
+import { signInWithEmailAndPassword } from 'firebase/auth';
 import { auth } from '../../config';
 
-const supportedURL = 'https://ncuappteam.github.io/PRIVACY';
-
-function LoginScreen() {
+export function LoginScreen() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [msg, setMsg] = useState('');
+
+  const localizeMsg = {
+    'auth/invalid-email': '電子郵件無效',
+    'auth/user-not-found': '找不到使用者',
+  };
 
   const login = () => {
     signInWithEmailAndPassword(auth, email, password)
-      .then((userCredential) => {
-        // Signed in
-        const { user } = userCredential;
-        // ...
+      .catch((err) => {
+        setMsg(localizeMsg[err.code]);
       });
   };
 
@@ -30,84 +28,8 @@ function LoginScreen() {
       <Heading>登入</Heading>
       <Input mx="3" placeholder="電子郵件" wx="100%" onChangeText={(text) => setEmail(text)} />
       <Input type="password" mx="3" placeholder="密碼" wx="100%" onChangeText={(text) => setPassword(text)} />
+      <Text>{msg}</Text>
       <Button onPress={login}>登入</Button>
     </Box>
   );
 }
-
-function RegisterScreen() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [registerData, setRegisterData] = useState({});
-  const [avatar, setAvatar] = useState();
-
-  const pickImage = async () => {
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: true,
-      aspect: [1, 1],
-      quality: 0.2,
-    });
-
-    if (!result.assets[0].canceled) {
-      setAvatar(result.assets[0].uri);
-      if (avatar === undefined) {
-        setAvatar(result.assets[0].uri);
-        setRegisterData({ ...registerData, avatar: result.assets[0].uri });
-      }
-    }
-  };
-
-  const register = () => {
-    createUserWithEmailAndPassword(auth, email, password)
-      .then((userCredential) => {
-        // Signed in
-        const { user } = userCredential;
-        ActiveController.addUser(user.uid, registerData);
-        // ...
-      });
-  };
-
-  return (
-    <Box alignItems="center">
-      <Heading>註冊帳號</Heading>
-      <Input mx="3" placeholder="電子郵件" wx="100%" onChangeText={(text) => { setEmail(text); setRegisterData({ ...registerData, email: text }); }} />
-      <Input type="password" mx="3" placeholder="密碼" wx="100%" onChangeText={(text) => setPassword(text)} />
-      <Input mx="3" placeholder="姓名" wx="100%" onChangeText={(name) => setRegisterData({ ...registerData, name })} />
-      <Input mx="3" placeholder="年級" wx="100%" onChangeText={(grade) => setRegisterData({ ...registerData, grade })} />
-      <Input mx="3" placeholder="系別" wx="100%" onChangeText={(major) => setRegisterData({ ...registerData, major })} />
-      <Input mx="3" placeholder="電話" wx="100%" onChangeText={(phone) => setRegisterData({ ...registerData, phone })} />
-      <Input mx="3" placeholder="學號" wx="100%" onChangeText={(id) => setRegisterData({ ...registerData, studentID: id })} />
-      <Box>
-        <Text onPress={pickImage} style={{ alignSelf: 'center' }}>新增頭貼</Text>
-        <Image
-          alt="avatar"
-          source={{ uri: avatar }}
-          style={{
-            width: 100, height: 100, borderRadius: 50, marginVertical: 10,
-          }}
-        />
-      </Box>
-
-      <Button onPress={register}>
-        註冊
-      </Button>
-    </Box>
-  );
-}
-
-export function AuthScreen() {
-  const [register, setRegister] = useState(false);
-
-  return (
-    <SafeAreaView>
-      <Box alignItems="center">
-        <Avatar source={logo} />
-        <Heading>歡迎使用 NCU-App</Heading>
-        {register ? <RegisterScreen /> : <LoginScreen /> }
-        <Link onPress={() => setRegister(!register)} mt="8">{register ? '已有帳號' : '申請帳號' }</Link>
-        <Link mt="8" href={supportedURL}>隱私權政策</Link>
-      </Box>
-    </SafeAreaView>
-  );
-}
diff --git a/screens/Auth/Register.jsx b/screens/Auth/Register.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+import {
+  Box, Button, Heading, Input, Text, Image,
+} from 'native-base';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import * as ImagePicker from 'expo-image-picker';
+import ActiveController from '../../controller/Active';
+import { auth } from '../../config';
+
+export function RegisterScreen() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [registerData, setRegisterData] = useState({});
+  const [avatar, setAvatar] = useState();
+  const [msg, setMsg] = useState();
+
+  const pickImage = async () => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.2,
+    });
+
+    if (!result.assets[0].canceled) {
+      setAvatar(result.assets[0].uri);
+      if (avatar === undefined) {
+        setAvatar(result.assets[0].uri);
+        setRegisterData({ ...registerData, avatar: result.assets[0].uri });
+      }
+    }
+  };
+
+  const register = () => {
+    if (Object.values(registerData).length < 6) {
+      setMsg('請填寫完整');
+      return;
+    }
+    createUserWithEmailAndPassword(auth, email, password)
+      .then((userCredential) => {
+        // Signed in
+        const { user } = userCredential;
+        ActiveController.addUser(user.uid, registerData);
+      })
+      .catch((err) => {
+        setMsg(err.code);
+      });
+  };
+
+  return (
+    <Box alignItems="center">
+      <Heading>註冊帳號</Heading>
+      <Input mx="3" placeholder="電子郵件" wx="100%" onChangeText={(text) => { setEmail(text); setRegisterData({ ...registerData, email: text }); }} />
+      <Input type="password" mx="3" placeholder="密碼" wx="100%" onChangeText={(text) => setPassword(text)} />
+      <Input mx="3" placeholder="姓名" wx="100%" onChangeText={(name) => setRegisterData({ ...registerData, name })} />
+      <Input mx="3" placeholder="年級" wx="100%" onChangeText={(grade) => setRegisterData({ ...registerData, grade })} />
+      <Input mx="3" placeholder="系別" wx="100%" onChangeText={(major) => setRegisterData({ ...registerData, major })} />
+      <Input mx="3" placeholder="電話" wx="100%" onChangeText={(phone) => setRegisterData({ ...registerData, phone })} />
+      <Input mx="3" placeholder="學號" wx="100%" onChangeText={(id) => setRegisterData({ ...registerData, studentID: id })} />
+      <Box>
+        <Text onPress={pickImage} style={{ alignSelf: 'center' }}>新增頭貼</Text>
+        <Image
+          alt="avatar"
+          source={{ uri: avatar }}
+          style={{
+            width: 100, height: 100, borderRadius: 50, marginVertical: 10,
+          }}
+        />
+      </Box>
+      <Text>{ msg }</Text>
+
+      <Button onPress={register}>
+        註冊
+      </Button>
+    </Box>
+  );
+}
diff --git a/screens/Auth/index.jsx b/screens/Auth/index.jsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { SafeAreaView } from 'react-native';
+
+import {
+  Avatar, Box, Heading, Link,
+} from 'native-base';
+import logo from '../../assets/icon.png';
+import { LoginScreen } from './Login';
+import { RegisterScreen } from './Register';
+
+const supportedURL = 'https://ncuappteam.github.io/PRIVACY';
+
+export function AuthScreen() {
+  const [register, setRegister] = useState(false);
+
+  return (
+    <SafeAreaView>
+      <Box alignItems="center">
+        <Avatar source={logo} />
+        <Heading>歡迎使用 NCU-App</Heading>
+        {register ? <RegisterScreen /> : <LoginScreen /> }
+        <Link onPress={() => setRegister(!register)} mt="8">{register ? '已有帳號' : '申請帳號' }</Link>
+        <Link mt="8" href={supportedURL}>隱私權政策</Link>
+      </Box>
+    </SafeAreaView>
+  );
+}