mirror of
https://github.com/linsa-io/linsa.git
synced 2026-04-26 18:28:35 +02:00
Setup (#112)
* wip * wip * wip3 * chore: utils * feat: add command * wip * fix: key duplicate * fix: move and check * fix: use react-use instead * fix: sidebar * chore: make dynamic * chore: tablet mode * chore: fix padding * chore: link instead of inbox * fix: use dnd kit * feat: add select component * chore: use atom * refactor: remove dnd provider * feat: disabled drag when sort is not manual * search route * . * feat: accessibility * fix: search * . * . * . * fix: sidebar collapsed * ai search layout * . * . * . * . * ai responsible content * . * . * . * . * . * global topic route * global topic correct route * topic buttons * sidebar search navigation * ai * Update jazz * . * . * . * . * . * learning status * . * . * chore: content header * fix: pointer none when dragging. prevent auto click after drag end * fix: confirm * fix: prevent drag when editing * chore: remove unused fn * fix: check propagation * chore: list * chore: tweak sonner * chore: update stuff * feat: add badge * chore: close edit when create * chore: escape on manage form * refactor: remove learn path * css: responsive item * chore: separate pages and topic * reafactor: remove new-schema * feat(types): extend jazz type so it can be nullable * chore: use new types * fix: missing deps * fix: link * fix: sidebar in layout * fix: quotes * css: use medium instead semi * Actual streaming and rendering markdown response * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * chore: metadata * feat: la-editor * . * fix: editor and page * . * . * . * . * . * . * fix: remove link * chore: page sidebar * fix: remove 'replace with learning status' * fix: link * fix: link * chore: update schema * chore: use new schema * fix: instead of showing error, just do unique slug * feat: create slug * refactor apply * update package json * fix: schema personal page * chore: editor * feat: pages * fix: metadata * fix: jazz provider * feat: handling data * feat: page detail * chore: server page to id * chore: use id instead of slug * chore: update content header * chore: update link header implementation * refactor: global.css * fix: la editor use animation frame * fix: editor export ref * refactor: page detail * chore: tidy up schema * chore: adapt to new schema * fix: wrap using settimeout * fix: wrap using settimeout * . * . --------- Co-authored-by: marshennikovaolga <marshennikova@gmail.com> Co-authored-by: Nikita <github@nikiv.dev> Co-authored-by: Anselm <anselm.eickhoff@gmail.com> Co-authored-by: Damian Tarnawski <gthetarnav@gmail.com>
This commit is contained in:
Aslam
166
web/components/custom/demo-auth.tsx
Normal file
166
web/components/custom/demo-auth.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import React, { useEffect, useMemo, useState } from "react"
|
||||
import { BrowserDemoAuth, AuthProvider } from "jazz-browser"
|
||||
import { Account, CoValueClass, ID } from "jazz-tools"
|
||||
import { AgentSecret } from "cojson"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
// Types
|
||||
export type AuthState = "loading" | "ready" | "signedIn"
|
||||
|
||||
export type ReactAuthHook<Acc extends Account> = (setJazzAuthState: (state: AuthState) => void) => {
|
||||
auth: AuthProvider<Acc>
|
||||
AuthUI: React.ReactNode
|
||||
logOut?: () => void
|
||||
}
|
||||
|
||||
type DemoAuthProps<Acc extends Account = Account> = {
|
||||
accountSchema?: CoValueClass<Acc> & typeof Account
|
||||
appName: string
|
||||
appHostname?: string
|
||||
Component?: DemoAuth.Component
|
||||
seedAccounts?: {
|
||||
[name: string]: { accountID: ID<Account>; accountSecret: AgentSecret }
|
||||
}
|
||||
}
|
||||
|
||||
type AuthComponentProps = {
|
||||
appName: string
|
||||
loading: boolean
|
||||
existingUsers: string[]
|
||||
logInAs: (existingUser: string) => void
|
||||
signUp: (username: string) => void
|
||||
}
|
||||
|
||||
// Main DemoAuth function
|
||||
export function DemoAuth<Acc extends Account = Account>({
|
||||
accountSchema = Account as CoValueClass<Acc> & typeof Account,
|
||||
appName,
|
||||
appHostname,
|
||||
Component = DemoAuth.BasicUI,
|
||||
seedAccounts
|
||||
}: DemoAuthProps<Acc>): ReactAuthHook<Acc> {
|
||||
return function useLocalAuth(setJazzAuthState) {
|
||||
const [authState, setAuthState] = useState<AuthState>("loading")
|
||||
const [existingUsers, setExistingUsers] = useState<string[]>([])
|
||||
const [logInAs, setLogInAs] = useState<(existingUser: string) => void>(() => () => {})
|
||||
const [signUp, setSignUp] = useState<(username: string) => void>(() => () => {})
|
||||
const [logOut, setLogOut] = useState<(() => void) | undefined>(undefined)
|
||||
const [logOutCounter, setLogOutCounter] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
setJazzAuthState(authState)
|
||||
}, [authState, setJazzAuthState])
|
||||
|
||||
const auth = useMemo(() => {
|
||||
return new BrowserDemoAuth<Acc>(
|
||||
accountSchema,
|
||||
{
|
||||
onReady(next) {
|
||||
setAuthState("ready")
|
||||
setExistingUsers(next.existingUsers)
|
||||
setLogInAs(() => next.logInAs)
|
||||
setSignUp(() => next.signUp)
|
||||
},
|
||||
onSignedIn(next) {
|
||||
setAuthState("signedIn")
|
||||
setLogOut(() => () => {
|
||||
next.logOut()
|
||||
setAuthState("loading")
|
||||
setLogOutCounter(c => c + 1)
|
||||
})
|
||||
}
|
||||
},
|
||||
appName,
|
||||
seedAccounts
|
||||
)
|
||||
}, [])
|
||||
|
||||
const AuthUI = (
|
||||
<Component
|
||||
appName={appName}
|
||||
loading={authState === "loading"}
|
||||
existingUsers={existingUsers}
|
||||
logInAs={logInAs}
|
||||
signUp={signUp}
|
||||
/>
|
||||
)
|
||||
|
||||
return { auth, AuthUI, logOut }
|
||||
}
|
||||
}
|
||||
|
||||
const DemoAuthBasicUI: React.FC<AuthComponentProps> = ({ appName, existingUsers, logInAs, signUp }) => {
|
||||
const [username, setUsername] = useState<string>("")
|
||||
const darkMode = useDarkMode()
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-full flex-col justify-center">
|
||||
<div className="mx-auto h-full w-full max-w-sm space-y-6 p-4">
|
||||
<h1 className="text-center font-semibold">{appName}</h1>
|
||||
<SignUpForm username={username} setUsername={setUsername} signUp={signUp} darkMode={darkMode} />
|
||||
<ExistingUsersList existingUsers={existingUsers} logInAs={logInAs} darkMode={darkMode} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Helper components
|
||||
const SignUpForm: React.FC<{
|
||||
username: string
|
||||
setUsername: (value: string) => void
|
||||
signUp: (username: string) => void
|
||||
darkMode: boolean
|
||||
}> = ({ username, setUsername, signUp, darkMode }) => (
|
||||
<form
|
||||
onSubmit={e => {
|
||||
e.preventDefault()
|
||||
signUp(username)
|
||||
}}
|
||||
className="flex flex-col gap-y-4"
|
||||
>
|
||||
<Input
|
||||
placeholder="Display name"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
autoComplete="webauthn"
|
||||
/>
|
||||
<Button type="submit">Sign Up as new account</Button>
|
||||
</form>
|
||||
)
|
||||
|
||||
const ExistingUsersList: React.FC<{
|
||||
existingUsers: string[]
|
||||
logInAs: (user: string) => void
|
||||
darkMode: boolean
|
||||
}> = ({ existingUsers, logInAs, darkMode }) => (
|
||||
<div className="flex flex-col gap-y-2">
|
||||
{existingUsers.map(user => (
|
||||
<Button key={user} onClick={() => logInAs(user)}>
|
||||
Log In as "{user}"
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
// Hooks
|
||||
const useDarkMode = () => {
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
|
||||
setDarkMode(mediaQuery.matches)
|
||||
|
||||
const handler = (e: MediaQueryListEvent) => setDarkMode(e.matches)
|
||||
mediaQuery.addEventListener("change", handler)
|
||||
return () => mediaQuery.removeEventListener("change", handler)
|
||||
}, [])
|
||||
|
||||
return darkMode
|
||||
}
|
||||
|
||||
// DemoAuth namespace
|
||||
export namespace DemoAuth {
|
||||
export type Component = React.FC<AuthComponentProps>
|
||||
export const BasicUI = DemoAuthBasicUI
|
||||
}
|
||||
Reference in New Issue
Block a user