Impact-Africa-Network · InnocentBaluge · Aug 5, 2022
diff --git a/expensly_app/public/Expensly.png b/expensly_app/public/Expensly.png
diff --git a/expensly_app/public/android-chrome-192x192.png b/expensly_app/public/android-chrome-192x192.png
diff --git a/expensly_app/public/android-chrome-512x512.png b/expensly_app/public/android-chrome-512x512.png
diff --git a/expensly_app/public/apple-touch-icon.png b/expensly_app/public/apple-touch-icon.png
diff --git a/expensly_app/public/assets/Expensly.png b/expensly_app/public/assets/Expensly.png
diff --git a/expensly_app/public/assets/Expensly1.png b/expensly_app/public/assets/Expensly1.png
diff --git a/expensly_app/public/favicon-16x16.png b/expensly_app/public/favicon-16x16.png
diff --git a/expensly_app/public/favicon-32x32.png b/expensly_app/public/favicon-32x32.png
diff --git a/expensly_app/public/favicon.ico b/expensly_app/public/favicon.ico
diff --git a/expensly_app/public/index.html b/expensly_app/public/index.html
@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/Expensly.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Expensly | Expense tracker</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/expensly_app/src/App.js b/expensly_app/src/App.js
@@ -1,24 +1,32 @@
-import logo from './logo.svg';
-import './App.css';
+import { useState } from "react";
+import { CssBaseline } from "@mui/material";
+import { Route, Routes, Navigate, useLocation } from "react-router-dom";
+import Home from "./pages/Home";
+import Login from "./pages/Login";
+import Signup from "./pages/Signup";
 
 function App() {
+  const [auth, setAuth] = useState(false);
+  const location = useLocation();
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <CssBaseline />
+      <Routes>
+        <Route path="/login" element={<Login setAuth={setAuth} />} />
+        <Route path="/signup" element={<Signup setAuth={setAuth} />} />
+        <Route
+          path="/"
+          element={
+            auth ? (
+              <Home setAuth={setAuth} />
+            ) : (
+              <Navigate to="/login" state={{ from: location }} replace />
+            )
+          }
+        />
+      </Routes>
+    </>
   );
 }
 

diff --git a/expensly_app/src/components/LoginForm.jsx b/expensly_app/src/components/LoginForm.jsx
@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
+import { Form, FormikProvider, useFormik } from "formik";
+import * as Yup from "yup";
+
+import {
+  Box,
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  InputAdornment,
+  Link,
+  Stack,
+  TextField,
+} from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+let easing = [0.6, -0.05, 0.01, 0.99];
+const animate = {
+  opacity: 1,
+  y: 0,
+  transition: {
+    duration: 0.6,
+    ease: easing,
+    delay: 0.16,
+  },
+};
+
+const LoginForm = ({ setAuth }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = location.state?.from?.pathname || "/";
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  const LoginSchema = Yup.object().shape({
+    email: Yup.string()
+      .email("Provide a valid email address")
+      .required("Email is required"),
+    password: Yup.string().required("Password is required"),
+  });
+
+  const formik = useFormik({
+    initialValues: {
+      email: "",
+      password: "",
+      remember: true,
+    },
+    validationSchema: LoginSchema,
+    onSubmit: () => {
+      console.log("submitting...");
+      setTimeout(() => {
+        console.log("submited!!");
+        setAuth(true);
+        navigate(from, { replace: true });
+      }, 2000);
+    },
+  });
+
+  const { errors, touched, values, isSubmitting, handleSubmit, getFieldProps } =
+    formik;
+
+  return (
+    <FormikProvider value={formik}>
+      <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+        <Box
+          component={motion.div}
+          animate={{
+            transition: {
+              staggerChildren: 0.55,
+            },
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 3,
+            }}
+            component={motion.div}
+            initial={{ opacity: 0, y: 40 }}
+            animate={animate}
+          >
+            <TextField
+              fullWidth
+              autoComplete="username"
+              type="email"
+              label="Email Address"
+              {...getFieldProps("email")}
+              error={Boolean(touched.email && errors.email)}
+              helperText={touched.email && errors.email}
+            />
+
+            <TextField
+              fullWidth
+              autoComplete="current-password"
+              type={showPassword ? "text" : "password"}
+              label="Password"
+              {...getFieldProps("password")}
+              error={Boolean(touched.password && errors.password)}
+              helperText={touched.password && errors.password}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={() => setShowPassword((prev) => !prev)}
+                    >
+                      {showPassword ? (
+                        <Icon icon="eva:eye-fill" />
+                      ) : (
+                        <Icon icon="eva:eye-off-fill" />
+                      )}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Box>
+
+          <Box
+            component={motion.div}
+            initial={{ opacity: 0, y: 20 }}
+            animate={animate}
+          >
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              sx={{ my: 2 }}
+            >
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    {...getFieldProps("remember")}
+                    checked={values.remember}
+
+                  />
+                }
+                label="Remember me"
+              />
+
+              <Link
+                component={RouterLink}
+                variant="subtitle2"
+                to="#"
+                underline="hover"
+                style ={{color: "#32b257"}}
+              >
+                Forgot password?
+              </Link>
+            </Stack>
+
+            <LoadingButton
+              fullWidth
+              style={{backgroundColor : "#32b257"}}
+              size="large"
+              type="submit"
+              variant="contained"
+              loading={isSubmitting}
+            >
+              {isSubmitting ? "loading..." : "Login"}
+            </LoadingButton>
+          </Box>
+        </Box>
+      </Form>
+    </FormikProvider>
+  );
+};
+
+export default LoginForm;
diff --git a/expensly_app/src/components/Logo.jsx b/expensly_app/src/components/Logo.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Box } from "@mui/material";
+
+const Logo = () => {
+  return (
+    <Box>
+      <Link to="/">
+        <Box component="img" src="/assets/Expensly.png" alt="logo" />
+      </Link>
+    </Box>
+  );
+};
+
+export default Logo;