diff --git a/components/Alert.tsx b/components/Alert.tsx index f75705c..824831a 100644 --- a/components/Alert.tsx +++ b/components/Alert.tsx @@ -1,4 +1,3 @@ -import React from 'react' import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid' type AlertProps = { @@ -6,27 +5,25 @@ type AlertProps = { message: string | null } -export default class Alert extends React.Component { - override render() { - const icon = this.props.success ? ( - - ) : ( - - ) +export default function Alert({ success, message }: AlertProps) { + const icon = success ? ( + + ) : ( + + ) - const color = this.props.success ? 'green' : 'red' + const color = success ? 'green' : 'red' - return ( -
-
-
-
{icon}
-
-

{this.props.message}

-
+ return ( +
+
+
+
{icon}
+
+

{message}

- ) - } +
+ ) } diff --git a/components/LoginWithEmail.tsx b/components/LoginWithEmail.tsx index f535c44..8a3d194 100644 --- a/components/LoginWithEmail.tsx +++ b/components/LoginWithEmail.tsx @@ -1,4 +1,3 @@ -import React from 'react' import Link from 'next/link' import { EnvelopeIcon } from '@heroicons/react/24/solid' import Alert from './Alert' @@ -9,58 +8,56 @@ type LoginWithEmailProps = { message: string | null } -export default class LoginWithEmail extends React.Component { - override render() { - return ( -
-
- SuperApp -

- Log in to Super App -

-
+export default function LoginWithEmail({ onSubmit, success, message }: LoginWithEmailProps) { + return ( +
+
+ SuperApp +

+ Log in to Super App +

+
-
-
- +
+
+ -
-
- -
- -
+ +
+ +
+
+
-
- -
- -
-

- Or{' '} - - continue with SAML SSO - -

+
+ +
+
+

+ Or{' '} + + continue with SAML SSO + +

- ) - } +
+ ) } diff --git a/components/LoginWithSSO.tsx b/components/LoginWithSSO.tsx index ba7e553..297185e 100644 --- a/components/LoginWithSSO.tsx +++ b/components/LoginWithSSO.tsx @@ -1,4 +1,3 @@ -import React from 'react' import Link from 'next/link' import { LockClosedIcon } from '@heroicons/react/24/solid' import Alert from './Alert' @@ -9,57 +8,55 @@ type LoginWithSSOProps = { message: string | null } -export default class LoginWithSSO extends React.Component { - override render() { - return ( -
-
- SuperApp -

- Log in with SSO to Super App -

-
+export default function LoginWithSSO({ onSubmit, success, message }: LoginWithSSOProps) { + return ( +
+
+ SuperApp +

+ Log in with SSO to Super App +

+
-
-
- +
+
+ -
-
- -
- -
+ +
+ +
+
+
-
- -
- -
-

- Or{' '} - - continue with Magic Link - -

+
+ +
+
+

+ Or{' '} + + continue with Magic Link + +

- ) - } +
+ ) } diff --git a/pages/app/index.tsx b/pages/app/index.tsx index 8743fd3..eb0d95a 100644 --- a/pages/app/index.tsx +++ b/pages/app/index.tsx @@ -1,21 +1,18 @@ -import React from 'react' import Head from 'next/head' import Home from '../../components/Home' import Layout from '../../components/Layout' -export default class extends React.Component { - override render() { - return ( -
- - Super App | Home - - +export default function HomePage() { + return ( +
+ + Super App | Home + + - - - -
- ) - } + + + +
+ ) } diff --git a/pages/app/login.tsx b/pages/app/login.tsx index d1b7213..6cd1db1 100644 --- a/pages/app/login.tsx +++ b/pages/app/login.tsx @@ -1,23 +1,12 @@ -import React from 'react' +import { useState } from 'react' import Head from 'next/head' import LoginWithEmail from '../../components/LoginWithEmail' -type State = { - success: boolean | null - message: string | null -} - -export default class extends React.Component<{}, State> { - constructor(props: {}) { - super(props) - - this.state = { - success: null, - message: null, - } - } +export default function LoginPage() { + const [success, setSuccess] = useState(null) + const [message, setMessage] = useState(null) - onSubmit = async (e: React.FormEvent) => { + const onSubmit = async (e: React.FormEvent) => { e.preventDefault() try { @@ -38,32 +27,22 @@ export default class extends React.Component<{}, State> { throw new Error(data.message) } - this.setState({ - success: true, - message: 'We just sent a magic link to your email.', - }) + setSuccess(true) + setMessage('We just sent a magic link to your email.') } catch (err) { - this.setState({ - success: false, - message: err instanceof Error ? err.message : String(err), - }) + setSuccess(false) + setMessage(err instanceof Error ? err.message : String(err)) } } - override render() { - return ( -
- - Super App | Log in with Email - - + return ( +
+ + Super App | Log in with Email + + - -
- ) - } + +
+ ) } diff --git a/pages/app/settings.tsx b/pages/app/settings.tsx index 1687e9c..a3670c3 100644 --- a/pages/app/settings.tsx +++ b/pages/app/settings.tsx @@ -1,26 +1,15 @@ -import React from 'react' +import { useState } from 'react' import Head from 'next/head' import Settings from '../../components/Settings' import Layout from '../../components/Layout' type Intent = 'sso' | 'dsync' | 'audit_logs' | 'domain_verification' -type State = { - success: boolean | null - message: string | null -} - -export default class extends React.Component<{}, State> { - constructor(props: {}) { - super(props) - - this.state = { - success: null, - message: null, - } - } +export default function SettingsPage() { + const [success, setSuccess] = useState(null) + const [message, setMessage] = useState(null) - onSubmit = async (intent: Intent, e: React.FormEvent) => { + const onSubmit = async (intent: Intent, e: React.FormEvent) => { e.preventDefault() try { @@ -42,29 +31,21 @@ export default class extends React.Component<{}, State> { window.location.href = data.link } catch (err) { - this.setState({ - success: false, - message: err instanceof Error ? err.message : String(err), - }) + setSuccess(false) + setMessage(err instanceof Error ? err.message : String(err)) } } - override render() { - return ( -
- - Super App | Admin Settings - - - - - - -
- ) - } + return ( +
+ + Super App | Admin Settings + + + + + + +
+ ) } diff --git a/pages/app/sso.tsx b/pages/app/sso.tsx index 7bb6747..7bd600b 100644 --- a/pages/app/sso.tsx +++ b/pages/app/sso.tsx @@ -1,23 +1,12 @@ -import React from 'react' +import { useState } from 'react' import Head from 'next/head' import LoginWithSSO from '../../components/LoginWithSSO' -type State = { - success: boolean | null - message: string | null -} - -export default class extends React.Component<{}, State> { - constructor(props: {}) { - super(props) +export default function SsoPage() { + const [success, setSuccess] = useState(null) + const [message, setMessage] = useState(null) - this.state = { - success: null, - message: null, - } - } - - onSubmit = async (e: React.FormEvent) => { + const onSubmit = async (e: React.FormEvent) => { e.preventDefault() try { @@ -39,27 +28,19 @@ export default class extends React.Component<{}, State> { window.location.href = data.authorizationURL } catch (err) { - this.setState({ - success: false, - message: err instanceof Error ? err.message : String(err), - }) + setSuccess(false) + setMessage(err instanceof Error ? err.message : String(err)) } } - override render() { - return ( -
- - Super App | Log in with SSO - - + return ( +
+ + Super App | Log in with SSO + + - -
- ) - } + +
+ ) } diff --git a/pages/index.tsx b/pages/index.tsx index 5260f56..b940e9b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,179 +1,172 @@ -import React from 'react' import Head from 'next/head' -export default class extends React.Component { - renderHero() { - return ( -
-
-

- Explore WorkOS -

-

- Interact and see how to make your app enterprise-ready. -

-
-
- ) - } +const renderHero = () => ( +
+
+

+ Explore WorkOS +

+

+ Interact and see how to make your app enterprise-ready. +

+
+
+) - renderSections() { - const sections = [ - { - title: 'Admin Portal', - description: - 'Admin Portal provides an out-of-the-box UI for IT admins to configure SSO and Directory Sync Connections.', - url: '/app/settings', - icon: ` +const renderSections = () => { + const sections = [ + { + title: 'Admin Portal', + description: + 'Admin Portal provides an out-of-the-box UI for IT admins to configure SSO and Directory Sync Connections.', + url: '/app/settings', + icon: ` `, - }, - { - title: 'Single Sign-On', - description: - 'SSO enables authentication via an organization’s Identity Provider (IdP), such as Google Workspace or Okta.', - url: '/app/sso', - icon: ``, - }, - { - title: 'Magic Link', - description: - 'Magic Link gives you the ability to build a secure passwordless authentication flow utilizing email.', - url: '/app/login', - icon: ``, - }, - ] - - return ( -
-
-
-

- Try it for yourself -

-

See how WorkOS APIs can work in practice.

-
- {sections.map((section) => ( - -
- - ))} -
-
-
-
- ) - } + }, + { + title: 'Single Sign-On', + description: + 'SSO enables authentication via an organization’s Identity Provider (IdP), such as Google Workspace or Okta.', + url: '/app/sso', + icon: ``, + }, + { + title: 'Magic Link', + description: + 'Magic Link gives you the ability to build a secure passwordless authentication flow utilizing email.', + url: '/app/login', + icon: ``, + }, + ] - renderCta() { - return ( -
-
-

- Ready to dive in? - Start your free trial today. -

-
- -
+ return ( +
+
+
+

+ Try it for yourself +

+

See how WorkOS APIs can work in practice.

+
+ {sections.map((section) => ( - Learn more +
-
+ ))}
- ) - } +
+ ) +} - renderFooter() { - const navigation = [ - { - name: 'Twitter', - href: 'https://twitter.com/workos', - icon: (props: React.SVGProps) => ( - - - - ), - }, - { - name: 'GitHub', - href: 'https://github.com/workos/workos-explore', - icon: (props: React.SVGProps) => ( - - - - ), - }, - ] +const renderCta = () => ( +
+
+

+ Ready to dive in? + Start your free trial today. +

+ +
+
+) - return ( -
-
-
- {navigation.map((item) => ( - - {item.name} - - ))} -
-
-

- © {new Date().getFullYear()} WorkOS, Inc. - {process.env.NEXT_PUBLIC_COMMIT_SHA && ( - <> - {' · '} - - {process.env.NEXT_PUBLIC_COMMIT_SHA.slice(0, 7)} - - - )} -

-
+const renderFooter = () => { + const navigation = [ + { + name: 'Twitter', + href: 'https://twitter.com/workos', + icon: (props: React.SVGProps) => ( + + + + ), + }, + { + name: 'GitHub', + href: 'https://github.com/workos/workos-explore', + icon: (props: React.SVGProps) => ( + + + + ), + }, + ] + + return ( + - ) - } +
+

+ © {new Date().getFullYear()} WorkOS, Inc. + {process.env.NEXT_PUBLIC_COMMIT_SHA && ( + <> + {' · '} + + {process.env.NEXT_PUBLIC_COMMIT_SHA.slice(0, 7)} + + + )} +

+
+
+
+ ) +} - override render() { - return ( -
- - Explore | WorkOS - - +export default function ExplorePage() { + return ( +
+ + Explore | WorkOS + + - {this.renderHero()} - {this.renderSections()} - {this.renderCta()} - {this.renderFooter()} -
- ) - } + {renderHero()} + {renderSections()} + {renderCta()} + {renderFooter()} +
+ ) }