Merge pull request #1 from Light-it-labs/feature/recreating-login-page

Feature/recreating login page

apps/eo_web/dist/manifest.json

@@ -1,13 +1,24 @@
 {
+  "../../packages/ui/src/assets/UploadFile.svg": {
+    "file": "assets/UploadFile-694e44b5.svg",
+    "src": "../../packages/ui/src/assets/UploadFile.svg"
+  },
+  "../../packages/ui/src/assets/avatar.svg": {
+    "file": "assets/avatar-37667ed6.svg",
+    "src": "../../packages/ui/src/assets/avatar.svg"
+  },
   "src/main.css": {
-    "file": "assets/main-c9849107.css",
+    "file": "assets/main-90f1cf5a.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
+    "assets": [
+      "assets/UploadFile-694e44b5.svg"
+    ],
     "css": [
-      "assets/main-c9849107.css"
+      "assets/main-90f1cf5a.css"
     ],
-    "file": "assets/main-f1a6586a.js",
+    "file": "assets/main-3e114f18.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

apps/eo_web/index.html

@@ -9,4 +9,5 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+
 </html>

apps/eo_web/src/api/auth.ts

@@ -0,0 +1,37 @@
+import { api } from "~/api/axios";
+import { API_URL } from "~/api/common";
+import {
+  useProfileStore,
+  type Profile,
+  type Session,
+} from "~/stores/useProfileStore";
+
+interface LoginResponse {
+  profile: Profile;
+  session: Session;
+}
+
+export const login = async (credential: {
+  email: string;
+  password: string;
+}) => {
+  return await api.post<LoginResponse>(`${API_URL}/v2/profile/login`, {
+    email: credential.email,
+    password: credential.password,
+  });
+};
+
+export const register = async (credential: {
+  email: string;
+  password: string;
+}) => {
+  return await api.post<string>(`${API_URL}/v2/profile`, {
+    email: credential.email,
+    password: credential.password,
+  });
+};
+
+export const GetToken = () => {
+  const session = useProfileStore((state) => state.session);
+  return session?.token;
+};

apps/eo_web/src/api/common.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    data: {
+      [key: string]: string;
+    };
+  }
+}
+
+export const API_URL = (() => {
+  return window.data?.apiUrl || "http://localhost:4200";
+})();

apps/eo_web/src/api/email.ts

@@ -0,0 +1,12 @@
+import { api } from "~/api/axios";
+import { API_URL } from "~/api/common";
+
+export interface ResendEmailVerificationResponse {
+  success: boolean;
+}
+export const resendEmailVerification = async (email: string) => {
+  return await api.post<ResendEmailVerificationResponse>(
+    `${API_URL}/v2/profile/resend_confirmation_email`,
+    { email },
+  );
+};

apps/eo_web/src/api/useElixirApi.ts

