Implemented login pages

kevin9foong · Jun 13, 2021 · 9bd5b9c · 9bd5b9c
1 parent f9f7745
commit 9bd5b9c
Show file tree

Hide file tree

Showing 13 changed files with 286 additions and 97 deletions.
diff --git a/app/App.tsx b/app/App.tsx
@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 import * as eva from '@eva-design/eva';
 import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
 import { EvaIconsPack } from '@ui-kitten/eva-icons';
+import { default as theme } from './custom-theme.json';
 
 // our own imports ->
 import rootReducer from './redux/reducers/RootReducer';
@@ -20,7 +21,7 @@ const App: React.FC<Props> = () => {
   return (
     <Provider store={store}>
       <IconRegistry icons={EvaIconsPack} />
-      <ApplicationProvider {...eva} theme={eva.light}>
+      <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
         <AuthContainer />
       </ApplicationProvider>
     </Provider>

diff --git a/app/AuthContainer.tsx b/app/AuthContainer.tsx
@@ -14,18 +14,17 @@ import Router from './Router';
 
 WebBrowser.maybeCompleteAuthSession();
 
-type OwnProps = {
-}
+type OwnProps = {};
 
 type DispatchProps = {
   login: (
     userId: string,
     userName: string,
     userAvatar: string,
     userToken: string
-    ) => IAction,
-  logout: () => IAction,
-  retrieveToken: (userToken: string | null) => IAction
+  ) => IAction;
+  logout: () => IAction;
+  retrieveToken: (userToken: string | null) => IAction;
 };
 
 const AuthContainer = (props: OwnProps & DispatchProps) => {
@@ -74,36 +73,35 @@ const AuthContainer = (props: OwnProps & DispatchProps) => {
                 data.userId,
                 data.userName,
                 data.userAvatar,
-                data.userToken);
+                data.userToken
+              );
               // );
             } else {
               console.error('No valid JWT retrieved.');
             }
-          }).then(() => setIsLoading(false))
+          })
+          .then(() => setIsLoading(false))
           .catch((err) => console.error(err));
       }
     }
   }, [res, request]);
 
   return (
-  <>
-    {!request || isLoading
-      ? (
-          // TODO: fix splash screen with expo splash screen
-          <SplashScreen />
-        )
-      : (
-          <AuthContext.Provider value={authContext}>
-            <Router />
-          </AuthContext.Provider>
-        )}
+    <>
+      {!request || isLoading ? (
+        // TODO: fix splash screen with expo splash screen
+        <SplashScreen />
+      ) : (
+        <AuthContext.Provider value={authContext}>
+          <Router />
+        </AuthContext.Provider>
+      )}
     </>
   );
 };
 
