141 lines
4.3 KiB
TypeScript
141 lines
4.3 KiB
TypeScript
import { WebApplication } from '@/UIModels/Application'
|
|
import { AppState } from '@/UIModels/AppState'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { FunctionComponent } from 'preact'
|
|
import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/hooks'
|
|
import { AccountMenuPane } from './AccountMenuPane'
|
|
import { Button } from '@/Components/Button/Button'
|
|
import { DecoratedInput } from '@/Components/Input/DecoratedInput'
|
|
import { DecoratedPasswordInput } from '@/Components/Input/DecoratedPasswordInput'
|
|
import { Icon } from '@/Components/Icon/Icon'
|
|
import { IconButton } from '@/Components/Button/IconButton'
|
|
import { AdvancedOptions } from './AdvancedOptions'
|
|
|
|
type Props = {
|
|
appState: AppState
|
|
application: WebApplication
|
|
setMenuPane: (pane: AccountMenuPane) => void
|
|
email: string
|
|
setEmail: StateUpdater<string>
|
|
password: string
|
|
setPassword: StateUpdater<string>
|
|
}
|
|
|
|
export const CreateAccount: FunctionComponent<Props> = observer(
|
|
({ appState, application, setMenuPane, email, setEmail, password, setPassword }) => {
|
|
const emailInputRef = useRef<HTMLInputElement>(null)
|
|
const passwordInputRef = useRef<HTMLInputElement>(null)
|
|
const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (emailInputRef.current) {
|
|
emailInputRef.current?.focus()
|
|
}
|
|
}, [])
|
|
|
|
const handleEmailChange = useCallback(
|
|
(text: string) => {
|
|
setEmail(text)
|
|
},
|
|
[setEmail],
|
|
)
|
|
|
|
const handlePasswordChange = useCallback(
|
|
(text: string) => {
|
|
setPassword(text)
|
|
},
|
|
[setPassword],
|
|
)
|
|
|
|
const handleRegisterFormSubmit = useCallback(
|
|
(e: Event) => {
|
|
e.preventDefault()
|
|
|
|
if (!email || email.length === 0) {
|
|
emailInputRef.current?.focus()
|
|
return
|
|
}
|
|
|
|
if (!password || password.length === 0) {
|
|
passwordInputRef.current?.focus()
|
|
return
|
|
}
|
|
|
|
setEmail(email)
|
|
setPassword(password)
|
|
setMenuPane(AccountMenuPane.ConfirmPassword)
|
|
},
|
|
[email, password, setPassword, setMenuPane, setEmail],
|
|
)
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
handleRegisterFormSubmit(e)
|
|
}
|
|
},
|
|
[handleRegisterFormSubmit],
|
|
)
|
|
|
|
const handleClose = useCallback(() => {
|
|
setMenuPane(AccountMenuPane.GeneralMenu)
|
|
setEmail('')
|
|
setPassword('')
|
|
}, [setEmail, setMenuPane, setPassword])
|
|
|
|
const onPrivateWorkspaceChange = useCallback(
|
|
(isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
|
|
setIsPrivateWorkspace(isPrivateWorkspace)
|
|
if (isPrivateWorkspace && privateWorkspaceIdentifier) {
|
|
setEmail(privateWorkspaceIdentifier)
|
|
}
|
|
},
|
|
[setEmail],
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center px-3 mt-1 mb-3">
|
|
<IconButton
|
|
icon="arrow-left"
|
|
title="Go back"
|
|
className="flex mr-2 color-neutral p-0"
|
|
onClick={handleClose}
|
|
focusable={true}
|
|
/>
|
|
<div className="sn-account-menu-headline">Create account</div>
|
|
</div>
|
|
<form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1">
|
|
<DecoratedInput
|
|
className="mb-2"
|
|
disabled={isPrivateWorkspace}
|
|
left={[<Icon type="email" className="color-neutral" />]}
|
|
onChange={handleEmailChange}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Email"
|
|
ref={emailInputRef}
|
|
type="email"
|
|
value={email}
|
|
/>
|
|
<DecoratedPasswordInput
|
|
className="mb-2"
|
|
left={[<Icon type="password" className="color-neutral" />]}
|
|
onChange={handlePasswordChange}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Password"
|
|
ref={passwordInputRef}
|
|
value={password}
|
|
/>
|
|
<Button className="btn-w-full mt-1" label="Next" variant="primary" onClick={handleRegisterFormSubmit} />
|
|
</form>
|
|
<div className="h-1px my-2 bg-border"></div>
|
|
<AdvancedOptions
|
|
application={application}
|
|
appState={appState}
|
|
onPrivateWorkspaceChange={onPrivateWorkspaceChange}
|
|
/>
|
|
</>
|
|
)
|
|
},
|
|
)
|