The-Commit-Company · nikkothari22 · Mar 19, 2024 · Mar 4, 2024 · Mar 6, 2024 · Mar 6, 2024
diff --git a/mobile/components.json b/mobile/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/mobile/index.html b/mobile/index.html
@@ -129,14 +129,17 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap"
     rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
   <style>
     body {
       background-color: rgb(9 9 11);
     }
   </style>
 </head>
 
-<body>
+<body class="dark">
   <div id="root"></div>
   <script>window.csrf_token = '{{ csrf_token }}';
     if (!window.frappe) window.frappe = {};

diff --git a/mobile/package.json b/mobile/package.json
@@ -13,9 +13,12 @@
     "@capacitor/app": "^5.0.7",
     "@capacitor/core": "^5.7.0",
     "@capacitor/haptics": "^5.0.7",
+    "@hookform/resolvers": "^3.3.4",
     "@ionic/react": "^7.7.3",
     "@ionic/react-router": "^7.7.3",
     "@ionic/storage": "^4.0.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "@tiptap/extension-code-block-lowlight": "^2.2.3",
     "@tiptap/extension-highlight": "^2.2.3",
     "@tiptap/extension-link": "^2.2.3",
@@ -30,17 +33,21 @@
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
     "cal-sans": "^1.0.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "emoji-picker-element": "^1.21.1",
     "frappe-react-sdk": "^1.3.11",
     "highlight.js": "^11.9.0",
     "html-react-parser": "^5.1.8",
+    "input-otp": "^1.2.2",
     "ionicons": "^7.2.2",
     "lowlight": "^3.1.0",
+    "lucide-react": "^0.358.0",
     "postcss": "^8.4.35",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.51.1",
     "react-icons": "^5.0.1",
     "react-intersection-observer": "^9.8.0",
     "react-markdown": "^9.0.1",
@@ -50,11 +57,14 @@
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.2.2",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "tippy.js": "^6.3.7",
     "turndown": "^7.1.2",
     "vite": "^4.5.2",
-    "vite-plugin-pwa": "^0.19.0"
+    "vite-plugin-pwa": "^0.19.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@capacitor/cli": "^5.7.0",
@@ -65,4 +75,4 @@
     "@types/turndown": "^5.0.4",
     "typescript": "^4.9.3"
   }