-export default connect(null,
-  {
-    login: login,
-    logout: logout,
-    retrieveToken: retrieveToken
-  })(AuthContainer);
+export default connect(null, {
+  login: login,
+  logout: logout,
+  retrieveToken: retrieveToken
+})(AuthContainer);
diff --git a/app/assets/logo.png b/app/assets/logo.png
diff --git a/app/components/todos/DailySchedule.tsx b/app/components/todos/DailySchedule.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Text, ListItem, List, Divider } from '@ui-kitten/components';
-import CardList from "./CardList";
+import CardList from './CardList';
 
 type scheduleItem = {
   title: String;
@@ -15,25 +14,29 @@ type displayableItem = {
   name: String;
   prefix: String;
   desc: String;
-}
+};
 
 type propObject = {
   schedule: Array<scheduleItem>;
   handleSchedule: Function;
 };
 
 const DailySchedule = ({ schedule, handleSchedule }: propObject) => {
-
-  const filterSched = (item: scheduleItem) : boolean => {
+  const filterSched = (item: scheduleItem): boolean => {
     const today = new Date();
     const itemDate = item.date;
-    return itemDate.getDate() === today.getDate() && itemDate.getMonth() === today.getMonth() && itemDate.getFullYear() === today.getFullYear();
+    return (
+      itemDate.getDate() === today.getDate() &&
+      itemDate.getMonth() === today.getMonth() &&
+      itemDate.getFullYear() === today.getFullYear()
+    );
   };
 
-  const formatSched = (item: scheduleItem) : displayableItem => {
+  const formatSched = (item: scheduleItem): displayableItem => {
     return {
-      prefix: `${item.startHour}:${item.startMinute === 0 ? '00' : item.startMinute
-        } - ${item.endHour}:${item.endMinute === 0 ? '00' : item.endMinute}`,
+      prefix: `${item.startHour}:${
+        item.startMinute === 0 ? '00' : item.startMinute
+      } - ${item.endHour}:${item.endMinute === 0 ? '00' : item.endMinute}`,
       name: item.title,
       desc: ''
     };

diff --git a/app/components/todos/UpcomingDeadlines.tsx b/app/components/todos/UpcomingDeadlines.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { ListItem, List, Text, Divider } from '@ui-kitten/components';
-import CardList from "./CardList";
+import CardList from './CardList';
 
 type PropObject = {
   todos: Array<todoItem>;
@@ -11,7 +10,7 @@ type displayableItem = {
   name: String;
   prefix: String;
   desc: String;
-}
+};
 
 type todoItem = {
   id: number;
@@ -21,19 +20,17 @@ type todoItem = {
 };
 
 const UpcomingDeadlines = ({ todos, handleTodo }: PropObject) => {
-
-  const formatTodo = (item: todoItem) : displayableItem => {
+  const formatTodo = (item: todoItem): displayableItem => {
     return {
       prefix: `${item.date.getDate()}/${
-          item.date.getMonth() + 1
-        }/${item.date.getFullYear()}`,
+        item.date.getMonth() + 1
+      }/${item.date.getFullYear()}`,
       name: item.title,
       desc: item.desc
     };
   };
 
-
-  return <CardList data={todos.map(formatTodo)}/>;
+  return <CardList data={todos.map(formatTodo)} />;
 };
 
 export default UpcomingDeadlines;
diff --git a/app/custom-theme.json b/app/custom-theme.json
@@ -0,0 +1,77 @@
+{
+  "color-primary-100": "#D6E4FF",
+  "color-primary-200": "#ADC8FF",
+  "color-primary-300": "#84A9FF",
+  "color-primary-400": "#6690FF",
+  "color-primary-500": "#3366FF",
+  "color-primary-600": "#254EDB",
+  "color-primary-700": "#1939B7",
+  "color-primary-800": "#102693",
+  "color-primary-900": "#091A7A",
+  "color-primary-transparent-100": "rgba(51, 102, 255, 0.08)",
+  "color-primary-transparent-200": "rgba(51, 102, 255, 0.16)",
+  "color-primary-transparent-300": "rgba(51, 102, 255, 0.24)",
+  "color-primary-transparent-400": "rgba(51, 102, 255, 0.32)",
+  "color-primary-transparent-500": "rgba(51, 102, 255, 0.4)",
+  "color-primary-transparent-600": "rgba(51, 102, 255, 0.48)",
+  "color-success-100": "#F0FCD3",
+  "color-success-200": "#DFFAA8",
+  "color-success-300": "#C4F27A",
+  "color-success-400": "#A8E658",
+  "color-success-500": "#81D626",
+  "color-success-600": "#65B81B",
+  "color-success-700": "#4B9A13",
+  "color-success-800": "#357C0C",
+  "color-success-900": "#266607",
+  "color-success-transparent-100": "rgba(129, 214, 38, 0.08)",
+  "color-success-transparent-200": "rgba(129, 214, 38, 0.16)",
+  "color-success-transparent-300": "rgba(129, 214, 38, 0.24)",
+  "color-success-transparent-400": "rgba(129, 214, 38, 0.32)",
+  "color-success-transparent-500": "rgba(129, 214, 38, 0.4)",
+  "color-success-transparent-600": "rgba(129, 214, 38, 0.48)",
+  "color-info-100": "#D6F6FF",
+  "color-info-200": "#AEE9FF",
+  "color-info-300": "#85D7FF",
+  "color-info-400": "#67C5FF",
+  "color-info-500": "#35A7FF",
+  "color-info-600": "#2682DB",
+  "color-info-700": "#1A61B7",
+  "color-info-800": "#104493",
+  "color-info-900": "#0A307A",
+  "color-info-transparent-100": "rgba(53, 167, 255, 0.08)",
+  "color-info-transparent-200": "rgba(53, 167, 255, 0.16)",
+  "color-info-transparent-300": "rgba(53, 167, 255, 0.24)",
+  "color-info-transparent-400": "rgba(53, 167, 255, 0.32)",
+  "color-info-transparent-500": "rgba(53, 167, 255, 0.4)",
+  "color-info-transparent-600": "rgba(53, 167, 255, 0.48)",
+  "color-warning-100": "#FFF9CC",
+  "color-warning-200": "#FFF099",
+  "color-warning-300": "#FFE666",
+  "color-warning-400": "#FFDC3F",
+  "color-warning-500": "#FFCC00",
+  "color-warning-600": "#DBAA00",
+  "color-warning-700": "#B78B00",
+  "color-warning-800": "#936D00",
+  "color-warning-900": "#7A5700",
+  "color-warning-transparent-100": "rgba(255, 204, 0, 0.08)",
+  "color-warning-transparent-200": "rgba(255, 204, 0, 0.16)",
+  "color-warning-transparent-300": "rgba(255, 204, 0, 0.24)",
+  "color-warning-transparent-400": "rgba(255, 204, 0, 0.32)",
+  "color-warning-transparent-500": "rgba(255, 204, 0, 0.4)",
+  "color-warning-transparent-600": "rgba(255, 204, 0, 0.48)",
+  "color-danger-100": "#FFEBD3",
+  "color-danger-200": "#FFD2A9",
+  "color-danger-300": "#FFB47E",
+  "color-danger-400": "#FF965D",
+  "color-danger-500": "#FF6528",
+  "color-danger-600": "#DB461D",
+  "color-danger-700": "#B72C14",
+  "color-danger-800": "#93170C",
+  "color-danger-900": "#7A0807",
+  "color-danger-transparent-100": "rgba(255, 101, 40, 0.08)",
+  "color-danger-transparent-200": "rgba(255, 101, 40, 0.16)",
+  "color-danger-transparent-300": "rgba(255, 101, 40, 0.24)",
+  "color-danger-transparent-400": "rgba(255, 101, 40, 0.32)",
+  "color-danger-transparent-500": "rgba(255, 101, 40, 0.4)",
+  "color-danger-transparent-600": "rgba(255, 101, 40, 0.48)"
+}
diff --git a/app/redux/actions/ActionType.tsx b/app/redux/actions/ActionType.tsx
@@ -1,4 +1,4 @@
 export interface IAction {
-    type: string,
-    payload?: any
+  type: string;
+  payload?: any;
 }
diff --git a/app/redux/actions/AuthActions.tsx b/app/redux/actions/AuthActions.tsx
@@ -4,7 +4,8 @@ export const login = (
   userId: string,
   userName: string,
   userAvatar: string,
-  userToken: string): IAction => ({
+  userToken: string
+): IAction => ({
   type: 'LOGIN',
   payload: {
     userId,

diff --git a/app/screens/auth/Login.tsx b/app/screens/auth/Login.tsx
@@ -1,38 +1,63 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Layout } from '@ui-kitten/components';
+import { Button } from '@ui-kitten/components';
 
 import LoginStyles from '../../styles/Login.Styles';
-import IconButton from '../../components/user/IconButton';
-import LoginAvatar from '../../components/user/Avatar';
-import AuthContext from '../../contexts/AuthContext';
+import { Image, View } from 'react-native';
+import LoginModal from './LoginModal';
 
 type OwnProps = {
-  userName?: string,
-  userAvatar?: string,
-  userId?: string
+  userName?: string;
+  userAvatar?: string;
+  userId?: string;
+  navigation: any;
 };
 
+enum LoginTypes {
+  register = 'REGISTER',
+  login = 'LOGIN',
+}
+
 const LoginScreen: React.FC<OwnProps> = (props: OwnProps) => {
-  const { login } = React.useContext(AuthContext);
+  const [visible, setVisible] = React.useState(false);
+  const [loginType, setLoginType] = React.useState(LoginTypes.login);
+
+  const showModal = (type: LoginTypes): void => {
+    setLoginType(type);
+    setVisible(true);
+  };
 
   return (
-    <Layout style={LoginStyles.container}>
-      <LoginAvatar
-        greetingMessage={props.userName ? `Welcome ${props.userName}` : 'Welcome Stranger!'}
-        avatarImgSource={props.userAvatar}
-        actionMessage={props.userId ? undefined : 'Please log in to continue.'}
+    <View style={LoginStyles.container}>
+      <Image
+        style={LoginStyles.image}
+        source={require('../../assets/logo.png')}
       />
-      <IconButton
-        iconName="google"
-        buttonText="Login with Google"
-        handleButtonPress={login}
+      <View style={LoginStyles.buttonGroup}>
+        <Button
+          onPress={() => showModal(LoginTypes.register)}
+          style={LoginStyles.button}
+        >
+          Register
+        </Button>
+        <Button
+          onPress={() => showModal(LoginTypes.login)}
+          style={LoginStyles.button}
+        >
+          Login
+        </Button>
+      </View>
+      <LoginModal
+        visible={visible}
+        handleEvent={null}
+        type={loginType}
+        setVisible={setVisible}
       />
-    </Layout>
+    </View>
   );
 };
 
-const mapStateToProps = ({ auth } : any) => ({
+const mapStateToProps = ({ auth }: any) => ({
   userName: auth.userName,
   userAvatar: auth.userAvatar,
   userId: auth.userId