enso-org/enso
1
1
Fork 0
mirror of https://github.com/enso-org/enso.git synced 2025-01-03 10:22:22 +03:00
Code Issues Projects Releases Wiki Activity

Fix prettier config; run prettier (#6132)

Browse Source 
* Fix prettier config; run prettier

* add workaround for double re-render

* add missing fixme

---------

Co-authored-by: Paweł Buchowski <pawel.buchowski@enso.org>
Co-authored-by: Nikita Pekin <nikita@frecency.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
This commit is contained in:
somebody1234 2023-03-31 22:49:34 +10:00 committed by GitHub
parent db87d534e9
commit 0aa7d7ee4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 1476 additions and 1547 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierrc.yaml
View File

@ -1,8 +1,9 @@
overrides: overrides:
- files: - files:
- "*.[j|t]s" - "*.[j|t]s"
- "*.mjs" - "*.[j|t]sx"
- "*.cjs" - "*.m[j|t]s"
- "*.c[j|t]s"
options: options:
printWidth: 100 printWidth: 100
tabWidth: 4 tabWidth: 4

11
app/ide-desktop/lib/content/src/index.ts
View File

@ -153,9 +153,18 @@ class Main {
* and one for the desktop. Once these are merged, we can't hardcode the * and one for the desktop. Once these are merged, we can't hardcode the
* platform here, and need to detect it from the environment. */ * platform here, and need to detect it from the environment. */
const platform = authentication.Platform.desktop const platform = authentication.Platform.desktop
/** FIXME [PB]: https://github.com/enso-org/cloud-v2/issues/366
* React hooks rerender themselves multiple times. It is resulting in multiple
* Enso main scene being initialized. As a temporary workaround we check whether
* appInstance was already ran. Target solution should move running appInstance
* where it will be called only once. */
let appInstanceRan = false
const onAuthenticated = () => { const onAuthenticated = () => {
hideAuth() hideAuth()
void appInstance.run() if (!appInstanceRan) {
appInstanceRan = true
void appInstance.run()
}
} }
authentication.run(logger, platform, onAuthenticated) authentication.run(logger, platform, onAuthenticated)
} else { } else {

72
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/common.tsx
View File

@ -3,25 +3,25 @@
* For example, this file contains the {@link SvgIcon} component, which is used by the * For example, this file contains the {@link SvgIcon} component, which is used by the
* `Registration` and `Login` components. */ * `Registration` and `Login` components. */
import * as fontawesome from "@fortawesome/react-fontawesome"; import * as fontawesome from '@fortawesome/react-fontawesome'
import * as fontawesomeIcons from "@fortawesome/free-brands-svg-icons"; import * as fontawesomeIcons from '@fortawesome/free-brands-svg-icons'
import * as icons from "../../components/svg"; import * as icons from '../../components/svg'
// ============= // =============
// === Input === // === Input ===
// ============= // =============
export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) { export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
return ( return (
<input <input
{...props} {...props}
className={ className={
"text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 " + 'text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 ' +
"w-full py-2 focus:outline-none focus:border-blue-400" 'w-full py-2 focus:outline-none focus:border-blue-400'
} }
/> />
); )
} }
// =============== // ===============
@ -29,22 +29,22 @@ export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
// =============== // ===============
interface SvgIconProps { interface SvgIconProps {
data: string; data: string
} }
export function SvgIcon(props: SvgIconProps) { export function SvgIcon(props: SvgIconProps) {
return ( return (
<div <div
className={ className={
"inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 " + 'inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 ' +
"text-gray-400" 'text-gray-400'
} }
> >
<span> <span>
<icons.Svg {...props} /> <icons.Svg {...props} />
</span> </span>
</div> </div>
); )
} }
// ======================= // =======================
@ -52,18 +52,18 @@ export function SvgIcon(props: SvgIconProps) {
// ======================= // =======================
interface FontAwesomeIconProps { interface FontAwesomeIconProps {
icon: fontawesomeIcons.IconDefinition; icon: fontawesomeIcons.IconDefinition
} }
export function FontAwesomeIcon(props: FontAwesomeIconProps) { export function FontAwesomeIcon(props: FontAwesomeIconProps) {
return ( return (
<span <span
className={ className={
"absolute left-0 top-0 flex items-center justify-center h-full w-10 " + 'absolute left-0 top-0 flex items-center justify-center h-full w-10 ' +
"text-blue-500" 'text-blue-500'
} }
> >
<fontawesome.FontAwesomeIcon icon={props.icon} /> <fontawesome.FontAwesomeIcon icon={props.icon} />
</span> </span>
); )
} }

76
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/confirmRegistration.tsx
View File

@ -1,62 +1,60 @@
/** @file Registration confirmation page for when a user clicks the confirmation link set to their /** @file Registration confirmation page for when a user clicks the confirmation link set to their
* email address. */ * email address. */
import * as react from "react"; import * as react from 'react'
import * as router from "react-router-dom"; import * as router from 'react-router-dom'
import toast from "react-hot-toast"; import toast from 'react-hot-toast'
import * as app from "../../components/app"; import * as app from '../../components/app'
import * as auth from "../providers/auth"; import * as auth from '../providers/auth'
import * as loggerProvider from "../../providers/logger"; import * as loggerProvider from '../../providers/logger'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
const REGISTRATION_QUERY_PARAMS = { const REGISTRATION_QUERY_PARAMS = {
verificationCode: "verification_code", verificationCode: 'verification_code',
email: "email", email: 'email',
} as const; } as const
// ============================ // ============================
// === Confirm Registration === // === Confirm Registration ===
// ============================ // ============================
function ConfirmRegistration() { function ConfirmRegistration() {
const logger = loggerProvider.useLogger(); const logger = loggerProvider.useLogger()
const { confirmSignUp } = auth.useAuth(); const { confirmSignUp } = auth.useAuth()
const { search } = router.useLocation(); const { search } = router.useLocation()
const navigate = router.useNavigate(); const navigate = router.useNavigate()
const { verificationCode, email } = parseUrlSearchParams(search); const { verificationCode, email } = parseUrlSearchParams(search)
react.useEffect(() => { react.useEffect(() => {
if (!email || !verificationCode) { if (!email || !verificationCode) {
navigate(app.LOGIN_PATH); navigate(app.LOGIN_PATH)
} else { } else {
confirmSignUp(email, verificationCode) confirmSignUp(email, verificationCode)
.then(() => { .then(() => {
navigate(app.LOGIN_PATH + search.toString()); navigate(app.LOGIN_PATH + search.toString())
}) })
.catch((error) => { .catch(error => {
logger.error("Error while confirming sign-up", error); logger.error('Error while confirming sign-up', error)
toast.error( toast.error(
"Something went wrong! Please try again or contact the administrators." 'Something went wrong! Please try again or contact the administrators.'
); )
navigate(app.LOGIN_PATH); navigate(app.LOGIN_PATH)
}); })
} }
}, []); }, [])
return <></>; return <></>
} }
function parseUrlSearchParams(search: string) { function parseUrlSearchParams(search: string) {
const query = new URLSearchParams(search); const query = new URLSearchParams(search)
const verificationCode = query.get( const verificationCode = query.get(REGISTRATION_QUERY_PARAMS.verificationCode)
REGISTRATION_QUERY_PARAMS.verificationCode const email = query.get(REGISTRATION_QUERY_PARAMS.email)
); return { verificationCode, email }
const email = query.get(REGISTRATION_QUERY_PARAMS.email);
return { verificationCode, email };
} }
export default ConfirmRegistration; export default ConfirmRegistration

152
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/forgotPassword.tsx
View File

@ -1,93 +1,93 @@
/** @file Container responsible for rendering and interactions in first half of forgot password /** @file Container responsible for rendering and interactions in first half of forgot password
* flow. */ * flow. */
import * as router from "react-router-dom"; import * as router from 'react-router-dom'
import * as app from "../../components/app"; import * as app from '../../components/app'
import * as auth from "../providers/auth"; import * as auth from '../providers/auth'
import * as common from "./common"; import * as common from './common'
import * as hooks from "../../hooks"; import * as hooks from '../../hooks'
import * as icons from "../../components/svg"; import * as icons from '../../components/svg'
import * as utils from "../../utils"; import * as utils from '../../utils'
// ====================== // ======================
// === ForgotPassword === // === ForgotPassword ===
// ====================== // ======================
function ForgotPassword() { function ForgotPassword() {
const { forgotPassword } = auth.useAuth(); const { forgotPassword } = auth.useAuth()
const [email, bindEmail] = hooks.useInput(""); const [email, bindEmail] = hooks.useInput('')
return ( return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-300"> <div className="min-h-screen flex flex-col items-center justify-center bg-gray-300">
<div <div
className={
"flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full " +
"max-w-md"
}
>
<div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
Forgot Your Password?
</div>
<div className="mt-10">
<form
onSubmit={utils.handleEvent(async () => {
await forgotPassword(email);
})}
>
<div className="flex flex-col mb-6">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindEmail}
id="email"
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={ className={
"flex items-center justify-center focus:outline-none text-white text-sm " + 'flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full ' +
"sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition " + 'max-w-md'
"duration-150 ease-in"
} }
> >
<span className="mr-2 uppercase">Send link</span> <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
<span> Forgot Your Password?
<icons.Svg data={icons.PATHS.rightArrow} /> </div>
</span> <div className="mt-10">
</button> <form
onSubmit={utils.handleEvent(async () => {
await forgotPassword(email)
})}
>
<div className="flex flex-col mb-6">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindEmail}
id="email"
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={
'flex items-center justify-center focus:outline-none text-white text-sm ' +
'sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
'duration-150 ease-in'
}
>
<span className="mr-2 uppercase">Send link</span>
<span>
<icons.Svg data={icons.PATHS.rightArrow} />
</span>
</button>
</div>
</form>
</div>
<div className="flex justify-center items-center mt-6">
<router.Link
to={app.LOGIN_PATH}
className={
'inline-flex items-center font-bold text-blue-500 hover:text-blue-700 text-xs ' +
'text-center'
}
>
<span>
<icons.Svg data={icons.PATHS.goBack} />
</span>
<span className="ml-2">Go back to login</span>
</router.Link>
</div>
</div> </div>
</form>
</div> </div>
<div className="flex justify-center items-center mt-6"> )
<router.Link
to={app.LOGIN_PATH}
className={
"inline-flex items-center font-bold text-blue-500 hover:text-blue-700 text-xs " +
"text-center"
}
>
<span>
<icons.Svg data={icons.PATHS.goBack} />
</span>
<span className="ml-2">Go back to login</span>
</router.Link>
</div>
</div>
</div>
);
} }
export default ForgotPassword; export default ForgotPassword

276
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/login.tsx
View File

@ -1,170 +1,162 @@
/** @file Login component responsible for rendering and interactions in sign in flow. */ /** @file Login component responsible for rendering and interactions in sign in flow. */
import * as fontawesomeIcons from "@fortawesome/free-brands-svg-icons"; import * as fontawesomeIcons from '@fortawesome/free-brands-svg-icons'
import * as router from "react-router-dom"; import * as router from 'react-router-dom'
import * as app from "../../components/app"; import * as app from '../../components/app'
import * as auth from "../providers/auth"; import * as auth from '../providers/auth'
import * as common from "./common"; import * as common from './common'
import * as hooks from "../../hooks"; import * as hooks from '../../hooks'
import * as icons from "../../components/svg"; import * as icons from '../../components/svg'
import * as utils from "../../utils"; import * as utils from '../../utils'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
const BUTTON_CLASS_NAME = const BUTTON_CLASS_NAME =
"relative mt-6 border rounded-md py-2 text-sm text-gray-800 " + 'relative mt-6 border rounded-md py-2 text-sm text-gray-800 ' + 'bg-gray-100 hover:bg-gray-200'
"bg-gray-100 hover:bg-gray-200";
const LOGIN_QUERY_PARAMS = { const LOGIN_QUERY_PARAMS = {
email: "email", email: 'email',
} as const; } as const
// ============= // =============
// === Login === // === Login ===
// ============= // =============
function Login() { function Login() {
const { search } = router.useLocation(); const { search } = router.useLocation()
const { signInWithGoogle, signInWithGitHub, signInWithPassword } = const { signInWithGoogle, signInWithGitHub, signInWithPassword } = auth.useAuth()
auth.useAuth();
const initialEmail = parseUrlSearchParams(search); const initialEmail = parseUrlSearchParams(search)
const [email, bindEmail] = hooks.useInput(initialEmail ?? ""); const [email, bindEmail] = hooks.useInput(initialEmail ?? '')
const [password, bindPassword] = hooks.useInput(""); const [password, bindPassword] = hooks.useInput('')
return ( return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-300"> <div className="min-h-screen flex flex-col items-center justify-center bg-gray-300">
<div <div
className={
"flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md " +
"w-full max-w-md"
}
>
<div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
Login To Your Account
</div>
<button
onClick={utils.handleEvent(signInWithGoogle)}
className={BUTTON_CLASS_NAME}
>
<common.FontAwesomeIcon icon={fontawesomeIcons.faGithub} />
<span>Login with Google</span>
</button>
<button
onClick={utils.handleEvent(signInWithGitHub)}
className={BUTTON_CLASS_NAME}
>
<common.FontAwesomeIcon icon={fontawesomeIcons.faGithub} />
<span>Login with Github</span>
</button>
<div className="relative mt-10 h-px bg-gray-300">
<div className="absolute left-0 top-0 flex justify-center w-full -mt-2">
<span className="bg-white px-4 text-xs text-gray-500 uppercase">
Or Login With Email
</span>
</div>
</div>
<div className="mt-10">
<form
onSubmit={utils.handleEvent(async () =>
signInWithPassword(email, password)
)}
>
<div className="flex flex-col mb-6">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindEmail}
required={true}
id="email"
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="password"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindPassword}
required={true}
id="password"
type="password"
name="password"
placeholder="Password"
/>
</div>
</div>
<div className="flex items-center mb-6 -mt-4">
<div className="flex ml-auto">
<router.Link
to={app.FORGOT_PASSWORD_PATH}
className="inline-flex text-xs sm:text-sm text-blue-500 hover:text-blue-700"
>
Forgot Your Password?
</router.Link>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={ className={
"flex items-center justify-center focus:outline-none text-white " + 'flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md ' +
"text-sm sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full " + 'w-full max-w-md'
"transition duration-150 ease-in"
} }
> >
<span className="mr-2 uppercase">Login</span> <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
<span> Login To Your Account
<icons.Svg data={icons.PATHS.rightArrow} /> </div>
</span> <button onClick={utils.handleEvent(signInWithGoogle)} className={BUTTON_CLASS_NAME}>
</button> <common.FontAwesomeIcon icon={fontawesomeIcons.faGithub} />
<span>Login with Google</span>
</button>
<button onClick={utils.handleEvent(signInWithGitHub)} className={BUTTON_CLASS_NAME}>
<common.FontAwesomeIcon icon={fontawesomeIcons.faGithub} />
<span>Login with Github</span>
</button>
<div className="relative mt-10 h-px bg-gray-300">
<div className="absolute left-0 top-0 flex justify-center w-full -mt-2">
<span className="bg-white px-4 text-xs text-gray-500 uppercase">
Or Login With Email
</span>
</div>
</div>
<div className="mt-10">
<form
onSubmit={utils.handleEvent(async () =>
signInWithPassword(email, password)
)}
>
<div className="flex flex-col mb-6">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindEmail}
required={true}
id="email"
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="password"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindPassword}
required={true}
id="password"
type="password"
name="password"
placeholder="Password"
/>
</div>
</div>
<div className="flex items-center mb-6 -mt-4">
<div className="flex ml-auto">
<router.Link
to={app.FORGOT_PASSWORD_PATH}
className="inline-flex text-xs sm:text-sm text-blue-500 hover:text-blue-700"
>
Forgot Your Password?
</router.Link>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={
'flex items-center justify-center focus:outline-none text-white ' +
'text-sm sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full ' +
'transition duration-150 ease-in'
}
>
<span className="mr-2 uppercase">Login</span>
<span>
<icons.Svg data={icons.PATHS.rightArrow} />
</span>
</button>
</div>
</form>
</div>
<div className="flex justify-center items-center mt-6">
<router.Link
to={app.REGISTRATION_PATH}
className={
'inline-flex items-center font-bold text-blue-500 hover:text-blue-700 ' +
'text-xs text-center'
}
>
<span>
<icons.Svg data={icons.PATHS.createAccount} />
</span>
<span className="ml-2">You don&apos;t have an account?</span>
</router.Link>
</div>
</div> </div>
</form>
</div> </div>
<div className="flex justify-center items-center mt-6"> )
<router.Link
to={app.REGISTRATION_PATH}
className={
"inline-flex items-center font-bold text-blue-500 hover:text-blue-700 " +
"text-xs text-center"
}
>
<span>
<icons.Svg data={icons.PATHS.createAccount} />
</span>
<span className="ml-2">You don&apos;t have an account?</span>
</router.Link>
</div>
</div>
</div>
);
} }
function parseUrlSearchParams(search: string) { function parseUrlSearchParams(search: string) {
const query = new URLSearchParams(search); const query = new URLSearchParams(search)
const email = query.get(LOGIN_QUERY_PARAMS.email); const email = query.get(LOGIN_QUERY_PARAMS.email)
return email; return email
} }
export default Login; export default Login

