feat: allow login with oauth providers set in the sites configuration

mobile/src/components/common/SuccessCallout.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { PropsWithChildren } from "react";
+
+export type CalloutObject = {
+    state: boolean;
+    message: string;
+};
+
+export const SuccessCallout = ({
+    children,
+    ...props
+}: PropsWithChildren<{ message?: string }>) => {
+    return (
+        <div
+            key="success"
+            className="ion-margin bg-zinc-900 rounded-md border-2 border-green-4 00 p-2"
+            role="complementary"
+        >
+            <p className="font-normal text-green-400">{props.message}</p>
+        </div>
+    );
+};

mobile/src/components/layout/Navbar.tsx

@@ -7,7 +7,7 @@ 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"
+import { Login } from "../../pages/auth/Login"
 
 export const Navbar = () => {
     const { currentUser, isLoading } = useContext(UserContext)

mobile/src/pages/auth/Login.tsx

@@ -1,10 +1,11 @@
-import { IonButton, IonContent, IonHeader, IonImg, IonInput, IonItem, IonPage, IonSpinner, IonTitle, IonToolbar } from '@ionic/react'
+import { IonButton, IonContent, IonHeader, IonImg, IonInput, IonItem, IonPage, IonSpinner, IonTitle, IonToolbar, IonText, IonRow } from '@ionic/react'
 import { ErrorBanner } from '../../components/layout'
+import {SuccessCallout, CalloutObject} from '@/components/common/SuccessCallout'
 import raven_logo from '../../assets/raven_logo.png'
 import { useContext, useState } from 'react'
 import { UserContext } from '../../utils/auth/UserProvider'
-import { Controller, set, useForm } from 'react-hook-form'
-import { isEmailValid } from '../../utils/validations/validations'
+import { Controller, useForm } from 'react-hook-form'
+import { LoginWithEmail } from '@/pages/auth/LoginWithEmail'
 
 type Inputs = {
     email: string,
@@ -14,9 +15,18 @@ type Inputs = {
 export const Login = () => {
 
     const [error, setError] = useState<Error | null>(null)
-    const { login, isLoading } = useContext(UserContext)
+    const { login } = useContext(UserContext)
     const { control, handleSubmit, formState: { errors } } = useForm<Inputs>()
     const [loading, setLoading] = useState(false)
+    const [callout, setCallout] = useState<CalloutObject | null>(null)
+    const [isLoginWithEmailLink, setIsLoginWithEmailLink] = useState<boolean>(false)
+
+     // to show/unshow login with email section
+     const onClickLoginWithEmail = () =>{
+        setError(null)
+        setCallout(null)
+        setIsLoginWithEmailLink(!isLoginWithEmailLink)   
+    }
 
     async function onSubmit(values: Inputs) {
         setError(null)
@@ -39,7 +49,16 @@ export const Login = () => {
                         </IonToolbar>
                     </IonHeader>
                     {error && <ErrorBanner overrideHeading={error.message} />}
-                    <form onSubmit={handleSubmit(onSubmit)}>
+                    { callout && <SuccessCallout message={callout.message}/> }  
+                    {
+                        isLoginWithEmailLink ? 
+                        <LoginWithEmail 
+                             setCallout={setCallout}
+                             setError={setError}
+                             onClickLoginWithEmail={onClickLoginWithEmail} 
+                         />:
+                         <div>
+                        <form onSubmit={handleSubmit(onSubmit)}>
                         <IonItem>
                             <Controller
                                 name="email"
@@ -50,7 +69,7 @@ export const Login = () => {
                                 render={({ field }) => <IonInput
                                     onIonChange={(e) => field.onChange(e.detail.value)}
                                     required
-                                    placeholder='sally@example.com'
+                                    placeholder='jane@example.com'
                                     className={!!errors?.email ? 'ion-invalid ion-touched' : ''}
                                     label='Email/Username'
                                     errorText={errors?.email?.message}
@@ -81,13 +100,29 @@ export const Login = () => {
                         <IonButton
                             type="submit"
                             className='ion-margin-top'
-                            expand="block">
+                            expand="block"
+                            >
                             {loading ? <IonSpinner name="crescent" /> : "Login"}
                         </IonButton>
                     </form>
-                </div>
-            </IonContent>
+                    <IonRow class="ion-justify-content-center ion-margin-top ion-margin-bottom">
+                        <IonText color="medium" >
+                            or
+                        </IonText>
+                    </IonRow>
+                    <IonButton
+                        type="button"
+                        onClick={onClickLoginWithEmail}
+                        expand="block"
+                    >
+                        {loading ? <IonSpinner name="crescent" /> : "Login With Email Link"}    
+                    </IonButton>
+            </div>
+                    }
+
+        </div>
+        </IonContent>
 
         </IonPage>
     )
-}
+}

mobile/src/pages/auth/LoginWithEmail.tsx

@@ -0,0 +1,109 @@
+import {
+    IonButton,
+    IonInput,
+    IonItem,
+    IonSpinner,
+} from "@ionic/react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useFrappePostCall } from "frappe-react-sdk";
+import { CalloutObject } from '@/components/common/SuccessCallout'
+
+type Inputs = {
+    email: string;
+    password: string;
+};
+
+export type LoginInputs = {
+    email: string;
+    password: string;
+};
+
+type Props = {
+    setError: (err: any) => void;
+    setCallout: (callout: CalloutObject) => void;
+    onClickLoginWithEmail: () => void;
+};
+
+export const LoginWithEmail = (props: Props) => {
+    const {
+        control,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+    } = useForm<Inputs>();
+    const [loading, setLoading] = useState(false);
+
+    // POST Call to send login link (settings for social logins, email link etc)
+    const { call } = useFrappePostCall('frappe.www.login.send_login_link')
+
+    async function sendEmailLink(values: LoginInputs) {
+        return call({
+                email: values.email,
+            })
+            .then((result) => {
+                props.setCallout({
+                    state: true,
+                    message: "Login Link sent on Email",
+                });
+            }).catch((err)=>{
+                props.setError(err)
+            })
+
+    }
+
+
+    return (
+        <div>
+            <form onSubmit={handleSubmit(sendEmailLink)}>
+                <IonItem>
+                    <Controller
+                        name="email"
+                        control={control}
+                        rules={{
+                            required: "Email is required",
+                        }}
+                        render={({ field }) => (
+                            <IonInput
+                                onIonChange={(e) =>
+                                    field.onChange(e.detail.value)
+                                }
+                                required
+                                placeholder="jane@example.com"
+                                className={
+                                    !!errors?.email
+                                        ? "ion-invalid ion-touched"
+                                        : ""
+                                }
+                                label="Email"
+                                errorText={errors?.email?.message}
+                                inputMode="email"
+                                labelPlacement="stacked"
+                            />
+                        )}
+                    />
+                </IonItem>
+
+                <IonButton
+                    type="submit"
+                    className="ion-margin-top"
+                    expand="block"
+                    disabled={isSubmitting}
+                >
+                    {loading ? (
+                        <IonSpinner name="crescent" />
+                    ) : (
+                        "Send Login Link"
+                    )}
+                </IonButton>
+            </form>
+            <IonButton
+                type="button"
+                onClick={props.onClickLoginWithEmail}
+                expand="block"
+                fill="clear"
+            >
+                {loading ? <IonSpinner name="crescent" /> : "Back to Login"}
+            </IonButton>
+        </div>
+    );
+};

raven-app/src/App.tsx

@@ -5,7 +5,6 @@ import { ProtectedRoute } from './utils/auth/ProtectedRoute'
 import { UserProvider } from './utils/auth/UserProvider'
 import { ChannelRedirect } from './utils/channel/ChannelRedirect'
 import "cal-sans";
-import { useState } from 'react'
 import { ThemeProvider } from './ThemeProvider'
 import { Toaster } from './components/common/Toast/Toaster'
 import { FullPageLoader } from './components/layout/Loaders'
@@ -16,6 +15,7 @@ const router = createBrowserRouter(
   createRoutesFromElements(
     <>
       <Route path='/login' lazy={() => import('@/pages/auth/Login')} />
+      <Route path='/login-with-email' lazy={()=> import('@/pages/auth/LoginWithEmail')} />
       <Route path="/" element={<ProtectedRoute />}>
         <Route index element={<ChannelRedirect />} />
         <Route path="channel" element={<MainPage />} >

raven-app/src/components/common/Callouts/CustomCallout.tsx

@@ -0,0 +1,36 @@
+import { Callout } from "@radix-ui/themes";
+import {
+    CalloutIconProps,
+    CalloutRootProps,
+    CalloutTextProps,
+} from "@radix-ui/themes/dist/cjs/components/callout";
+import { PropsWithChildren } from "react";
+
+export type CalloutObject = {
+    state: boolean,
+    message: string,
+}
+
+export type CustomCalloutProps = {
+    rootProps?: CalloutRootProps;
+    iconProps?: CalloutIconProps;
+    iconChildren?: React.ReactNode;
+    textProps?: CalloutTextProps;
+    textChildren?: React.ReactNode;
+};
+
+export const CustomCallout = ({
+    rootProps,
+    iconProps,
+    textProps,
+    textChildren,
+    iconChildren,
+}: PropsWithChildren<CustomCalloutProps>) => {
+    return (
+        <Callout.Root {...rootProps}>
+            <Callout.Icon {...iconProps}>{iconChildren}</Callout.Icon>
+            <Callout.Text {...textProps}>{textChildren}</Callout.Text>
+        </Callout.Root>
+    );
+};
+

raven-app/src/components/common/Callouts/ErrorCallouts.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react"
+import { FiAlertTriangle } from "react-icons/fi"
+import { CustomCallout } from "./CustomCallout"
+
+
+export const ErrorCallout = ({ children,...props }: PropsWithChildren<{message?: string}>) => {
+    return (<CustomCallout
+            rootProps={{color: "red"}}
+            iconChildren = {<FiAlertTriangle size="18"/>}
+            textChildren = { props.message }
+        />)
+}

raven-app/src/components/common/Callouts/SuccessCallout.tsx

@@ -0,0 +1,13 @@
+import { BiCheckCircle } from "react-icons/bi";
+import { PropsWithChildren } from "react";
+import { CustomCallout } from "./CustomCallout";
+
+export const SuccessCallout = ({ children,...props}: PropsWithChildren<{message?: string}>) => {
+    return (
+        <CustomCallout
+            rootProps={{color: "green"}}
+            iconChildren = {<BiCheckCircle size="18"/>}
+            textChildren = { props.message }
+        />
+    )
+}

raven-app/src/components/feature/raven-users/AddRavenUsersContent.tsx

@@ -14,7 +14,7 @@ import { Button, Dialog, Em, Flex, Strong, Text, TextField } from "@radix-ui/the
 import { Loader } from "@/components/common/Loader"
 import { BiSearch } from "react-icons/bi"
 import { useToast } from "@/hooks/useToast"
-import { ErrorCallout } from "@/components/layout/AlertBanner/ErrorBanner"
+import { ErrorCallout } from "@/components/common/Callouts/ErrorCallouts"
 
 interface AddUsersResponse {
     failed_users: User[],

raven-app/src/components/layout/AlertBanner/ErrorBanner.tsx

@@ -1,8 +1,7 @@
 import { FrappeError } from 'frappe-react-sdk'
-import { PropsWithChildren, useMemo } from 'react'
+import { useMemo } from 'react'
 import React from 'react'
-import { Callout } from '@radix-ui/themes'
-import { FiAlertTriangle } from 'react-icons/fi'
+import { ErrorCallout } from "@/components/common/Callouts/ErrorCallouts"
 
 interface ErrorBannerProps {
     error?: FrappeError | null,
@@ -73,15 +72,3 @@ export const ErrorBanner = ({ error, overrideHeading, children }: ErrorBannerPro
         {children}
     </ErrorCallout>)
 }
-
-
-export const ErrorCallout = ({ children }: PropsWithChildren) => {
-    return (<Callout.Root color="red" role="alert">
-        <Callout.Icon>
-            <FiAlertTriangle size='18' />
-        </Callout.Icon>
-        <Callout.Text>
-            {children}
-        </Callout.Text>
-    </Callout.Root>)
-}

raven-app/src/components/layout/AuthContainer.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren, useContext } from 'react'
+import { Box, Flex, Text } from '@radix-ui/themes';
+import { FullPageLoader } from "./Loaders";
+import { Link } from 'react-router-dom';
+import { UserContext } from '@/utils/auth/UserProvider';
+
+
+const AuthContainer = ({ children, ...props }: PropsWithChildren) => {
+    const { isLoading } = useContext(UserContext)
+
+    return (
+        <Box className={'min-h-screen'}>
+            <Flex justify='center' align='center' className={'h-screen w-full'}>
+                {
+                    isLoading ? <FullPageLoader /> :
+                        <Box className={'w-full max-w-lg'}>
+                            <Flex direction='column' gap='6' className={'w-full bg-white rounded-lg shadow dark:border dark:bg-gray-900 dark:border-gray-700 p-8'}>
+
+                                <Link to="/" tabIndex={-1}>
+                                    <Flex justify="center">
+                                        <Text as='span' size='9' className='cal-sans'>raven</Text>
+                                    </Flex>
+                                </Link>
+
+                                {children}
+
+                            </Flex>
+                        </Box>
+                }
+            </Flex>
+        </Box>
+    )
+
+}
+
+export default AuthContainer;