@@ -0,0 +1,67 @@
+import { api } from "~/api/axios";
+import { API_URL } from "~/api/common";
+import { useProfileStore } from "~/stores/useProfileStore";
+
+export interface ZipCodeValidationResponseSuccess {
+  app_flags: {
+    can_delete_sessions: boolean;
+    can_edit_sessions: boolean;
+    can_mute_sessions: boolean;
+    malady_selection: Array<{
+      label: string;
+      slug: string;
+    }>;
+  };
+  birth_date: string | null;
+  caregiver: boolean;
+  ced: boolean;
+  email: string;
+  first_name: string | null;
+  gender: string | null;
+  last_name: string | null;
+  malady: string;
+  med_card: boolean;
+  phone: unknown;
+  status: string;
+  timezone: string;
+  uid: string;
+  zip: string;
+}
+
+export interface ZipCodeValidationResponseError {
+  errors: {
+    zip?: Array<{
+      code: string;
+      message: string;
+    }>;
+    default?: Array<{
+      code: string;
+      message: string;
+    }>;
+  };
+}
+
+export const useElixirApi = () => {
+  const token = useProfileStore((state) => state.session?.token);
+
+  const authHeader = {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+  const validateZipCode = async (zipCode: string) => {
+    return api.post<
+      ZipCodeValidationResponseSuccess | ZipCodeValidationResponseError
+    >(
+      `${API_URL}/v2/profile/validate_zip_code`,
+      {
+        zip: zipCode,
+      },
+      authHeader,
+    );
+  };
+
+  return {
+    validateZipCode,
+  };
+};

apps/eo_web/src/components/Header.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { Button } from "@eo/ui";
+
+import { ROUTES } from "~/router";
+import { useProfileStore } from "~/stores/useProfileStore";
+
+export const Header = () => {
+  const profile = useProfileStore((state) => state.profile);
+
+  const setProfile = useProfileStore((state) => state.setProfile);
+  const setSession = useProfileStore((state) => state.setSession);
+
+  const navigate = useNavigate();
+
+  const logout = () => {
+    setProfile(null);
+    setSession(null);
+    navigate(ROUTES.login);
+    toast.info("You has been logged out!");
+  };
+  return (
+    <header className="border-1 relative flex h-[93px] w-full flex-row items-center justify-center border bg-white shadow-lg">
+      <div></div>
+      <img
+        src="https://assets-global.website-files.com/641990da28209a736d8d7c6a/641990da28209a61b68d7cc2_eo-logo%201.svg"
+        alt="Leters EO"
+        className="h-11 w-20"
+      />
+      <div className="absolute right-12">
+        {profile && (
+          <Button variant="outline" onClick={() => logout()} className="">
+            Log out
+          </Button>
+        )}
+      </div>
+    </header>
+  );
+};

apps/eo_web/src/layouts/LayoutDefault.tsx

@@ -1,9 +1,12 @@
 import { type ReactNode } from "react";
 
+import { Header } from "~/components/Header";
+
 export const LayoutDefault = ({ children }: { children: ReactNode }) => {
   return (
-    <section className=" flex h-screen w-screen flex-row">
-      <div className=" flex h-full w-full flex-row overflow-hidden bg-red-200">
+    <section className="flex h-screen w-screen flex-col">
+      <div className="flex h-full w-full flex-col overflow-hidden bg-cream-100">
+        <Header />
         {children}
       </div>
     </section>

apps/eo_web/src/router/ProtectedRoute.tsx

@@ -1,14 +1,15 @@
 import { type ReactNode } from "react";
 import { Navigate, Outlet } from "react-router-dom";
 
-import { useUserStore } from "~/stores/useUserStore";
+import { useProfileStore } from "~/stores/useProfileStore";
 
 import { ROUTES } from "./routes";
 
-type UserState = "loggedIn" | "loggedOut";
+type ProfileState = "loggedOut" | "withZipCode" | "withoutZipCode";
 
 const HOME = {
-  loggedIn: ROUTES.base,
+  withoutZipCode: ROUTES.zipCodeValidation,
+  withZipCode: ROUTES.home,
   loggedOut: ROUTES.login,
 } as const;
 
@@ -17,10 +18,14 @@ export const ProtectedRoute = ({
   expected,
 }: {
   children?: ReactNode;
-  expected: UserState | UserState[];
+  expected: ProfileState | ProfileState[];
 }) => {
-  const userState = useUserStore((state) =>
-    state.user ? "loggedIn" : "loggedOut",
+  const userState = useProfileStore((state) =>
+    state.profile
+      ? state.profile.zip
+        ? "withZipCode"
+        : "withoutZipCode"
+      : "loggedOut",
   );
 
   if (!expected.includes(userState)) {

apps/eo_web/src/router/Router.tsx

@@ -1,7 +1,14 @@
 import { Route, Routes } from "react-router-dom";
 
 import { ROUTES } from "~/router/routes";
+import { EligibleProfile } from "~/screens/EligibleProfile";
+import { EmailVerificationLogged } from "~/screens/EmailVerificationLogged";
+import { Home } from "~/screens/Home";
 import { Login } from "~/screens/Login";
+import { Register } from "~/screens/Register";
+import { RegisterComplete } from "~/screens/RegisterComplete";
+import { UnavailableZipCode } from "~/screens/UnavailableZipCode";
+import { ZipCodeValidation } from "~/screens/ZipCodeValidation";
 
 import { ProtectedRoute } from "./ProtectedRoute";
 
@@ -11,11 +18,36 @@ export const Router = () => {
       <Route element={<ProtectedRoute expected="loggedOut" />}>
         {/* PUBLIC ONLY ROUTES */}
         <Route element={<Login />} path={ROUTES.login} />
+        <Route element={<Register />} path={ROUTES.register} />
+        <Route
+          element={<RegisterComplete />}
+          path={ROUTES.registrationComplete}
+        />
       </Route>
 
-      <Route element={<ProtectedRoute expected="loggedIn" />}>
-        {/* PRIVATE ONLY ROUTES */}
+      <Route element={<ProtectedRoute expected="withZipCode" />}>
+        <Route element={<Home />} path={ROUTES.home} />
+        <Route
+          element={<UnavailableZipCode />}
+          path={ROUTES.unavailableZipCode}
+        />
+        <Route element={<EligibleProfile />} path={ROUTES.eligibleProfile} />
       </Route>
+
+      <Route
+        element={
+          <ProtectedRoute expected={["withoutZipCode", "withZipCode"]} />
+        }
+      >
+        <Route
+          element={<ZipCodeValidation />}
+          path={ROUTES.zipCodeValidation}
+        />
+      </Route>
+      <Route
+        element={<EmailVerificationLogged />}
+        path={ROUTES.emailVerification}
+      />
     </Routes>
   );
 };

apps/eo_web/src/router/routes.tsx

@@ -1,4 +1,10 @@
 export const ROUTES = {
-  base: "app/",
-  login: "app/login",
+  login: "/app/login",
+  register: "/app/register",
+  registrationComplete: "/app/register/complete",
+  home: "/app/home",
+  zipCodeValidation: "/app/profile/zip-code-validation",
+  emailVerification: "app/profile/email-verification",
+  unavailableZipCode: "/app/profile/unavailable-zip-code",
+  eligibleProfile: "/app/profile/eligible-profile",
 } as const;

apps/eo_web/src/screens/EligibleProfile.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from "react-router-dom";
+
+import { Button, Typography } from "@eo/ui";
+
+import { LayoutDefault } from "~/layouts";
+import { ROUTES } from "~/router";
+
+export const EligibleProfile = () => {
+  const navigate = useNavigate();
+
+  return (
+    <LayoutDefault>
+      <div className="flex h-full h-full flex-col items-center justify-center">
+        <Typography variant="large" className="mx-10 text-center">
+          Looks like you’re eligible for eo! Next, we’ll get you to fill out
+          some information so we can better serve you...
+        </Typography>
+        <div className="mt-10 flex flex-row justify-center">
+          <Button className="text-center" onClick={() => navigate(ROUTES.home)}>
+            Continue
+          </Button>
+        </div>
+      </div>
+    </LayoutDefault>
+  );
+};