250
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/registration.tsx
View File

@ -1,138 +1,138 @@
/** @file Registration container responsible for rendering and interactions in sign up flow. */ /** @file Registration container responsible for rendering and interactions in sign up flow. */
import * as router from "react-router-dom"; import * as router from 'react-router-dom'
import toast from "react-hot-toast"; import toast from 'react-hot-toast'
import * as app from "../../components/app"; import * as app from '../../components/app'
import * as auth from "../providers/auth"; import * as auth from '../providers/auth'
import * as common from "./common"; import * as common from './common'
import * as hooks from "../../hooks"; import * as hooks from '../../hooks'
import * as icons from "../../components/svg"; import * as icons from '../../components/svg'
import * as utils from "../../utils"; import * as utils from '../../utils'
// ==================== // ====================
// === Registration === // === Registration ===
// ==================== // ====================
function Registration() { function Registration() {
const { signUp } = auth.useAuth(); const { signUp } = auth.useAuth()
const [email, bindEmail] = hooks.useInput(""); const [email, bindEmail] = hooks.useInput('')
const [password, bindPassword] = hooks.useInput(""); const [password, bindPassword] = hooks.useInput('')
const [confirmPassword, bindConfirmPassword] = hooks.useInput(""); const [confirmPassword, bindConfirmPassword] = hooks.useInput('')
const handleSubmit = () => { const handleSubmit = () => {
/** The password & confirm password fields must match. */ /** The password & confirm password fields must match. */
if (password !== confirmPassword) { if (password !== confirmPassword) {
toast.error("Passwords do not match."); toast.error('Passwords do not match.')
return Promise.resolve(); return Promise.resolve()
} else { } else {
return signUp(email, password); return signUp(email, password)
}
};
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-300 px-4 py-8">
<div
className={
"rounded-md bg-white w-full max-w-sm sm:max-w-md border border-gray-200 " +
"shadow-md px-4 py-6 sm:p-8"
} }
> }
<div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
Create new account return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-300 px-4 py-8">
<div
className={
'rounded-md bg-white w-full max-w-sm sm:max-w-md border border-gray-200 ' +
'shadow-md px-4 py-6 sm:p-8'
}
>
<div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
Create new account
</div>
<form onSubmit={utils.handleEvent(handleSubmit)}>
<div className="flex flex-col mb-4">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindEmail}
id="email"
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex flex-col mb-4">
<label
htmlFor="password"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindPassword}
id="password"
type="password"
name="password"
placeholder="Password"
/>
</div>
</div>
<div className="flex flex-col mb-4">
<label
htmlFor="password_confirmation"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Confirm Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindConfirmPassword}
id="password_confirmation"
type="password"
name="password_confirmation"
placeholder="Confirm Password"
/>
</div>
</div>
<div className="flex w-full mt-6">
<button
type="submit"
className={
'flex items-center justify-center focus:outline-none text-white text-sm ' +
'sm:text-base bg-indigo-600 hover:bg-indigo-700 rounded py-2 w-full transition ' +
'duration-150 ease-in'
}
>
<span className="mr-2 uppercase">Register</span>
<span>
<icons.Svg data={icons.PATHS.createAccount} />
</span>
</button>
</div>
</form>
</div>
<div className="flex justify-center items-center mt-6">
<router.Link
to={app.LOGIN_PATH}
className={
'inline-flex items-center font-bold text-indigo-500 hover:text-indigo-700 ' +
'text-sm text-center'
}
>
<span>
<icons.Svg data={icons.PATHS.goBack} />
</span>
<span className="ml-2">Already have an account?</span>
</router.Link>
</div>
</div> </div>
)
<form onSubmit={utils.handleEvent(handleSubmit)}>
<div className="flex flex-col mb-4">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindEmail}
id="email"
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex flex-col mb-4">
<label
htmlFor="password"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindPassword}
id="password"
type="password"
name="password"
placeholder="Password"
/>
</div>
</div>
<div className="flex flex-col mb-4">
<label
htmlFor="password_confirmation"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Confirm Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindConfirmPassword}
id="password_confirmation"
type="password"
name="password_confirmation"
placeholder="Confirm Password"
/>
</div>
</div>
<div className="flex w-full mt-6">
<button
type="submit"
className={
"flex items-center justify-center focus:outline-none text-white text-sm " +
"sm:text-base bg-indigo-600 hover:bg-indigo-700 rounded py-2 w-full transition " +
"duration-150 ease-in"
}
>
<span className="mr-2 uppercase">Register</span>
<span>
<icons.Svg data={icons.PATHS.createAccount} />
</span>
</button>
</div>
</form>
</div>
<div className="flex justify-center items-center mt-6">
<router.Link
to={app.LOGIN_PATH}
className={
"inline-flex items-center font-bold text-indigo-500 hover:text-indigo-700 " +
"text-sm text-center"
}
>
<span>
<icons.Svg data={icons.PATHS.goBack} />
</span>
<span className="ml-2">Already have an account?</span>
</router.Link>
</div>
</div>
);
} }
export default Registration; export default Registration

301
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/resetPassword.tsx
View File

@ -1,181 +1,178 @@
/** @file Container responsible for rendering and interactions in second half of forgot password /** @file Container responsible for rendering and interactions in second half of forgot password
* flow. */ * flow. */
import * as router from "react-router-dom"; import * as router from 'react-router-dom'
import toast from "react-hot-toast"; import toast from 'react-hot-toast'
import * as app from "../../components/app"; import * as app from '../../components/app'
import * as auth from "../providers/auth"; import * as auth from '../providers/auth'
import * as common from "./common"; import * as common from './common'
import * as hooks from "../../hooks"; import * as hooks from '../../hooks'
import * as icons from "../../components/svg"; import * as icons from '../../components/svg'
import * as utils from "../../utils"; import * as utils from '../../utils'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
const RESET_PASSWORD_QUERY_PARAMS = { const RESET_PASSWORD_QUERY_PARAMS = {
email: "email", email: 'email',
verificationCode: "verification_code", verificationCode: 'verification_code',
} as const; } as const
// ===================== // =====================
// === ResetPassword === // === ResetPassword ===
// ===================== // =====================
function ResetPassword() { function ResetPassword() {
const { resetPassword } = auth.useAuth(); const { resetPassword } = auth.useAuth()
const { search } = router.useLocation(); const { search } = router.useLocation()
const { verificationCode: initialCode, email: initialEmail } = const { verificationCode: initialCode, email: initialEmail } = parseUrlSearchParams(search)
parseUrlSearchParams(search);
const [email, bindEmail] = hooks.useInput(initialEmail ?? ""); const [email, bindEmail] = hooks.useInput(initialEmail ?? '')
const [code, bindCode] = hooks.useInput(initialCode ?? ""); const [code, bindCode] = hooks.useInput(initialCode ?? '')
const [newPassword, bindNewPassword] = hooks.useInput(""); const [newPassword, bindNewPassword] = hooks.useInput('')
const [newPasswordConfirm, bindNewPasswordConfirm] = hooks.useInput(""); const [newPasswordConfirm, bindNewPasswordConfirm] = hooks.useInput('')
const handleSubmit = () => { const handleSubmit = () => {
if (newPassword !== newPasswordConfirm) { if (newPassword !== newPasswordConfirm) {
toast.error("Passwords do not match"); toast.error('Passwords do not match')
return Promise.resolve(); return Promise.resolve()
} else { } else {
return resetPassword(email, code, newPassword); return resetPassword(email, code, newPassword)
}
};
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-300">
<div
className={
"flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full " +
"max-w-md"
} }
> }
<div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
Reset Your Password
</div>
<div className="mt-10">
<form onSubmit={utils.handleEvent(handleSubmit)}>
<div className="flex flex-col mb-6">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input return (
{...bindEmail} <div className="min-h-screen flex flex-col items-center justify-center bg-gray-300">
id="email" <div
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="code"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Confirmation Code:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindCode}
id="code"
type="text"
name="code"
placeholder="Confirmation Code"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="new_password"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
New Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindNewPassword}
id="new_password"
type="password"
name="new_password"
placeholder="New Password"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="new_password_confirm"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Confirm New Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindNewPasswordConfirm}
id="new_password_confirm"
type="password"
name="new_password_confirm"
placeholder="Confirm New Password"
/>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={ className={
"flex items-center justify-center focus:outline-none text-white text-sm " + 'flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full ' +
"sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition " + 'max-w-md'
"duration-150 ease-in"
} }
> >
<span className="mr-2 uppercase">Reset</span> <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
<span> Reset Your Password
<icons.Svg data={icons.PATHS.rightArrow} /> </div>
</span> <div className="mt-10">
</button> <form onSubmit={utils.handleEvent(handleSubmit)}>
<div className="flex flex-col mb-6">
<label
htmlFor="email"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
E-Mail Address:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindEmail}
id="email"
type="email"
name="email"
placeholder="E-Mail Address"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="code"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Confirmation Code:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindCode}
id="code"
type="text"
name="code"
placeholder="Confirmation Code"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="new_password"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
New Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindNewPassword}
id="new_password"
type="password"
name="new_password"
placeholder="New Password"
/>
</div>
</div>
<div className="flex flex-col mb-6">
<label
htmlFor="new_password_confirm"
className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
>
Confirm New Password:
</label>
<div className="relative">
<common.SvgIcon data={icons.PATHS.lock} />
<common.Input
{...bindNewPasswordConfirm}
id="new_password_confirm"
type="password"
name="new_password_confirm"
placeholder="Confirm New Password"
/>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={
'flex items-center justify-center focus:outline-none text-white text-sm ' +
'sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
'duration-150 ease-in'
}
>
<span className="mr-2 uppercase">Reset</span>
<span>
<icons.Svg data={icons.PATHS.rightArrow} />
</span>
</button>
</div>
</form>
</div>
<div className="flex justify-center items-center mt-6">
<router.Link
to={app.LOGIN_PATH}
className={
'inline-flex items-center font-bold text-blue-500 hover:text-blue-700 text-xs ' +
'text-center'
}
>
<span>
<icons.Svg data={icons.PATHS.goBack} />
</span>
<span className="ml-2">Go back to login</span>
</router.Link>
</div>
</div> </div>
</form>
</div> </div>
<div className="flex justify-center items-center mt-6"> )
<router.Link
to={app.LOGIN_PATH}
className={
"inline-flex items-center font-bold text-blue-500 hover:text-blue-700 text-xs " +
"text-center"
}
>
<span>
<icons.Svg data={icons.PATHS.goBack} />
</span>
<span className="ml-2">Go back to login</span>
</router.Link>
</div>
</div>
</div>
);
} }
function parseUrlSearchParams(search: string) { function parseUrlSearchParams(search: string) {
const query = new URLSearchParams(search); const query = new URLSearchParams(search)
const verificationCode = query.get( const verificationCode = query.get(RESET_PASSWORD_QUERY_PARAMS.verificationCode)
RESET_PASSWORD_QUERY_PARAMS.verificationCode const email = query.get(RESET_PASSWORD_QUERY_PARAMS.email)
); return { verificationCode, email }
const email = query.get(RESET_PASSWORD_QUERY_PARAMS.email);
return { verificationCode, email };
} }
export default ResetPassword; export default ResetPassword

110
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/setUsername.tsx
View File

@ -1,72 +1,72 @@
/** @file Container responsible for rendering and interactions in setting username flow, after /** @file Container responsible for rendering and interactions in setting username flow, after
* registration. */ * registration. */
import * as auth from "../providers/auth"; import * as auth from '../providers/auth'
import * as common from "./common"; import * as common from './common'
import * as hooks from "../../hooks"; import * as hooks from '../../hooks'
import * as icons from "../../components/svg"; import * as icons from '../../components/svg'
import * as utils from "../../utils"; import * as utils from '../../utils'
// =================== // ===================
// === SetUsername === // === SetUsername ===
// =================== // ===================
function SetUsername() { function SetUsername() {
const { setUsername } = auth.useAuth(); const { setUsername } = auth.useAuth()
const { accessToken, email } = auth.usePartialUserSession(); const { accessToken, email } = auth.usePartialUserSession()
const [username, bindUsername] = hooks.useInput(""); const [username, bindUsername] = hooks.useInput('')
return ( return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-300"> <div className="min-h-screen flex flex-col items-center justify-center bg-gray-300">
<div <div
className={
"flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full " +
"max-w-md"
}
>
<div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
Set your username
</div>
<div className="mt-10">
<form
onSubmit={utils.handleEvent(() =>
setUsername(accessToken, username, email)
)}
>
<div className="flex flex-col mb-6">
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindUsername}
id="username"
type="text"
name="username"
placeholder="Username"
/>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={ className={
"flex items-center justify-center focus:outline-none text-white text-sm " + 'flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-md w-full ' +
"sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition " + 'max-w-md'
"duration-150 ease-in"
} }
> >
<span className="mr-2 uppercase">Set username</span> <div className="font-medium self-center text-xl sm:text-2xl uppercase text-gray-800">
<span> Set your username
<icons.Svg data={icons.PATHS.rightArrow} /> </div>
</span> <div className="mt-10">
</button> <form
onSubmit={utils.handleEvent(() =>
setUsername(accessToken, username, email)
)}
>
<div className="flex flex-col mb-6">
<div className="relative">
<common.SvgIcon data={icons.PATHS.at} />
<common.Input
{...bindUsername}
id="username"
type="text"
name="username"
placeholder="Username"
/>
</div>
</div>
<div className="flex w-full">
<button
type="submit"
className={
'flex items-center justify-center focus:outline-none text-white text-sm ' +
'sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition ' +
'duration-150 ease-in'
}
>
<span className="mr-2 uppercase">Set username</span>
<span>
<icons.Svg data={icons.PATHS.rightArrow} />
</span>
</button>
</div>
</form>
</div>
</div> </div>
</form>
</div> </div>
</div> )
</div>
);
} }
export default SetUsername; export default SetUsername

40
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/listen.tsx
View File

@ -3,14 +3,14 @@
* Listening to authentication events is necessary to update the authentication state of the * Listening to authentication events is necessary to update the authentication state of the
* application. For example, if the user signs out, we want to clear the authentication state so * application. For example, if the user signs out, we want to clear the authentication state so
* that the login screen is rendered. */ * that the login screen is rendered. */
import * as amplify from "@aws-amplify/core"; import * as amplify from '@aws-amplify/core'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
/** Name of the string identifying the "hub" that AWS Amplify issues authentication events on. */ /** Name of the string identifying the "hub" that AWS Amplify issues authentication events on. */
const AUTHENTICATION_HUB = "auth"; const AUTHENTICATION_HUB = 'auth'
// ================= // =================
// === AuthEvent === // === AuthEvent ===
@ -21,19 +21,19 @@ const AUTHENTICATION_HUB = "auth";
* These are issues by AWS Amplify when it detects a change in authentication state. For example, * These are issues by AWS Amplify when it detects a change in authentication state. For example,
* when the user signs in or signs out by accessing a page like `enso://auth?code=...&state=...`. */ * when the user signs in or signs out by accessing a page like `enso://auth?code=...&state=...`. */
export enum AuthEvent { export enum AuthEvent {
/** Issued when the user has passed custom OAuth state parameters to some other auth event. */ /** Issued when the user has passed custom OAuth state parameters to some other auth event. */
customOAuthState = "customOAuthState", customOAuthState = 'customOAuthState',
/** Issued when the user completes the sign-in process (via federated identity provider). */ /** Issued when the user completes the sign-in process (via federated identity provider). */
cognitoHostedUi = "cognitoHostedUI", cognitoHostedUi = 'cognitoHostedUI',
/** Issued when the user completes the sign-in process (via email/password). */ /** Issued when the user completes the sign-in process (via email/password). */
signIn = "signIn", signIn = 'signIn',
/** Issued when the user signs out. */ /** Issued when the user signs out. */
signOut = "signOut", signOut = 'signOut',
} }
/** Returns `true` if the given `string` is an {@link AuthEvent}. */ /** Returns `true` if the given `string` is an {@link AuthEvent}. */
function isAuthEvent(value: string): value is AuthEvent { function isAuthEvent(value: string): value is AuthEvent {
return Object.values<string>(AuthEvent).includes(value); return Object.values<string>(AuthEvent).includes(value)
} }
// ================================= // =================================
@ -43,26 +43,24 @@ function isAuthEvent(value: string): value is AuthEvent {
/** Callback called in response to authentication state changes. /** Callback called in response to authentication state changes.
* *
* @see {@link Api["listen"]} */ * @see {@link Api["listen"]} */
export type ListenerCallback = (event: AuthEvent, data?: unknown) => void; export type ListenerCallback = (event: AuthEvent, data?: unknown) => void
/** Unsubscribes the {@link ListenerCallback} from authentication state changes. /** Unsubscribes the {@link ListenerCallback} from authentication state changes.
* *
* @see {@link Api["listen"]} */ * @see {@link Api["listen"]} */
type UnsubscribeFunction = () => void; type UnsubscribeFunction = () => void
/** Used to subscribe to {@link AuthEvent}s. /** Used to subscribe to {@link AuthEvent}s.
* *
* Returns a function that MUST be called before re-subscribing, * Returns a function that MUST be called before re-subscribing,
* to avoid memory leaks or duplicate event handlers. */ * to avoid memory leaks or duplicate event handlers. */
export type ListenFunction = ( export type ListenFunction = (listener: ListenerCallback) => UnsubscribeFunction
listener: ListenerCallback
) => UnsubscribeFunction;
export function registerAuthEventListener(listener: ListenerCallback) { export function registerAuthEventListener(listener: ListenerCallback) {
const callback: amplify.HubCallback = (data) => { const callback: amplify.HubCallback = data => {
if (isAuthEvent(data.payload.event)) { if (isAuthEvent(data.payload.event)) {
listener(data.payload.event, data.payload.data); listener(data.payload.event, data.payload.data)
}
} }
}; return amplify.Hub.listen(AUTHENTICATION_HUB, callback)
return amplify.Hub.listen(AUTHENTICATION_HUB, callback);
} }

460
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/auth.tsx
View File

@ -3,31 +3,31 @@
* Provides an `AuthProvider` component that wraps the entire application, and a `useAuth` hook that * Provides an `AuthProvider` component that wraps the entire application, and a `useAuth` hook that
* can be used from any React component to access the currently logged-in user's session data. The * can be used from any React component to access the currently logged-in user's session data. The
* hook also provides methods for registering a user, logging in, logging out, etc. */ * hook also provides methods for registering a user, logging in, logging out, etc. */
import * as react from "react"; import * as react from 'react'
import * as router from "react-router-dom"; import * as router from 'react-router-dom'
import toast from "react-hot-toast"; import toast from 'react-hot-toast'
import * as app from "../../components/app"; import * as app from '../../components/app'
import * as authServiceModule from "../service"; import * as authServiceModule from '../service'
import * as backendService from "../../dashboard/service"; import * as backendService from '../../dashboard/service'
import * as errorModule from "../../error"; import * as errorModule from '../../error'
import * as loggerProvider from "../../providers/logger"; import * as loggerProvider from '../../providers/logger'
import * as sessionProvider from "./session"; import * as sessionProvider from './session'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
const MESSAGES = { const MESSAGES = {
signUpSuccess: "We have sent you an email with further instructions!", signUpSuccess: 'We have sent you an email with further instructions!',
confirmSignUpSuccess: "Your account has been confirmed! Please log in.", confirmSignUpSuccess: 'Your account has been confirmed! Please log in.',
setUsernameSuccess: "Your username has been set!", setUsernameSuccess: 'Your username has been set!',
signInWithPasswordSuccess: "Successfully logged in!", signInWithPasswordSuccess: 'Successfully logged in!',
forgotPasswordSuccess: "We have sent you an email with further instructions!", forgotPasswordSuccess: 'We have sent you an email with further instructions!',
resetPasswordSuccess: "Successfully reset password!", resetPasswordSuccess: 'Successfully reset password!',
signOutSuccess: "Successfully logged out!", signOutSuccess: 'Successfully logged out!',
pleaseWait: "Please wait...", pleaseWait: 'Please wait...',
} as const; } as const
// ============= // =============
// === Types === // === Types ===
@ -35,19 +35,19 @@ const MESSAGES = {
// === UserSession === // === UserSession ===
export type UserSession = FullUserSession | PartialUserSession; export type UserSession = FullUserSession | PartialUserSession
/** Object containing the currently signed-in user's session data. */ /** Object containing the currently signed-in user's session data. */
export interface FullUserSession { export interface FullUserSession {
/** A discriminator for TypeScript to be able to disambiguate between this interface and other /** A discriminator for TypeScript to be able to disambiguate between this interface and other
* `UserSession` variants. */ * `UserSession` variants. */
variant: "full"; variant: 'full'
/** User's JSON Web Token (JWT), used for authenticating and authorizing requests to the API. */ /** User's JSON Web Token (JWT), used for authenticating and authorizing requests to the API. */
accessToken: string; accessToken: string
/** User's email address. */ /** User's email address. */
email: string; email: string
/** User's organization information. */ /** User's organization information. */
organization: backendService.Organization; organization: backendService.Organization
} }
/** Object containing the currently signed-in user's session data, if the user has not yet set their /** Object containing the currently signed-in user's session data, if the user has not yet set their
@ -57,13 +57,13 @@ export interface FullUserSession {
* their account. Otherwise, this type is identical to the `Session` type. This type should ONLY be * their account. Otherwise, this type is identical to the `Session` type. This type should ONLY be
* used by the `SetUsername` component. */ * used by the `SetUsername` component. */
export interface PartialUserSession { export interface PartialUserSession {
/** A discriminator for TypeScript to be able to disambiguate between this interface and other /** A discriminator for TypeScript to be able to disambiguate between this interface and other
* `UserSession` variants. */ * `UserSession` variants. */
variant: "partial"; variant: 'partial'
/** User's JSON Web Token (JWT), used for authenticating and authorizing requests to the API. */ /** User's JSON Web Token (JWT), used for authenticating and authorizing requests to the API. */
accessToken: string; accessToken: string
/** User's email address. */ /** User's email address. */
email: string; email: string
} }
// =================== // ===================
@ -78,27 +78,19 @@ export interface PartialUserSession {
* *
* See {@link Cognito} for details on each of the authentication functions. */ * See {@link Cognito} for details on each of the authentication functions. */
interface AuthContextType { interface AuthContextType {
signUp: (email: string, password: string) => Promise<void>; signUp: (email: string, password: string) => Promise<void>
confirmSignUp: (email: string, code: string) => Promise<void>; confirmSignUp: (email: string, code: string) => Promise<void>
setUsername: ( setUsername: (accessToken: string, username: string, email: string) => Promise<void>
accessToken: string, signInWithGoogle: () => Promise<void>
username: string, signInWithGitHub: () => Promise<void>
email: string signInWithPassword: (email: string, password: string) => Promise<void>
) => Promise<void>; forgotPassword: (email: string) => Promise<void>
signInWithGoogle: () => Promise<void>; resetPassword: (email: string, code: string, password: string) => Promise<void>
signInWithGitHub: () => Promise<void>; signOut: () => Promise<void>
signInWithPassword: (email: string, password: string) => Promise<void>; /** Session containing the currently authenticated user's authentication information.
forgotPassword: (email: string) => Promise<void>; *
resetPassword: ( * If the user has not signed in, the session will be `null`. */
email: string, session: UserSession | null
code: string,
password: string
) => Promise<void>;
signOut: () => Promise<void>;
/** Session containing the currently authenticated user's authentication information.
*
* If the user has not signed in, the session will be `null`. */
session: UserSession | null;
} }
// Eslint doesn't like headings. // Eslint doesn't like headings.
@ -126,192 +118,186 @@ interface AuthContextType {
* So changing the cast would provide no safety guarantees, and would require us to introduce null * So changing the cast would provide no safety guarantees, and would require us to introduce null
* checks everywhere we use the context. */ * checks everywhere we use the context. */
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
const AuthContext = react.createContext<AuthContextType>({} as AuthContextType); const AuthContext = react.createContext<AuthContextType>({} as AuthContextType)
// ==================== // ====================
// === AuthProvider === // === AuthProvider ===
// ==================== // ====================
export interface AuthProviderProps { export interface AuthProviderProps {
authService: authServiceModule.AuthService; authService: authServiceModule.AuthService
/** Callback to execute once the user has authenticated successfully. */ /** Callback to execute once the user has authenticated successfully. */
onAuthenticated: () => void; onAuthenticated: () => void
children: react.ReactNode; children: react.ReactNode
} }
export function AuthProvider(props: AuthProviderProps) { export function AuthProvider(props: AuthProviderProps) {
const { authService, children } = props; const { authService, children } = props
const { cognito } = authService; const { cognito } = authService
const { session } = sessionProvider.useSession(); const { session } = sessionProvider.useSession()
const logger = loggerProvider.useLogger(); const logger = loggerProvider.useLogger()
const navigate = router.useNavigate(); const navigate = router.useNavigate()
const onAuthenticated = react.useCallback(props.onAuthenticated, []); const onAuthenticated = react.useCallback(props.onAuthenticated, [])
const [initialized, setInitialized] = react.useState(false); const [initialized, setInitialized] = react.useState(false)
const [userSession, setUserSession] = react.useState<UserSession | null>( const [userSession, setUserSession] = react.useState<UserSession | null>(null)
null
);
/** Fetch the JWT access token from the session via the AWS Amplify library. /** Fetch the JWT access token from the session via the AWS Amplify library.
* *
* When invoked, retrieves the access token (if available) from the storage method chosen when * When invoked, retrieves the access token (if available) from the storage method chosen when
* Amplify was configured (e.g. local storage). If the token is not available, return `undefined`. * Amplify was configured (e.g. local storage). If the token is not available, return `undefined`.
* If the token has expired, automatically refreshes the token and returns the new token. */ * If the token has expired, automatically refreshes the token and returns the new token. */
react.useEffect(() => { react.useEffect(() => {
const fetchSession = async () => { const fetchSession = async () => {
if (session.none) { if (session.none) {
setInitialized(true); setInitialized(true)
setUserSession(null); setUserSession(null)
} else { } else {
const { accessToken, email } = session.val; const { accessToken, email } = session.val
const backend = backendService.createBackend(accessToken, logger); const backend = backendService.createBackend(accessToken, logger)
const organization = await backend.getUser(); const organization = await backend.getUser()
let newUserSession: UserSession; let newUserSession: UserSession
if (!organization) { if (!organization) {
newUserSession = { newUserSession = {
variant: "partial", variant: 'partial',
email, email,
accessToken, accessToken,
}; }
} else { } else {
newUserSession = { newUserSession = {
variant: "full", variant: 'full',
email, email,
accessToken, accessToken,
organization, organization,
}; }
/** Execute the callback that should inform the Electron app that the user has logged in. /** Execute the callback that should inform the Electron app that the user has logged in.
* This is done to transition the app from the authentication/dashboard view to the IDE. */ * This is done to transition the app from the authentication/dashboard view to the IDE. */
onAuthenticated(); onAuthenticated()
}
setUserSession(newUserSession)
setInitialized(true)
}
} }
setUserSession(newUserSession); fetchSession().catch(error => {
setInitialized(true); if (isUserFacingError(error)) {
} toast.error(error.message)
}; } else {
logger.error(error)
}
})
}, [session])
fetchSession().catch((error) => { const withLoadingToast =
if (isUserFacingError(error)) { <T extends unknown[]>(action: (...args: T) => Promise<void>) =>
toast.error(error.message); async (...args: T) => {
} else { const loadingToast = toast.loading(MESSAGES.pleaseWait)
logger.error(error); try {
} await action(...args)
}); } finally {
}, [session]); toast.dismiss(loadingToast)
}
const withLoadingToast =
<T extends unknown[]>(action: (...args: T) => Promise<void>) =>
async (...args: T) => {
const loadingToast = toast.loading(MESSAGES.pleaseWait);
try {
await action(...args);
} finally {
toast.dismiss(loadingToast);
}
};
const signUp = (username: string, password: string) =>
cognito.signUp(username, password).then((result) => {
if (result.ok) {
toast.success(MESSAGES.signUpSuccess);
} else {
toast.error(result.val.message);
}
});
const confirmSignUp = async (email: string, code: string) =>
cognito.confirmSignUp(email, code).then((result) => {
if (result.err) {
switch (result.val.kind) {
case "UserAlreadyConfirmed":
break;
default:
throw new errorModule.UnreachableCaseError(result.val.kind);
}
}
toast.success(MESSAGES.confirmSignUpSuccess);
navigate(app.LOGIN_PATH);
});
const signInWithPassword = async (email: string, password: string) =>
cognito.signInWithPassword(email, password).then((result) => {
if (result.ok) {
toast.success(MESSAGES.signInWithPasswordSuccess);
} else {
if (result.val.kind === "UserNotFound") {
navigate(app.REGISTRATION_PATH);
} }
toast.error(result.val.message); const signUp = (username: string, password: string) =>
} cognito.signUp(username, password).then(result => {
}); if (result.ok) {
toast.success(MESSAGES.signUpSuccess)
} else {
toast.error(result.val.message)
}
})
const setUsername = async ( const confirmSignUp = async (email: string, code: string) =>
accessToken: string, cognito.confirmSignUp(email, code).then(result => {
username: string, if (result.err) {
email: string switch (result.val.kind) {
) => { case 'UserAlreadyConfirmed':
const body: backendService.SetUsernameRequestBody = { break
userName: username, default:
userEmail: email, throw new errorModule.UnreachableCaseError(result.val.kind)
}; }
}
/** TODO [NP]: https://github.com/enso-org/cloud-v2/issues/343 toast.success(MESSAGES.confirmSignUpSuccess)
* The API client is reinitialised on every request. That is an inefficient way of usage. navigate(app.LOGIN_PATH)
* Fix it by using React context and implementing it as a singleton. */ })
const backend = backendService.createBackend(accessToken, logger);
await backend.setUsername(body); const signInWithPassword = async (email: string, password: string) =>
navigate(app.DASHBOARD_PATH); cognito.signInWithPassword(email, password).then(result => {
toast.success(MESSAGES.setUsernameSuccess); if (result.ok) {
}; toast.success(MESSAGES.signInWithPasswordSuccess)
} else {
if (result.val.kind === 'UserNotFound') {
navigate(app.REGISTRATION_PATH)
}
const forgotPassword = async (email: string) => toast.error(result.val.message)
cognito.forgotPassword(email).then((result) => { }
if (result.ok) { })
toast.success(MESSAGES.forgotPasswordSuccess);
navigate(app.RESET_PASSWORD_PATH);
} else {
toast.error(result.val.message);
}
});
const resetPassword = async (email: string, code: string, password: string) => const setUsername = async (accessToken: string, username: string, email: string) => {
cognito.forgotPasswordSubmit(email, code, password).then((result) => { const body: backendService.SetUsernameRequestBody = {
if (result.ok) { userName: username,
toast.success(MESSAGES.resetPasswordSuccess); userEmail: email,
navigate(app.LOGIN_PATH); }
} else {
toast.error(result.val.message);
}
});
const signOut = () => /** TODO [NP]: https://github.com/enso-org/cloud-v2/issues/343
cognito.signOut().then(() => { * The API client is reinitialised on every request. That is an inefficient way of usage.
toast.success(MESSAGES.signOutSuccess); * Fix it by using React context and implementing it as a singleton. */
}); const backend = backendService.createBackend(accessToken, logger)
const value = { await backend.setUsername(body)
signUp: withLoadingToast(signUp), navigate(app.DASHBOARD_PATH)
confirmSignUp: withLoadingToast(confirmSignUp), toast.success(MESSAGES.setUsernameSuccess)
setUsername, }
signInWithGoogle: cognito.signInWithGoogle.bind(cognito),
signInWithGitHub: cognito.signInWithGitHub.bind(cognito),
signInWithPassword: withLoadingToast(signInWithPassword),
forgotPassword: withLoadingToast(forgotPassword),
resetPassword: withLoadingToast(resetPassword),
signOut,
session: userSession,
};
return ( const forgotPassword = async (email: string) =>
<AuthContext.Provider value={value}> cognito.forgotPassword(email).then(result => {
{/* Only render the underlying app after we assert for the presence of a current user. */} if (result.ok) {
{initialized && children} toast.success(MESSAGES.forgotPasswordSuccess)
</AuthContext.Provider> navigate(app.RESET_PASSWORD_PATH)
); } else {
toast.error(result.val.message)
}
})
const resetPassword = async (email: string, code: string, password: string) =>
cognito.forgotPasswordSubmit(email, code, password).then(result => {
if (result.ok) {
toast.success(MESSAGES.resetPasswordSuccess)
navigate(app.LOGIN_PATH)
} else {
toast.error(result.val.message)
}
})
const signOut = () =>
cognito.signOut().then(() => {
toast.success(MESSAGES.signOutSuccess)
})
const value = {
signUp: withLoadingToast(signUp),
confirmSignUp: withLoadingToast(confirmSignUp),
setUsername,
signInWithGoogle: cognito.signInWithGoogle.bind(cognito),
signInWithGitHub: cognito.signInWithGitHub.bind(cognito),
signInWithPassword: withLoadingToast(signInWithPassword),
forgotPassword: withLoadingToast(forgotPassword),
resetPassword: withLoadingToast(resetPassword),
signOut,
session: userSession,
}
return (
<AuthContext.Provider value={value}>
{/* Only render the underlying app after we assert for the presence of a current user. */}
{initialized && children}
</AuthContext.Provider>
)
} }
/** Type of an error containing a `string`-typed `message` field. /** Type of an error containing a `string`-typed `message` field.
@ -319,13 +305,13 @@ export function AuthProvider(props: AuthProviderProps) {
* Many types of errors fall into this category. We use this type to check if an error can be safely * Many types of errors fall into this category. We use this type to check if an error can be safely
* displayed to the user. */ * displayed to the user. */
interface UserFacingError { interface UserFacingError {
/** The user-facing error message. */ /** The user-facing error message. */
message: string; message: string
} }
/** Returns `true` if the value is a {@link UserFacingError}. */ /** Returns `true` if the value is a {@link UserFacingError}. */
function isUserFacingError(value: unknown): value is UserFacingError { function isUserFacingError(value: unknown): value is UserFacingError {
return typeof value === "object" && value != null && "message" in value; return typeof value === 'object' && value != null && 'message' in value
} }
// =============== // ===============
@ -337,7 +323,7 @@ function isUserFacingError(value: unknown): value is UserFacingError {
* Only the hook is exported, and not the context, because we only want to use the hook directly and * Only the hook is exported, and not the context, because we only want to use the hook directly and
* never the context component. */ * never the context component. */
export function useAuth() { export function useAuth() {
return react.useContext(AuthContext); return react.useContext(AuthContext)
} }
// ======================= // =======================
@ -346,13 +332,13 @@ export function useAuth() {
// eslint-disable-next-line @typescript-eslint/naming-convention // eslint-disable-next-line @typescript-eslint/naming-convention
export function ProtectedLayout() { export function ProtectedLayout() {
const { session } = useAuth(); const { session } = useAuth()
if (!session) { if (!session) {
return <router.Navigate to={app.LOGIN_PATH} />; return <router.Navigate to={app.LOGIN_PATH} />
} else { } else {
return <router.Outlet context={session} />; return <router.Outlet context={session} />
} }
} }
// =================== // ===================
@ -361,15 +347,15 @@ export function ProtectedLayout() {
// eslint-disable-next-line @typescript-eslint/naming-convention // eslint-disable-next-line @typescript-eslint/naming-convention
export function GuestLayout() { export function GuestLayout() {
const { session } = useAuth(); const { session } = useAuth()
if (session?.variant === "partial") { if (session?.variant === 'partial') {
return <router.Navigate to={app.SET_USERNAME_PATH} />; return <router.Navigate to={app.SET_USERNAME_PATH} />
} else if (session?.variant === "full") { } else if (session?.variant === 'full') {
return <router.Navigate to={app.DASHBOARD_PATH} />; return <router.Navigate to={app.DASHBOARD_PATH} />
} else { } else {
return <router.Outlet />; return <router.Outlet />
} }
} }
// ============================= // =============================
@ -377,7 +363,7 @@ export function GuestLayout() {
// ============================= // =============================
export function usePartialUserSession() { export function usePartialUserSession() {
return router.useOutletContext<PartialUserSession>(); return router.useOutletContext<PartialUserSession>()
} }
// ========================== // ==========================
@ -385,5 +371,5 @@ export function usePartialUserSession() {
// ========================== // ==========================
export function useFullUserSession() { export function useFullUserSession() {
return router.useOutletContext<FullUserSession>(); return router.useOutletContext<FullUserSession>()
} }

205
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/session.tsx
View File

@ -1,139 +1,136 @@
/** @file Provider for the {@link SessionContextType}, which contains information about the /** @file Provider for the {@link SessionContextType}, which contains information about the
* currently authenticated user's session. */ * currently authenticated user's session. */
import * as react from "react"; import * as react from 'react'
import * as results from "ts-results"; import * as results from 'ts-results'
import * as cognito from "../cognito"; import * as cognito from '../cognito'
import * as error from "../../error"; import * as error from '../../error'
import * as hooks from "../../hooks"; import * as hooks from '../../hooks'
import * as listen from "../listen"; import * as listen from '../listen'
// ====================== // ======================
// === SessionContext === // === SessionContext ===
// ====================== // ======================
interface SessionContextType { interface SessionContextType {
session: results.Option<cognito.UserSession>; session: results.Option<cognito.UserSession>
} }
/** See {@link AuthContext} for safety details. */ /** See {@link AuthContext} for safety details. */
const SessionContext = react.createContext<SessionContextType>( const SessionContext = react.createContext<SessionContextType>(
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
{} as SessionContextType {} as SessionContextType
); )
// ======================= // =======================
// === SessionProvider === // === SessionProvider ===
// ======================= // =======================
interface SessionProviderProps { interface SessionProviderProps {
/** URL that the content of the app is served at, by Electron. /** URL that the content of the app is served at, by Electron.
* *
* This **must** be the actual page that the content is served at, otherwise the OAuth flow will * This **must** be the actual page that the content is served at, otherwise the OAuth flow will
* not work and will redirect the user to a blank page. If this is the correct URL, no redirect * not work and will redirect the user to a blank page. If this is the correct URL, no redirect
* will occur (which is the desired behaviour). * will occur (which is the desired behaviour).
* *
* The URL includes a scheme, hostname, and port (e.g., `http://localhost:8080`). The port is not * The URL includes a scheme, hostname, and port (e.g., `http://localhost:8080`). The port is not
* known ahead of time, since the content may be served on any free port. Thus, the URL is * known ahead of time, since the content may be served on any free port. Thus, the URL is
* obtained by reading the window location at the time that authentication is instantiated. This * obtained by reading the window location at the time that authentication is instantiated. This
* is guaranteed to be the correct location, since authentication is instantiated when the content * is guaranteed to be the correct location, since authentication is instantiated when the content
* is initially served. */ * is initially served. */
mainPageUrl: URL; mainPageUrl: URL
registerAuthEventListener: listen.ListenFunction; registerAuthEventListener: listen.ListenFunction
userSession: () => Promise<results.Option<cognito.UserSession>>; userSession: () => Promise<results.Option<cognito.UserSession>>
children: react.ReactNode; children: react.ReactNode
} }
export function SessionProvider(props: SessionProviderProps) { export function SessionProvider(props: SessionProviderProps) {
const { mainPageUrl, children, userSession, registerAuthEventListener } = const { mainPageUrl, children, userSession, registerAuthEventListener } = props
props;
/** Flag used to avoid rendering child components until we've fetched the user's session at least /** Flag used to avoid rendering child components until we've fetched the user's session at least
* once. Avoids flash of the login screen when the user is already logged in. */ * once. Avoids flash of the login screen when the user is already logged in. */
const [initialized, setInitialized] = react.useState(false); const [initialized, setInitialized] = react.useState(false)
/** Produces a new object every time. /** Produces a new object every time.
* This is not equal to any other empty object because objects are compared by reference. * This is not equal to any other empty object because objects are compared by reference.
* Because it is not equal to the old value, React re-renders the component. */ * Because it is not equal to the old value, React re-renders the component. */
function newRefresh() { function newRefresh() {
return {}; return {}
} }
/** State that, when set, forces a refresh of the user session. This is useful when a /** State that, when set, forces a refresh of the user session. This is useful when a
* user has just logged in (so their cached credentials are out of date). Should be used via the * user has just logged in (so their cached credentials are out of date). Should be used via the
* `refreshSession` function. */ * `refreshSession` function. */
const [refresh, setRefresh] = react.useState(newRefresh()); const [refresh, setRefresh] = react.useState(newRefresh())
/** Forces a refresh of the user session. /** Forces a refresh of the user session.
* *
* Should be called after any operation that **will** (not **might**) change the user's session. * Should be called after any operation that **will** (not **might**) change the user's session.
* For example, this should be called after signing out. Calling this will result in a re-render * For example, this should be called after signing out. Calling this will result in a re-render
* of the whole page, which is why it should only be done when necessary. */ * of the whole page, which is why it should only be done when necessary. */
const refreshSession = () => { const refreshSession = () => {
setRefresh(newRefresh()); setRefresh(newRefresh())
}; }
/** Register an async effect that will fetch the user's session whenever the `refresh` state is /** Register an async effect that will fetch the user's session whenever the `refresh` state is
* incremented. This is useful when a user has just logged in (as their cached credentials are * incremented. This is useful when a user has just logged in (as their cached credentials are
* out of date, so this will update them). */ * out of date, so this will update them). */
const session = hooks.useAsyncEffect( const session = hooks.useAsyncEffect(
results.None, results.None,
async () => { async () => {
const innerSession = await userSession(); const innerSession = await userSession()
setInitialized(true); setInitialized(true)
return innerSession; return innerSession
}, },
[refresh, userSession] [refresh, userSession]
); )
/** Register an effect that will listen for authentication events. When the event occurs, we /** Register an effect that will listen for authentication events. When the event occurs, we
* will refresh or clear the user's session, forcing a re-render of the page with the new * will refresh or clear the user's session, forcing a re-render of the page with the new
* session. * session.
* *
* For example, if a user clicks the signout button, this will clear the user's session, which * For example, if a user clicks the signout button, this will clear the user's session, which
* means we want the login screen to render (which is a child of this provider). */ * means we want the login screen to render (which is a child of this provider). */
react.useEffect(() => { react.useEffect(() => {
const listener: listen.ListenerCallback = (event) => { const listener: listen.ListenerCallback = event => {
switch (event) { switch (event) {
case listen.AuthEvent.signIn: case listen.AuthEvent.signIn:
case listen.AuthEvent.signOut: { case listen.AuthEvent.signOut: {
refreshSession(); refreshSession()
break; break
}
case listen.AuthEvent.customOAuthState:
case listen.AuthEvent.cognitoHostedUi: {
/** AWS Amplify doesn't provide a way to set the redirect URL for the OAuth flow, so
* we have to hack it by replacing the URL in the browser's history. This is done
* because otherwise the user will be redirected to a URL like `enso://auth`, which
* will not work.
*
* See:
* https://github.com/aws-amplify/amplify-js/issues/3391#issuecomment-756473970 */
window.history.replaceState({}, '', mainPageUrl)
refreshSession()
break
}
default: {
throw new error.UnreachableCaseError(event)
}
}
} }
case listen.AuthEvent.customOAuthState:
case listen.AuthEvent.cognitoHostedUi: {
/** AWS Amplify doesn't provide a way to set the redirect URL for the OAuth flow, so
* we have to hack it by replacing the URL in the browser's history. This is done
* because otherwise the user will be redirected to a URL like `enso://auth`, which
* will not work.
*
* See:
* https://github.com/aws-amplify/amplify-js/issues/3391#issuecomment-756473970 */
window.history.replaceState({}, "", mainPageUrl);
refreshSession();
break;
}
default: {
throw new error.UnreachableCaseError(event);
}
}
};
const cancel = registerAuthEventListener(listener); const cancel = registerAuthEventListener(listener)
/** Return the `cancel` function from the `useEffect`, which ensures that the listener is /** Return the `cancel` function from the `useEffect`, which ensures that the listener is
* cleaned up between renders. This must be done because the `useEffect` will be called * cleaned up between renders. This must be done because the `useEffect` will be called
* multiple times during the lifetime of the component. */ * multiple times during the lifetime of the component. */
return cancel; return cancel
}, [registerAuthEventListener]); }, [registerAuthEventListener])
const value = { session }; const value = { session }
return ( return (
<SessionContext.Provider value={value}> <SessionContext.Provider value={value}>{initialized && children}</SessionContext.Provider>
{initialized && children} )
</SessionContext.Provider>
);
} }
// ================== // ==================
@ -141,5 +138,5 @@ export function SessionProvider(props: SessionProviderProps) {
// ================== // ==================
export function useSession() { export function useSession() {
return react.useContext(SessionContext); return react.useContext(SessionContext)
} }

337
app/ide-desktop/lib/dashboard/src/authentication/src/authentication/service.tsx
View File

@ -1,18 +1,18 @@
/** @file Provides an {@link AuthService} which consists of an underyling {@link Cognito} API /** @file Provides an {@link AuthService} which consists of an underyling {@link Cognito} API
* wrapper, along with some convenience callbacks to make URL redirects for the authentication flows * wrapper, along with some convenience callbacks to make URL redirects for the authentication flows
* work with Electron. */ * work with Electron. */
import * as amplify from "@aws-amplify/auth"; import * as amplify from '@aws-amplify/auth'
import * as common from "enso-common"; import * as common from 'enso-common'
import * as app from "../components/app"; import * as app from '../components/app'
import * as auth from "./config"; import * as auth from './config'
import * as cognito from "./cognito"; import * as cognito from './cognito'
import * as config from "../config"; import * as config from '../config'
import * as listen from "./listen"; import * as listen from './listen'
import * as loggerProvider from "../providers/logger"; import * as loggerProvider from '../providers/logger'
import * as platformModule from "../platform"; import * as platformModule from '../platform'
import * as utils from "../utils"; import * as utils from '../utils'
// ================= // =================
// === Constants === // === Constants ===
@ -20,67 +20,59 @@ import * as utils from "../utils";
/** Pathname of the {@link URL} for deep links to the sign in page, after a redirect from a /** Pathname of the {@link URL} for deep links to the sign in page, after a redirect from a
* federated identity provider. */ * federated identity provider. */
const SIGN_IN_PATHNAME = "//auth"; const SIGN_IN_PATHNAME = '//auth'
/** Pathname of the {@link URL} for deep links to the sign out page, after a redirect from a /** Pathname of the {@link URL} for deep links to the sign out page, after a redirect from a
* federated identity provider. */ * federated identity provider. */
const SIGN_OUT_PATHNAME = "//auth"; const SIGN_OUT_PATHNAME = '//auth'
/** Pathname of the {@link URL} for deep links to the registration confirmation page, after a /** Pathname of the {@link URL} for deep links to the registration confirmation page, after a
* redirect from an account verification email. */ * redirect from an account verification email. */
const CONFIRM_REGISTRATION_PATHNAME = "//auth/confirmation"; const CONFIRM_REGISTRATION_PATHNAME = '//auth/confirmation'
/** Pathname of the {@link URL} for deep links to the login page, after a redirect from a reset /** Pathname of the {@link URL} for deep links to the login page, after a redirect from a reset
* password email. */ * password email. */
const LOGIN_PATHNAME = "//auth/login"; const LOGIN_PATHNAME = '//auth/login'
/** URL used as the OAuth redirect when running in the desktop app. */ /** URL used as the OAuth redirect when running in the desktop app. */
const DESKTOP_REDIRECT = utils.brand<auth.OAuthRedirect>( const DESKTOP_REDIRECT = utils.brand<auth.OAuthRedirect>(`${common.DEEP_LINK_SCHEME}://auth`)
`${common.DEEP_LINK_SCHEME}://auth`
);
/** Map from platform to the OAuth redirect URL that should be used for that platform. */ /** Map from platform to the OAuth redirect URL that should be used for that platform. */
const PLATFORM_TO_CONFIG: Record< const PLATFORM_TO_CONFIG: Record<
platformModule.Platform, platformModule.Platform,
Pick<auth.AmplifyConfig, "redirectSignIn" | "redirectSignOut"> Pick<auth.AmplifyConfig, 'redirectSignIn' | 'redirectSignOut'>
> = { > = {
[platformModule.Platform.desktop]: { [platformModule.Platform.desktop]: {
redirectSignIn: DESKTOP_REDIRECT, redirectSignIn: DESKTOP_REDIRECT,
redirectSignOut: DESKTOP_REDIRECT, redirectSignOut: DESKTOP_REDIRECT,
}, },
[platformModule.Platform.cloud]: { [platformModule.Platform.cloud]: {
redirectSignIn: config.ACTIVE_CONFIG.cloudRedirect, redirectSignIn: config.ACTIVE_CONFIG.cloudRedirect,
redirectSignOut: config.ACTIVE_CONFIG.cloudRedirect, redirectSignOut: config.ACTIVE_CONFIG.cloudRedirect,
}, },
}; }
const BASE_AMPLIFY_CONFIG = { const BASE_AMPLIFY_CONFIG = {
region: auth.AWS_REGION, region: auth.AWS_REGION,
scope: auth.OAUTH_SCOPES, scope: auth.OAUTH_SCOPES,
responseType: auth.OAUTH_RESPONSE_TYPE, responseType: auth.OAUTH_RESPONSE_TYPE,
} satisfies Partial<auth.AmplifyConfig>; } satisfies Partial<auth.AmplifyConfig>
/** Collection of configuration details for Amplify user pools, sorted by deployment environment. */ /** Collection of configuration details for Amplify user pools, sorted by deployment environment. */
const AMPLIFY_CONFIGS = { const AMPLIFY_CONFIGS = {
/** Configuration for @pbuchu's Cognito user pool. */ /** Configuration for @pbuchu's Cognito user pool. */
pbuchu: { pbuchu: {
userPoolId: utils.brand<auth.UserPoolId>("eu-west-1_jSF1RbgPK"), userPoolId: utils.brand<auth.UserPoolId>('eu-west-1_jSF1RbgPK'),
userPoolWebClientId: utils.brand<auth.UserPoolWebClientId>( userPoolWebClientId: utils.brand<auth.UserPoolWebClientId>('1bnib0jfon3aqc5g3lkia2infr'),
"1bnib0jfon3aqc5g3lkia2infr" domain: utils.brand<auth.OAuthDomain>('pb-enso-domain.auth.eu-west-1.amazoncognito.com'),
), ...BASE_AMPLIFY_CONFIG,
domain: utils.brand<auth.OAuthDomain>( } satisfies Partial<auth.AmplifyConfig>,
"pb-enso-domain.auth.eu-west-1.amazoncognito.com" /** Configuration for the production Cognito user pool. */
), production: {
...BASE_AMPLIFY_CONFIG, userPoolId: utils.brand<auth.UserPoolId>('eu-west-1_9Kycu2SbD'),
} satisfies Partial<auth.AmplifyConfig>, userPoolWebClientId: utils.brand<auth.UserPoolWebClientId>('4j9bfs8e7415erf82l129v0qhe'),
/** Configuration for the production Cognito user pool. */ domain: utils.brand<auth.OAuthDomain>(
production: { 'production-enso-domain.auth.eu-west-1.amazoncognito.com'
userPoolId: utils.brand<auth.UserPoolId>("eu-west-1_9Kycu2SbD"), ),
userPoolWebClientId: utils.brand<auth.UserPoolWebClientId>( ...BASE_AMPLIFY_CONFIG,
"4j9bfs8e7415erf82l129v0qhe" } satisfies Partial<auth.AmplifyConfig>,
), }
domain: utils.brand<auth.OAuthDomain>(
"production-enso-domain.auth.eu-west-1.amazoncognito.com"
),
...BASE_AMPLIFY_CONFIG,
} satisfies Partial<auth.AmplifyConfig>,
};
// ================== // ==================
// === AuthConfig === // === AuthConfig ===
@ -88,15 +80,15 @@ const AMPLIFY_CONFIGS = {
/** Configuration for the authentication service. */ /** Configuration for the authentication service. */
export interface AuthConfig { export interface AuthConfig {
/** Logger for the authentication service. */ /** Logger for the authentication service. */
logger: loggerProvider.Logger; logger: loggerProvider.Logger
/** Whether the application is running on a desktop (i.e., versus in the Cloud). */ /** Whether the application is running on a desktop (i.e., versus in the Cloud). */
platform: platformModule.Platform; platform: platformModule.Platform
/** Function to navigate to a given (relative) URL. /** Function to navigate to a given (relative) URL.
* *
* Used to redirect to pages like the password reset page with the query parameters set in the * Used to redirect to pages like the password reset page with the query parameters set in the
* URL (e.g., `?verification_code=...`). */ * URL (e.g., `?verification_code=...`). */
navigate: (url: string) => void; navigate: (url: string) => void
} }
// =================== // ===================
@ -105,10 +97,10 @@ export interface AuthConfig {
/** API for the authentication service. */ /** API for the authentication service. */
export interface AuthService { export interface AuthService {
/** @see {@link cognito.Cognito}. */ /** @see {@link cognito.Cognito}. */
cognito: cognito.Cognito; cognito: cognito.Cognito
/** @see {@link listen.ListenFunction} */ /** @see {@link listen.ListenFunction} */
registerAuthEventListener: listen.ListenFunction; registerAuthEventListener: listen.ListenFunction
} }
/** Creates an instance of the authentication service. /** Creates an instance of the authentication service.
@ -118,49 +110,49 @@ export interface AuthService {
* This function should only be called once, and the returned service should be used throughout the * This function should only be called once, and the returned service should be used throughout the
* application. This is because it performs global configuration of the Amplify library. */ * application. This is because it performs global configuration of the Amplify library. */
export function initAuthService(authConfig: AuthConfig): AuthService { export function initAuthService(authConfig: AuthConfig): AuthService {
const { logger, platform, navigate } = authConfig; const { logger, platform, navigate } = authConfig
const amplifyConfig = loadAmplifyConfig(logger, platform, navigate); const amplifyConfig = loadAmplifyConfig(logger, platform, navigate)
const cognitoClient = new cognito.Cognito(logger, platform, amplifyConfig); const cognitoClient = new cognito.Cognito(logger, platform, amplifyConfig)
return { return {
cognito: cognitoClient, cognito: cognitoClient,
registerAuthEventListener: listen.registerAuthEventListener, registerAuthEventListener: listen.registerAuthEventListener,
}; }
} }
function loadAmplifyConfig( function loadAmplifyConfig(
logger: loggerProvider.Logger, logger: loggerProvider.Logger,
platform: platformModule.Platform, platform: platformModule.Platform,
navigate: (url: string) => void navigate: (url: string) => void
): auth.AmplifyConfig { ): auth.AmplifyConfig {
/** Load the environment-specific Amplify configuration. */ /** Load the environment-specific Amplify configuration. */
const baseConfig = AMPLIFY_CONFIGS[config.ENVIRONMENT]; const baseConfig = AMPLIFY_CONFIGS[config.ENVIRONMENT]
let urlOpener = null; let urlOpener = null
if (platform === platformModule.Platform.desktop) { if (platform === platformModule.Platform.desktop) {
/** If we're running on the desktop, we want to override the default URL opener for OAuth /** If we're running on the desktop, we want to override the default URL opener for OAuth
* flows. This is because the default URL opener opens the URL in the desktop app itself, * flows. This is because the default URL opener opens the URL in the desktop app itself,
* but we want the user to be sent to their system browser instead. The user should be sent * but we want the user to be sent to their system browser instead. The user should be sent
* to their system browser because: * to their system browser because:
* *
* - users trust their system browser with their credentials more than they trust our app; * - users trust their system browser with their credentials more than they trust our app;
* - our app can keep itself on the relevant page until the user is sent back to it (i.e., * - our app can keep itself on the relevant page until the user is sent back to it (i.e.,
* we avoid unnecessary reloads/refreshes caused by redirects. */ * we avoid unnecessary reloads/refreshes caused by redirects. */
urlOpener = openUrlWithExternalBrowser; urlOpener = openUrlWithExternalBrowser
/** To handle redirects back to the application from the system browser, we also need to /** To handle redirects back to the application from the system browser, we also need to
* register a custom URL handler. */ * register a custom URL handler. */
setDeepLinkHandler(logger, navigate); setDeepLinkHandler(logger, navigate)
} }
/** Load the platform-specific Amplify configuration. */ /** Load the platform-specific Amplify configuration. */
const platformConfig = PLATFORM_TO_CONFIG[platform]; const platformConfig = PLATFORM_TO_CONFIG[platform]
return { return {
...baseConfig, ...baseConfig,
...platformConfig, ...platformConfig,
urlOpener, urlOpener,
}; }
} }
function openUrlWithExternalBrowser(url: string) { function openUrlWithExternalBrowser(url: string) {
window.authenticationApi.openUrlInSystemBrowser(url); window.authenticationApi.openUrlInSystemBrowser(url)
} }
/** Set the callback that will be invoked when a deep link to the application is opened. /** Set the callback that will be invoked when a deep link to the application is opened.
@ -180,84 +172,81 @@ function openUrlWithExternalBrowser(url: string) {
* *
* All URLs that don't have a pathname that starts with {@link AUTHENTICATION_PATHNAME_BASE} will be * All URLs that don't have a pathname that starts with {@link AUTHENTICATION_PATHNAME_BASE} will be
* ignored by this handler. */ * ignored by this handler. */
function setDeepLinkHandler( function setDeepLinkHandler(logger: loggerProvider.Logger, navigate: (url: string) => void) {
logger: loggerProvider.Logger, const onDeepLink = (url: string) => {
navigate: (url: string) => void const parsedUrl = new URL(url)
) {
const onDeepLink = (url: string) => {
const parsedUrl = new URL(url);
switch (parsedUrl.pathname) { switch (parsedUrl.pathname) {
/** If the user is being redirected after clicking the registration confirmation link in their /** If the user is being redirected after clicking the registration confirmation link in their
* email, then the URL will be for the confirmation page path. */ * email, then the URL will be for the confirmation page path. */
case CONFIRM_REGISTRATION_PATHNAME: { case CONFIRM_REGISTRATION_PATHNAME: {
const redirectUrl = `${app.CONFIRM_REGISTRATION_PATH}${parsedUrl.search}`; const redirectUrl = `${app.CONFIRM_REGISTRATION_PATH}${parsedUrl.search}`
navigate(redirectUrl); navigate(redirectUrl)
break; break
} }
/** TODO [NP]: https://github.com/enso-org/cloud-v2/issues/339 /** TODO [NP]: https://github.com/enso-org/cloud-v2/issues/339
* Don't use `enso://auth` for both authentication redirect & signout redirect so we don't * Don't use `enso://auth` for both authentication redirect & signout redirect so we don't
* have to disambiguate between the two on the `DASHBOARD_PATH`. */ * have to disambiguate between the two on the `DASHBOARD_PATH`. */
case SIGN_OUT_PATHNAME: case SIGN_OUT_PATHNAME:
case SIGN_IN_PATHNAME: case SIGN_IN_PATHNAME:
/** If the user is being redirected after a sign-out, then no query args will be present. */ /** If the user is being redirected after a sign-out, then no query args will be present. */
if (parsedUrl.search === "") { if (parsedUrl.search === '') {
navigate(app.LOGIN_PATH); navigate(app.LOGIN_PATH)
} else { } else {
handleAuthResponse(url); handleAuthResponse(url)
}
break
/** If the user is being redirected after finishing the password reset flow, then the URL will
* be for the login page. */
case LOGIN_PATHNAME:
navigate(app.LOGIN_PATH)
break
/** If the user is being redirected from a password reset email, then we need to navigate to
* the password reset page, with the verification code and email passed in the URL so they can
* be filled in automatically. */
case app.RESET_PASSWORD_PATH: {
const resetPasswordRedirectUrl = `${app.RESET_PASSWORD_PATH}${parsedUrl.search}`
navigate(resetPasswordRedirectUrl)
break
}
default:
logger.error(`${url} is an unrecognized deep link. Ignoring.`)
} }
break;
/** If the user is being redirected after finishing the password reset flow, then the URL will
* be for the login page. */
case LOGIN_PATHNAME:
navigate(app.LOGIN_PATH);
break;
/** If the user is being redirected from a password reset email, then we need to navigate to
* the password reset page, with the verification code and email passed in the URL so they can
* be filled in automatically. */
case app.RESET_PASSWORD_PATH: {
const resetPasswordRedirectUrl = `${app.RESET_PASSWORD_PATH}${parsedUrl.search}`;
navigate(resetPasswordRedirectUrl);
break;
}
default:
logger.error(`${url} is an unrecognized deep link. Ignoring.`);
} }
};
window.authenticationApi.setDeepLinkHandler(onDeepLink); window.authenticationApi.setDeepLinkHandler(onDeepLink)
} }
/** When the user is being redirected from a federated identity provider, then we need to pass the /** When the user is being redirected from a federated identity provider, then we need to pass the
* URL to the Amplify library, which will parse the URL and complete the OAuth flow. */ * URL to the Amplify library, which will parse the URL and complete the OAuth flow. */
function handleAuthResponse(url: string) { function handleAuthResponse(url: string) {
void (async () => { void (async () => {
/** Temporarily override the `window.location` object so that Amplify doesn't try to call /** Temporarily override the `window.location` object so that Amplify doesn't try to call
* `window.location.replaceState` (which doesn't work in the renderer process because of * `window.location.replaceState` (which doesn't work in the renderer process because of
* Electron's `webSecurity`). This is a hack, but it's the only way to get Amplify to work * Electron's `webSecurity`). This is a hack, but it's the only way to get Amplify to work
* with a custom URL protocol in Electron. * with a custom URL protocol in Electron.
* *
* # Safety * # Safety
* *
* It is safe to disable the `unbound-method` lint here because we intentionally want to use * It is safe to disable the `unbound-method` lint here because we intentionally want to use
* the original `window.history.replaceState` function, which is not bound to the * the original `window.history.replaceState` function, which is not bound to the
* `window.history` object. */ * `window.history` object. */
// eslint-disable-next-line @typescript-eslint/unbound-method // eslint-disable-next-line @typescript-eslint/unbound-method
const replaceState = window.history.replaceState; const replaceState = window.history.replaceState
window.history.replaceState = () => false; window.history.replaceState = () => false
try { try {
/** # Safety /** # Safety
* *
* It is safe to disable the `no-unsafe-call` lint here because we know that the `Auth` object * It is safe to disable the `no-unsafe-call` lint here because we know that the `Auth` object
* has the `_handleAuthResponse` method, and we know that it is safe to call it with the `url` * has the `_handleAuthResponse` method, and we know that it is safe to call it with the `url`
* argument. There is no way to prove this to the TypeScript compiler, because these methods * argument. There is no way to prove this to the TypeScript compiler, because these methods
* are intentionally not part of the public AWS Amplify API. */ * are intentionally not part of the public AWS Amplify API. */
// @ts-expect-error `_handleAuthResponse` is a private method without typings. // @ts-expect-error `_handleAuthResponse` is a private method without typings.
// eslint-disable-next-line @typescript-eslint/no-unsafe-call // eslint-disable-next-line @typescript-eslint/no-unsafe-call
await amplify.Auth._handleAuthResponse(url); await amplify.Auth._handleAuthResponse(url)
} finally { } finally {
/** Restore the original `window.location.replaceState` function. */ /** Restore the original `window.location.replaceState` function. */
window.history.replaceState = replaceState; window.history.replaceState = replaceState
} }
})(); })()
} }

194
app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
View File

@ -34,41 +34,41 @@
* {@link router.Route}s require fully authenticated users (c.f. * {@link router.Route}s require fully authenticated users (c.f.
* {@link authProvider.FullUserSession}). */ * {@link authProvider.FullUserSession}). */
import * as react from "react"; import * as react from 'react'
import * as router from "react-router-dom"; import * as router from 'react-router-dom'
import * as toast from "react-hot-toast"; import * as toast from 'react-hot-toast'
import * as authProvider from "../authentication/providers/auth"; import * as authProvider from '../authentication/providers/auth'
import * as authService from "../authentication/service"; import * as authService from '../authentication/service'
import * as loggerProvider from "../providers/logger"; import * as loggerProvider from '../providers/logger'
import * as platformModule from "../platform"; import * as platformModule from '../platform'
import * as session from "../authentication/providers/session"; import * as session from '../authentication/providers/session'
import ConfirmRegistration from "../authentication/components/confirmRegistration"; import ConfirmRegistration from '../authentication/components/confirmRegistration'
import Dashboard from "../dashboard/components/dashboard"; import Dashboard from '../dashboard/components/dashboard'
import ForgotPassword from "../authentication/components/forgotPassword"; import ForgotPassword from '../authentication/components/forgotPassword'
import Login from "../authentication/components/login"; import Login from '../authentication/components/login'
import Registration from "../authentication/components/registration"; import Registration from '../authentication/components/registration'
import ResetPassword from "../authentication/components/resetPassword"; import ResetPassword from '../authentication/components/resetPassword'
import SetUsername from "../authentication/components/setUsername"; import SetUsername from '../authentication/components/setUsername'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
/** Path to the root of the app (i.e., the Cloud dashboard). */ /** Path to the root of the app (i.e., the Cloud dashboard). */
export const DASHBOARD_PATH = "/"; export const DASHBOARD_PATH = '/'
/** Path to the login page. */ /** Path to the login page. */
export const LOGIN_PATH = "/login"; export const LOGIN_PATH = '/login'
/** Path to the registration page. */ /** Path to the registration page. */
export const REGISTRATION_PATH = "/registration"; export const REGISTRATION_PATH = '/registration'
/** Path to the confirm registration page. */ /** Path to the confirm registration page. */
export const CONFIRM_REGISTRATION_PATH = "/confirmation"; export const CONFIRM_REGISTRATION_PATH = '/confirmation'
/** Path to the forgot password page. */ /** Path to the forgot password page. */
export const FORGOT_PASSWORD_PATH = "/forgot-password"; export const FORGOT_PASSWORD_PATH = '/forgot-password'
/** Path to the reset password page. */ /** Path to the reset password page. */
export const RESET_PASSWORD_PATH = "/password-reset"; export const RESET_PASSWORD_PATH = '/password-reset'
/** Path to the set username page. */ /** Path to the set username page. */
export const SET_USERNAME_PATH = "/set-username"; export const SET_USERNAME_PATH = '/set-username'
// =========== // ===========
// === App === // === App ===
@ -76,10 +76,10 @@ export const SET_USERNAME_PATH = "/set-username";
/** Global configuration for the `App` component. */ /** Global configuration for the `App` component. */
export interface AppProps { export interface AppProps {
/** Logger to use for logging. */ /** Logger to use for logging. */
logger: loggerProvider.Logger; logger: loggerProvider.Logger
platform: platformModule.Platform; platform: platformModule.Platform
onAuthenticated: () => void; onAuthenticated: () => void
} }
/** Component called by the parent module, returning the root React component for this /** Component called by the parent module, returning the root React component for this
@ -88,23 +88,21 @@ export interface AppProps {
* This component handles all the initialization and rendering of the app, and manages the app's * This component handles all the initialization and rendering of the app, and manages the app's
* routes. It also initializes an `AuthProvider` that will be used by the rest of the app. */ * routes. It also initializes an `AuthProvider` that will be used by the rest of the app. */
function App(props: AppProps) { function App(props: AppProps) {
const { platform } = props; const { platform } = props
// This is a React component even though it does not contain JSX. // This is a React component even though it does not contain JSX.
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
const Router = const Router =
platform === platformModule.Platform.desktop platform === platformModule.Platform.desktop ? router.MemoryRouter : router.BrowserRouter
? router.MemoryRouter /** Note that the `Router` must be the parent of the `AuthProvider`, because the `AuthProvider`
: router.BrowserRouter; * will redirect the user between the login/register pages and the dashboard. */
/** Note that the `Router` must be the parent of the `AuthProvider`, because the `AuthProvider` return (
* will redirect the user between the login/register pages and the dashboard. */ <>
return ( <toast.Toaster position="top-center" reverseOrder={false} />
<> <Router>
<toast.Toaster position="top-center" reverseOrder={false} /> <AppRouter {...props} />
<Router> </Router>
<AppRouter {...props} /> </>
</Router> )
</>
);
} }
// ================= // =================
@ -117,66 +115,54 @@ function App(props: AppProps) {
* because the {@link AppRouter} relies on React hooks, which can't be used in the same React * because the {@link AppRouter} relies on React hooks, which can't be used in the same React
* component as the component that defines the provider. */ * component as the component that defines the provider. */
function AppRouter(props: AppProps) { function AppRouter(props: AppProps) {
const { logger, onAuthenticated } = props; const { logger, onAuthenticated } = props
const navigate = router.useNavigate(); const navigate = router.useNavigate()
const mainPageUrl = new URL(window.location.href); const mainPageUrl = new URL(window.location.href)
const memoizedAuthService = react.useMemo(() => { const memoizedAuthService = react.useMemo(() => {
const authConfig = { navigate, ...props }; const authConfig = { navigate, ...props }
return authService.initAuthService(authConfig); return authService.initAuthService(authConfig)
}, [navigate, props]); }, [navigate, props])
const userSession = memoizedAuthService.cognito.userSession.bind( const userSession = memoizedAuthService.cognito.userSession.bind(memoizedAuthService.cognito)
memoizedAuthService.cognito const registerAuthEventListener = memoizedAuthService.registerAuthEventListener
); return (
const registerAuthEventListener = <loggerProvider.LoggerProvider logger={logger}>
memoizedAuthService.registerAuthEventListener; <session.SessionProvider
return ( mainPageUrl={mainPageUrl}
<loggerProvider.LoggerProvider logger={logger}> userSession={userSession}
<session.SessionProvider registerAuthEventListener={registerAuthEventListener}
mainPageUrl={mainPageUrl} >
userSession={userSession} <authProvider.AuthProvider
registerAuthEventListener={registerAuthEventListener} authService={memoizedAuthService}
> onAuthenticated={onAuthenticated}
<authProvider.AuthProvider >
authService={memoizedAuthService} <router.Routes>
onAuthenticated={onAuthenticated} <react.Fragment>
> {/* Login & registration pages are visible to unauthenticated users. */}
<router.Routes> <router.Route element={<authProvider.GuestLayout />}>
<react.Fragment> <router.Route path={REGISTRATION_PATH} element={<Registration />} />
{/* Login & registration pages are visible to unauthenticated users. */} <router.Route path={LOGIN_PATH} element={<Login />} />
<router.Route element={<authProvider.GuestLayout />}> </router.Route>
<router.Route {/* Protected pages are visible to authenticated users. */}
path={REGISTRATION_PATH} <router.Route element={<authProvider.ProtectedLayout />}>
element={<Registration />} <router.Route path={DASHBOARD_PATH} element={<Dashboard />} />
/> <router.Route path={SET_USERNAME_PATH} element={<SetUsername />} />
<router.Route path={LOGIN_PATH} element={<Login />} /> </router.Route>
</router.Route> {/* Other pages are visible to unauthenticated and authenticated users. */}
{/* Protected pages are visible to authenticated users. */} <router.Route
<router.Route element={<authProvider.ProtectedLayout />}> path={CONFIRM_REGISTRATION_PATH}
<router.Route path={DASHBOARD_PATH} element={<Dashboard />} /> element={<ConfirmRegistration />}
<router.Route />
path={SET_USERNAME_PATH} <router.Route
element={<SetUsername />} path={FORGOT_PASSWORD_PATH}
/> element={<ForgotPassword />}
</router.Route> />
{/* Other pages are visible to unauthenticated and authenticated users. */} <router.Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
<router.Route </react.Fragment>
path={CONFIRM_REGISTRATION_PATH} </router.Routes>
element={<ConfirmRegistration />} </authProvider.AuthProvider>
/> </session.SessionProvider>
<router.Route </loggerProvider.LoggerProvider>
path={FORGOT_PASSWORD_PATH} )
element={<ForgotPassword />}
/>
<router.Route
path={RESET_PASSWORD_PATH}
element={<ResetPassword />}
/>
</react.Fragment>
</router.Routes>
</authProvider.AuthProvider>
</session.SessionProvider>
</loggerProvider.LoggerProvider>
);
} }
export default App; export default App

61
app/ide-desktop/lib/dashboard/src/authentication/src/components/svg.tsx
View File

@ -10,23 +10,22 @@
/** Path data for the SVG icons used in app. */ /** Path data for the SVG icons used in app. */
export const PATHS = { export const PATHS = {
/** Path data for the `@` icon SVG. */ /** Path data for the `@` icon SVG. */
at: at:
"M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 " + 'M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 ' +
"8.959 0 01-4.5 1.207", '8.959 0 01-4.5 1.207',
/** Path data for the lock icon SVG. */ /** Path data for the lock icon SVG. */
lock: lock:
"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 " + 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 ' +
"0 00-8 0v4h8z", '0 00-8 0v4h8z',
/** Path data for the "right arrow" icon SVG. */ /** Path data for the "right arrow" icon SVG. */
rightArrow: "M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z", rightArrow: 'M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z',
/** Path data for the "create account" icon SVG. */ /** Path data for the "create account" icon SVG. */
createAccount: createAccount:
"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z", 'M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z',
/** Path data for the "go back" icon SVG. */ /** Path data for the "go back" icon SVG. */
goBack: goBack: 'M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1',
"M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1", } as const
} as const;
// =========== // ===========
// === Svg === // === Svg ===
@ -34,7 +33,7 @@ export const PATHS = {
/** Props for the `Svg` component. */ /** Props for the `Svg` component. */
interface Props { interface Props {
data: string; data: string
} }
/** Component for rendering SVG icons. /** Component for rendering SVG icons.
@ -42,17 +41,17 @@ interface Props {
* @param props - Extra props for the SVG path. The `props.data` field in particular contains the * @param props - Extra props for the SVG path. The `props.data` field in particular contains the
* SVG path data. */ * SVG path data. */
export function Svg(props: Props) { export function Svg(props: Props) {
return ( return (
<svg <svg
className="h-6 w-6" className="h-6 w-6"
fill="none" fill="none"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="2" strokeWidth="2"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
> >
<path d={props.data} /> <path d={props.data} />
</svg> </svg>
); )
} }

22
app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx
View File

@ -1,22 +1,22 @@
/** @file Main dashboard component, responsible for listing user's projects as well as other /** @file Main dashboard component, responsible for listing user's projects as well as other
* interactive components. */ * interactive components. */
import * as auth from "../../authentication/providers/auth"; import * as auth from '../../authentication/providers/auth'
// ================= // =================
// === Dashboard === // === Dashboard ===
// ================= // =================
function Dashboard() { function Dashboard() {
const { signOut } = auth.useAuth(); const { signOut } = auth.useAuth()
const { accessToken } = auth.useFullUserSession(); const { accessToken } = auth.useFullUserSession()
return ( return (
<> <>
<h1>This is a placeholder page for the cloud dashboard.</h1> <h1>This is a placeholder page for the cloud dashboard.</h1>
<p>Access token: {accessToken}</p> <p>Access token: {accessToken}</p>
<button onClick={signOut}>Log out</button> <button onClick={signOut}>Log out</button>
</> </>
); )
} }
export default Dashboard; export default Dashboard

130
app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/service.tsx
View File

@ -2,18 +2,18 @@
* *
* Each exported function in the {@link Backend} in this module corresponds to an API endpoint. The * Each exported function in the {@link Backend} in this module corresponds to an API endpoint. The
* functions are asynchronous and return a `Promise` that resolves to the response from the API. */ * functions are asynchronous and return a `Promise` that resolves to the response from the API. */
import * as config from "../config"; import * as config from '../config'
import * as http from "../http"; import * as http from '../http'
import * as loggerProvider from "../providers/logger"; import * as loggerProvider from '../providers/logger'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
/** Relative HTTP path to the "set username" endpoint of the Cloud backend API. */ /** Relative HTTP path to the "set username" endpoint of the Cloud backend API. */
const SET_USER_NAME_PATH = "users"; const SET_USER_NAME_PATH = 'users'
/** Relative HTTP path to the "get user" endpoint of the Cloud backend API. */ /** Relative HTTP path to the "get user" endpoint of the Cloud backend API. */
const GET_USER_PATH = "users/me"; const GET_USER_PATH = 'users/me'
// ============= // =============
// === Types === // === Types ===
@ -21,15 +21,15 @@ const GET_USER_PATH = "users/me";
/** A user/organization in the application. These are the primary owners of a project. */ /** A user/organization in the application. These are the primary owners of a project. */
export interface Organization { export interface Organization {
id: string; id: string
userEmail: string; userEmail: string
name: string; name: string
} }
/** HTTP request body for the "set username" endpoint. */ /** HTTP request body for the "set username" endpoint. */
export interface SetUsernameRequestBody { export interface SetUsernameRequestBody {
userName: string; userName: string
userEmail: string; userEmail: string
} }
// =============== // ===============
@ -38,63 +38,58 @@ export interface SetUsernameRequestBody {
/** Class for sending requests to the Cloud backend API endpoints. */ /** Class for sending requests to the Cloud backend API endpoints. */
export class Backend { export class Backend {
/** Creates a new instance of the {@link Backend} API client. /** Creates a new instance of the {@link Backend} API client.
* *
* @throws An error if the `Authorization` header is not set on the given `client`. */ * @throws An error if the `Authorization` header is not set on the given `client`. */
constructor( constructor(
private readonly client: http.Client, private readonly client: http.Client,
private readonly logger: loggerProvider.Logger private readonly logger: loggerProvider.Logger
) { ) {
/** All of our API endpoints are authenticated, so we expect the `Authorization` header to be /** All of our API endpoints are authenticated, so we expect the `Authorization` header to be
* set. */ * set. */
if (!this.client.defaultHeaders?.has("Authorization")) { if (!this.client.defaultHeaders?.has('Authorization')) {
throw new Error("Authorization header not set."); throw new Error('Authorization header not set.')
}
} }
}
/** Returns a {@link RequestBuilder} for an HTTP GET request to the given path. */ /** Returns a {@link RequestBuilder} for an HTTP GET request to the given path. */
get<T = void>(path: string) { get<T = void>(path: string) {
return this.client.get<T>(`${config.ACTIVE_CONFIG.apiUrl}/${path}`); return this.client.get<T>(`${config.ACTIVE_CONFIG.apiUrl}/${path}`)
} }
/** Returns a {@link RequestBuilder} for an HTTP POST request to the given path. */ /** Returns a {@link RequestBuilder} for an HTTP POST request to the given path. */
post<T = void>(path: string, payload: object) { post<T = void>(path: string, payload: object) {
return this.client.post<T>( return this.client.post<T>(`${config.ACTIVE_CONFIG.apiUrl}/${path}`, payload)
`${config.ACTIVE_CONFIG.apiUrl}/${path}`, }
payload
);
}
/** Logs the error that occurred and throws a new one with a more user-friendly message. */ /** Logs the error that occurred and throws a new one with a more user-friendly message. */
errorHandler(message: string) { errorHandler(message: string) {
return (error: Error) => { return (error: Error) => {
this.logger.error(error.message); this.logger.error(error.message)
throw new Error(message); throw new Error(message)
}; }
} }
/** Sets the username of the current user, on the Cloud backend API. */ /** Sets the username of the current user, on the Cloud backend API. */
setUsername(body: SetUsernameRequestBody): Promise<Organization> { setUsername(body: SetUsernameRequestBody): Promise<Organization> {
return this.post<Organization>(SET_USER_NAME_PATH, body).then((response) => return this.post<Organization>(SET_USER_NAME_PATH, body).then(response => response.json())
response.json() }
);
}
/** Returns organization info for the current user, from the Cloud backend API. /** Returns organization info for the current user, from the Cloud backend API.
* *
* @returns `null` if status code 401 or 404 was received. */ * @returns `null` if status code 401 or 404 was received. */
getUser(): Promise<Organization | null> { getUser(): Promise<Organization | null> {
return this.get<Organization>(GET_USER_PATH).then((response) => { return this.get<Organization>(GET_USER_PATH).then(response => {
if ( if (
response.status === http.HttpStatus.unauthorized || response.status === http.HttpStatus.unauthorized ||
response.status === http.HttpStatus.notFound response.status === http.HttpStatus.notFound
) { ) {
return null; return null
} else { } else {
return response.json(); return response.json()
} }
}); })
} }
} }
// ===================== // =====================
@ -107,12 +102,9 @@ export class Backend {
* This is a hack to quickly create the backend in the format we want, until we get the provider * This is a hack to quickly create the backend in the format we want, until we get the provider
* working. This should be removed entirely in favour of creating the backend once and using it from * working. This should be removed entirely in favour of creating the backend once and using it from
* the context. */ * the context. */
export function createBackend( export function createBackend(accessToken: string, logger: loggerProvider.Logger): Backend {
accessToken: string, const headers = new Headers()
logger: loggerProvider.Logger headers.append('Authorization', `Bearer ${accessToken}`)
): Backend { const client = new http.Client(headers)
const headers = new Headers(); return new Backend(client, logger)
headers.append("Authorization", `Bearer ${accessToken}`);
const client = new http.Client(headers);
return new Backend(client, logger);
} }

74
app/ide-desktop/lib/dashboard/src/authentication/src/hooks.tsx
View File

@ -1,7 +1,7 @@
/** @file Module containing common custom React hooks used throughout out Dashboard. */ /** @file Module containing common custom React hooks used throughout out Dashboard. */
import * as react from "react"; import * as react from 'react'
import * as loggerProvider from "./providers/logger"; import * as loggerProvider from './providers/logger'
// ============ // ============
// === Bind === // === Bind ===
@ -21,8 +21,8 @@ import * as loggerProvider from "./providers/logger";
* <input {...bind} /> * <input {...bind} />
* ``` */ * ``` */
interface Bind { interface Bind {
value: string; value: string
onChange: (value: react.ChangeEvent<HTMLInputElement>) => void; onChange: (value: react.ChangeEvent<HTMLInputElement>) => void
} }
// ================ // ================
@ -37,12 +37,12 @@ interface Bind {
* use the `value` prop and the `onChange` event handler. However, this can be tedious to do for * use the `value` prop and the `onChange` event handler. However, this can be tedious to do for
* every input field, so we can use a custom hook to handle this for us. */ * every input field, so we can use a custom hook to handle this for us. */
export function useInput(initialValue: string): [string, Bind] { export function useInput(initialValue: string): [string, Bind] {
const [value, setValue] = react.useState(initialValue); const [value, setValue] = react.useState(initialValue)
const onChange = (event: react.ChangeEvent<HTMLInputElement>) => { const onChange = (event: react.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value); setValue(event.target.value)
}; }
const bind = { value, onChange }; const bind = { value, onChange }
return [value, bind]; return [value, bind]
} }
// ====================== // ======================
@ -65,37 +65,37 @@ export function useInput(initialValue: string): [string, Bind] {
* @param deps - The list of dependencies that, when updated, trigger the asynchronous fetch. * @param deps - The list of dependencies that, when updated, trigger the asynchronous fetch.
* @returns The current value of the state controlled by this hook. */ * @returns The current value of the state controlled by this hook. */
export function useAsyncEffect<T>( export function useAsyncEffect<T>(
initialValue: T, initialValue: T,
fetch: (signal: AbortSignal) => Promise<T>, fetch: (signal: AbortSignal) => Promise<T>,
deps?: react.DependencyList deps?: react.DependencyList
): T { ): T {
const logger = loggerProvider.useLogger(); const logger = loggerProvider.useLogger()
const [value, setValue] = react.useState<T>(initialValue); const [value, setValue] = react.useState<T>(initialValue)
react.useEffect(() => { react.useEffect(() => {
const controller = new AbortController(); const controller = new AbortController()
const { signal } = controller; const { signal } = controller
/** Declare the async data fetching function. */ /** Declare the async data fetching function. */
const load = async () => { const load = async () => {
const result = await fetch(signal); const result = await fetch(signal)
/** Set state with the result only if this effect has not been aborted. This prevents race /** Set state with the result only if this effect has not been aborted. This prevents race
* conditions by making it so that only the latest async fetch will update the state on * conditions by making it so that only the latest async fetch will update the state on
* completion. */ * completion. */
if (!signal.aborted) { if (!signal.aborted) {
setValue(result); setValue(result)
} }
}; }
load().catch((error) => { load().catch(error => {
logger.error("Error while fetching data", error); logger.error('Error while fetching data', error)
}); })
/** Cancel any future `setValue` calls. */ /** Cancel any future `setValue` calls. */
return () => { return () => {
controller.abort(); controller.abort()
}; }
}, deps); }, deps)
return value; return value
} }

171
app/ide-desktop/lib/dashboard/src/authentication/src/http.tsx
View File

@ -8,10 +8,10 @@
/** HTTP status codes returned in a HTTP response. */ /** HTTP status codes returned in a HTTP response. */
export enum HttpStatus { export enum HttpStatus {
// eslint-disable-next-line @typescript-eslint/no-magic-numbers // eslint-disable-next-line @typescript-eslint/no-magic-numbers
unauthorized = 401, unauthorized = 401,
// eslint-disable-next-line @typescript-eslint/no-magic-numbers // eslint-disable-next-line @typescript-eslint/no-magic-numbers
notFound = 404, notFound = 404,
} }
// ================== // ==================
@ -20,10 +20,10 @@ export enum HttpStatus {
/** HTTP method variants that can be used in an HTTP request. */ /** HTTP method variants that can be used in an HTTP request. */
enum HttpMethod { enum HttpMethod {
get = "GET", get = 'GET',
post = "POST", post = 'POST',
put = "PUT", put = 'PUT',
delete = "DELETE", delete = 'DELETE',
} }
// ============== // ==============
@ -32,95 +32,82 @@ enum HttpMethod {
/** A helper function to convert a `Blob` to a base64-encoded string. */ /** A helper function to convert a `Blob` to a base64-encoded string. */
function blobToBase64(blob: Blob) { function blobToBase64(blob: Blob) {
return new Promise<string>((resolve) => { return new Promise<string>(resolve => {
const reader = new FileReader(); const reader = new FileReader()
reader.onload = () => { reader.onload = () => {
resolve( resolve(
// This cast is always safe because we read as data URL (a string). // This cast is always safe because we read as data URL (a string).
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
(reader.result as string).replace( (reader.result as string).replace(/^data:application\/octet-stream;base64,/, '')
/^data:application\/octet-stream;base64,/, )
"" }
) reader.readAsDataURL(blob)
); })
};
reader.readAsDataURL(blob);
});
} }
/** An HTTP client that can be used to create and send HTTP requests asynchronously. */ /** An HTTP client that can be used to create and send HTTP requests asynchronously. */
export class Client { export class Client {
constructor( constructor(
/** A map of default headers that are included in every HTTP request sent by this client. /** A map of default headers that are included in every HTTP request sent by this client.
* *
* This is useful for setting headers that are required for every request, like authentication * This is useful for setting headers that are required for every request, like authentication
* tokens. */ * tokens. */
public defaultHeaders?: Headers public defaultHeaders?: Headers
) {} ) {}
/** Sends an HTTP GET request to the specified URL. */ /** Sends an HTTP GET request to the specified URL. */
get<T = void>(url: string) { get<T = void>(url: string) {
return this.request<T>(HttpMethod.get, url); return this.request<T>(HttpMethod.get, url)
}
/** Sends a JSON HTTP POST request to the specified URL. */
post<T = void>(url: string, payload: object) {
return this.request<T>(
HttpMethod.post,
url,
JSON.stringify(payload),
"application/json"
);
}
/** Sends a base64-encoded binary HTTP POST request to the specified URL. */
async postBase64<T = void>(url: string, payload: Blob) {
return await this.request<T>(
HttpMethod.post,
url,
await blobToBase64(payload),
"application/octet-stream"
);
}
/** Sends a JSON HTTP PUT request to the specified URL. */
put<T = void>(url: string, payload: object) {
return this.request<T>(
HttpMethod.put,
url,
JSON.stringify(payload),
"application/json"
);
}
/** Sends an HTTP DELETE request to the specified URL. */
delete<T = void>(url: string) {
return this.request<T>(HttpMethod.delete, url);
}
/** Executes an HTTP request to the specified URL, with the given HTTP method. */
private request<T = void>(
method: HttpMethod,
url: string,
payload?: string,
mimetype?: string
) {
const defaultHeaders = this.defaultHeaders ?? [];
const headers = new Headers(defaultHeaders);
if (payload) {
const contentType = mimetype ?? "application/json";
headers.set("Content-Type", contentType);
} }
interface ResponseWithTypedJson<U> extends Response {
json: () => Promise<U>; /** Sends a JSON HTTP POST request to the specified URL. */
post<T = void>(url: string, payload: object) {
return this.request<T>(HttpMethod.post, url, JSON.stringify(payload), 'application/json')
}
/** Sends a base64-encoded binary HTTP POST request to the specified URL. */
async postBase64<T = void>(url: string, payload: Blob) {
return await this.request<T>(
HttpMethod.post,
url,
await blobToBase64(payload),
'application/octet-stream'
)
}
/** Sends a JSON HTTP PUT request to the specified URL. */
put<T = void>(url: string, payload: object) {
return this.request<T>(HttpMethod.put, url, JSON.stringify(payload), 'application/json')
}
/** Sends an HTTP DELETE request to the specified URL. */
delete<T = void>(url: string) {
return this.request<T>(HttpMethod.delete, url)
}
/** Executes an HTTP request to the specified URL, with the given HTTP method. */
private request<T = void>(
method: HttpMethod,
url: string,
payload?: string,
mimetype?: string
) {
const defaultHeaders = this.defaultHeaders ?? []
const headers = new Headers(defaultHeaders)
if (payload) {
const contentType = mimetype ?? 'application/json'
headers.set('Content-Type', contentType)
}
interface ResponseWithTypedJson<U> extends Response {
json: () => Promise<U>
}
// This is an UNSAFE type assertion, however this is a HTTP client
// and should only be used to query APIs with known response types.
// eslint-disable-next-line no-restricted-syntax
return fetch(url, {
method,
headers,
...(payload ? { body: payload } : {}),
}) as Promise<ResponseWithTypedJson<T>>
} }
// This is an UNSAFE type assertion, however this is a HTTP client
// and should only be used to query APIs with known response types.
// eslint-disable-next-line no-restricted-syntax
return fetch(url, {
method,
headers,
...(payload ? { body: payload } : {}),
}) as Promise<ResponseWithTypedJson<T>>;
}
} }

42
app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx
View File

@ -10,19 +10,19 @@
// as per the above comment. // as per the above comment.
// @ts-expect-error See above comment for why this import is needed. // @ts-expect-error See above comment for why this import is needed.
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-restricted-syntax // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-restricted-syntax
import * as React from "react"; import * as React from 'react'
import * as reactDOM from "react-dom/client"; import * as reactDOM from 'react-dom/client'
import * as loggerProvider from "./providers/logger"; import * as loggerProvider from './providers/logger'
import * as platformModule from "./platform"; import * as platformModule from './platform'
import App, * as app from "./components/app"; import App, * as app from './components/app'
// ================= // =================
// === Constants === // === Constants ===
// ================= // =================
/** The `id` attribute of the root element that the app will be rendered into. */ /** The `id` attribute of the root element that the app will be rendered into. */
const ROOT_ELEMENT_ID = "dashboard"; const ROOT_ELEMENT_ID = 'dashboard'
// =========== // ===========
// === run === // === run ===
@ -36,23 +36,23 @@ const ROOT_ELEMENT_ID = "dashboard";
// This is not a React component even though it contains JSX. // This is not a React component even though it contains JSX.
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
export function run( export function run(
/** Logger to use for logging. */ /** Logger to use for logging. */
logger: loggerProvider.Logger, logger: loggerProvider.Logger,
platform: platformModule.Platform, platform: platformModule.Platform,
onAuthenticated: () => void onAuthenticated: () => void
) { ) {
logger.log("Starting authentication/dashboard UI."); logger.log('Starting authentication/dashboard UI.')
/** The root element that the authentication/dashboard app will be rendered into. */ /** The root element that the authentication/dashboard app will be rendered into. */
const root = document.getElementById(ROOT_ELEMENT_ID); const root = document.getElementById(ROOT_ELEMENT_ID)
if (root == null) { if (root == null) {
logger.error(`Could not find root element with ID '${ROOT_ELEMENT_ID}'.`); logger.error(`Could not find root element with ID '${ROOT_ELEMENT_ID}'.`)
} else { } else {
const props = { logger, platform, onAuthenticated }; const props = { logger, platform, onAuthenticated }
reactDOM.createRoot(root).render(<App {...props} />); reactDOM.createRoot(root).render(<App {...props} />)
} }
} }
export type AppProps = app.AppProps; export type AppProps = app.AppProps
// This export should be `PascalCase` because it is a re-export. // This export should be `PascalCase` because it is a re-export.
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
export const Platform = platformModule.Platform; export const Platform = platformModule.Platform

24
app/ide-desktop/lib/dashboard/src/authentication/src/providers/logger.tsx
View File

@ -1,6 +1,6 @@
/** @file Defines the React provider for the {@link Logger} interface, along with a hook to use the /** @file Defines the React provider for the {@link Logger} interface, along with a hook to use the
* provider via the shared React context. */ * provider via the shared React context. */
import * as react from "react"; import * as react from 'react'
// ============== // ==============
// === Logger === // === Logger ===
@ -11,10 +11,10 @@ import * as react from "react";
* In the browser, this is the `Console` interface. In Electron, this is the `Logger` interface * In the browser, this is the `Console` interface. In Electron, this is the `Logger` interface
* provided by the EnsoGL packager. */ * provided by the EnsoGL packager. */
export interface Logger { export interface Logger {
/** Logs a message to the console. */ /** Logs a message to the console. */
log: (message: unknown, ...optionalParams: unknown[]) => void; log: (message: unknown, ...optionalParams: unknown[]) => void
/** Logs an error message to the console. */ /** Logs an error message to the console. */
error: (message: unknown, ...optionalParams: unknown[]) => void; error: (message: unknown, ...optionalParams: unknown[]) => void
} }
// ===================== // =====================
@ -23,22 +23,20 @@ export interface Logger {
/** See {@link AuthContext} for safety details. */ /** See {@link AuthContext} for safety details. */
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
const LoggerContext = react.createContext<Logger>({} as Logger); const LoggerContext = react.createContext<Logger>({} as Logger)
// ====================== // ======================
// === LoggerProvider === // === LoggerProvider ===
// ====================== // ======================
interface LoggerProviderProps { interface LoggerProviderProps {
children: react.ReactNode; children: react.ReactNode
logger: Logger; logger: Logger
} }
export function LoggerProvider(props: LoggerProviderProps) { export function LoggerProvider(props: LoggerProviderProps) {
const { children, logger } = props; const { children, logger } = props
return ( return <LoggerContext.Provider value={logger}>{children}</LoggerContext.Provider>
<LoggerContext.Provider value={logger}>{children}</LoggerContext.Provider>
);
} }
// ================= // =================
@ -46,5 +44,5 @@ export function LoggerProvider(props: LoggerProviderProps) {
// ================= // =================
export function useLogger() { export function useLogger() {
return react.useContext(LoggerContext); return react.useContext(LoggerContext)
} }

10
app/ide-desktop/lib/dashboard/src/index.tsx
View File

@ -1,15 +1,15 @@
/** @file Index file declaring main DOM structure for the app. */ /** @file Index file declaring main DOM structure for the app. */
import * as authentication from "enso-authentication"; import * as authentication from 'enso-authentication'
import * as platform from "./authentication/src/platform"; import * as platform from './authentication/src/platform'
const logger = console; const logger = console
/** This package is a standalone React app (i.e., IDE deployed to the Cloud), so we're not /** This package is a standalone React app (i.e., IDE deployed to the Cloud), so we're not
* running on the desktop. */ * running on the desktop. */
const PLATFORM = platform.Platform.cloud; const PLATFORM = platform.Platform.cloud
// The `onAuthenticated` parameter is required but we don't need it, so we pass an empty function. // The `onAuthenticated` parameter is required but we don't need it, so we pass an empty function.
// eslint-disable-next-line @typescript-eslint/no-empty-function // eslint-disable-next-line @typescript-eslint/no-empty-function
function onAuthenticated() {} function onAuthenticated() {}
authentication.run(logger, PLATFORM, onAuthenticated); authentication.run(logger, PLATFORM, onAuthenticated)