-}
+}
diff --git a/mobile/src/components/auth/SocialProviders.tsx b/mobile/src/components/auth/SocialProviders.tsx
@@ -0,0 +1,73 @@
+import { FaGithub, FaFacebook } from "react-icons/fa"
+import { FcGoogle } from "react-icons/fc"
+import { Button } from "../ui/button"
+import { BiEnvelope } from "react-icons/bi"
+import { ActiveScreenProps } from "../layout/AuthContainer"
+
+const OAuthProviderIcons = {
+    "github": <FaGithub size="24" />,
+    "google": <FcGoogle size="24" />,
+    "facebook": <FaFacebook fill="#316FF6" size="24" />
+}
+
+export interface OAuthProviderInterface {
+    name: 'github' | 'google' | 'facebook'
+    provider_name: string,
+    auth_url: string,
+    redirect_to: string,
+    icon: {
+        src: string,
+        alt: string
+    },
+}
+
+type OAuthProviderProps = {
+    soc: OAuthProviderInterface
+}
+
+export interface EmailLoginProviderProps extends ActiveScreenProps {
+    isSubmitting: boolean,
+}
+
+export const OAuthProvider = ({ soc }: OAuthProviderProps) => {
+    return (
+        <Button variant="outline" type="button" asChild>
+            <a href={soc.auth_url}>
+                <div className='flex items-center gap-3'>
+                    <div>
+                        {OAuthProviderIcons[soc.name] ? OAuthProviderIcons[soc.name] : <img src={soc.icon.src} alt={soc.icon.alt} ></img>}
+                    </div>
+                    <span className="font-medium text-sm leading-normal">Continue with {soc.provider_name}</span>
+                </div>
+            </a>
+        </Button>
+    )
+}
+
+export const EmailLoginProvider = ({ isSubmitting, setActiveScreen }: EmailLoginProviderProps) => {
+    return (
+        <Button
+            disabled={isSubmitting}
+            variant="outline"
+            type="button"
+            onClick={() => setActiveScreen({ login: false, loginWithEmail: true, signup: false })}
+            asChild
+            className='cursor-pointer'
+        >
+            <div className="flex items-center gap-3">
+                <BiEnvelope size="24" />
+                <span className="font-medium text-sm leading-normal">Continue with Email Link</span>
+            </div>
+        </Button>
+    )
+}
+
+export const SocialSeparator = () => {
+    return (
+        <div className="flex gap-4 w-full items-center">
+            <div className="grow border-t border-white border-opacity-20"></div>
+            <span className="shrink text-white text-opacity-30">OR</span>
+            <div className="grow border-t border-white border-opacity-20"></div>
+        </div>
+    )
+}
diff --git a/mobile/src/components/common/Callouts.tsx b/mobile/src/components/common/Callouts.tsx
@@ -0,0 +1,40 @@
+import { PropsWithChildren } from "react";
+import { FiAlertCircle, FiInfo } from "react-icons/fi";
+
+export type CalloutObject = {
+    state: boolean;
+    message: string;
+};
+
+export const SuccessCallout = ({
+    children,
+    ...props
+}: PropsWithChildren<{ message?: string }>) => {
+    return (
+        <div
+            className="bg-accent-green/10 rounded-md px-2 py-2.5 flex items-center gap-4"
+        >
+            <FiInfo size="18" className="text-accent-green"/>
+            <div>
+                <span className="font-normal text-sm text-white/80">{props.message}</span>
+            </div>
+        </div>
+    );
+};
+
+
+export const ErrorCallout = ({
+    children,
+    ...props
+}: PropsWithChildren<{ message?: string }>) => {
+    return (
+        <div
+            className="bg-rose-600/10 rounded-md px-2 py-2.5 flex items-center gap-4"
+        >
+            <FiAlertCircle size="18" className="text-destructive"/>
+            <div>
+                <span className="font-normal text-sm text-white/80">{props.message}</span>
+            </div>
+        </div>
+    );
+};
diff --git a/mobile/src/components/common/SuccessCallout.tsx b/mobile/src/components/common/SuccessCallout.tsx
diff --git a/mobile/src/components/layout/AuthContainer.tsx b/mobile/src/components/layout/AuthContainer.tsx
@@ -0,0 +1,49 @@
+import { PropsWithChildren, useState } from 'react'
+import { IonPage } from '@ionic/react';
+import { LoginWithEmail } from '@/pages/auth/LoginWithEmail';
+import { Login } from '@/pages/auth/Login';
+import { SignUp } from '@/pages/auth/SignUp';
+
+type ActiveScreenType = {
+    login: boolean,
+    loginWithEmail: boolean,
+    signup: boolean;
+}
+
+export interface ActiveScreenProps {
+    setActiveScreen: (screen: ActiveScreenType) => void
+}
+
+const AuthContainer = ({ children, ...props }: PropsWithChildren) => {
+
+    // default active screen should be login and others should be shown depending on action by user
+    const [activeScreen, setActiveScreen] = useState<ActiveScreenType>({
+        login: true,
+        loginWithEmail: false,
+        signup: false
+    })
+
+
+    return (
+        <IonPage>
+            <div className='ion-padding'>
+                <div className="left-0 right-0 top-1/4 p-2 transform justify-center items-center">
+                        <div className='pb-4'>
+                            <span className='cal-sans text-5xl font-semibold leading-normal'>raven</span>
+                        </div>
+                    <div className='w-100'>
+                        {
+                            <>
+                                {activeScreen.login && <Login setActiveScreen={setActiveScreen}></Login>}
+                                {activeScreen.loginWithEmail && <LoginWithEmail setActiveScreen={setActiveScreen}></LoginWithEmail>}
+                                {activeScreen.signup && <SignUp setActiveScreen={setActiveScreen}></SignUp>}
+                            </>
+                        }
+                    </div>
+                </div>
+            </div>
+        </IonPage>
+    )
+}
+
+export default AuthContainer;
diff --git a/mobile/src/components/layout/Navbar.tsx b/mobile/src/components/layout/Navbar.tsx
@@ -1,13 +1,13 @@
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/react"
 import { BiChat, BiHash, BiUser } from "react-icons/bi"
-import { Redirect, Route } from "react-router-dom"
+import { Route } from "react-router-dom"
 import { Channels } from "../../pages/channels"
 import { DirectMessageList } from "../../pages/direct-messages/DirectMessageList"
 import { Profile } from "../../pages/profile"
 import { PropsWithChildren, useContext } from "react"
 import { UserContext } from "../../utils/auth/UserProvider"
 import { FullPageLoader } from "./loaders/FullPageLoader"
-import { Login } from "../../pages/auth/Login"
+import AuthContainer from "./AuthContainer"
 
 export const Navbar = () => {
     const { currentUser, isLoading } = useContext(UserContext)
@@ -68,7 +68,7 @@ export const ProtectedRoute = ({ children }: PropsWithChildren) => {
         return <FullPageLoader />
     }
     if (!currentUser || currentUser === 'Guest') {
-        return <Login />
+        return <AuthContainer />
     } else {
         return children
     }

diff --git a/mobile/src/components/ui/button.tsx b/mobile/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input/20 bg-background hover:bg-foreground/10 hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-link underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }