Skip to content

Commit 928b243

Browse files
mythzmythz
committed
fix build
1 parent 8f4d452 commit 928b243

File tree

3 files changed

+121
-86
lines changed

3 files changed

+121
-86
lines changed

‎MyApp.Client/app/signin/page.tsx‎

Lines changed: 57 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import {serializeToObject} from "@servicestack/client"
4-
import {SyntheticEvent, useEffect, useState} from "react"
4+
import {SyntheticEvent, Suspense, useEffect, useState} from "react"
55
import {useRouter, useSearchParams} from "next/navigation"
66
import Link from "next/link"
77

@@ -11,7 +11,7 @@ import {Authenticate} from "@/lib/dtos"
1111
import {appAuth, Redirecting} from "@/lib/auth"
1212
import {getRedirect} from "@/lib/gateway"
1313

14-
export default function SignIn() {
14+
function SignInContent() {
1515

1616
const client = useClient()
1717
const [username, setUsername] = useState<string | number>()
@@ -42,52 +42,64 @@ export default function SignIn() {
4242
await revalidate()
4343
}
4444

45-
return (<Page title="Use a local account to log in.">
46-
<ApiStateContext.Provider value={client}>
47-
<section className="mt-4 max-w-xl sm:shadow overflow-hidden sm:rounded-md">
48-
<form onSubmit={onSubmit}>
49-
<div className="shadow overflow-hidden sm:rounded-md">
50-
<ErrorSummary except="userName,password,rememberMe"/>
51-
<div className="px-4 py-5 bg-white dark:bg-black space-y-6 sm:p-6">
52-
<div className="flex flex-col gap-y-4">
53-
<TextInput id="userName" help="Email you signed up with" autoComplete="email"
54-
value={username} onChange={setUsername}/>
55-
<TextInput id="password" type="password" help="6 characters or more"
56-
autoComplete="current-password"
57-
value={password} onChange={setPassword}/>
58-
</div>
45+
return (
46+
<>
47+
<ApiStateContext.Provider value={client}>
48+
<section className="mt-4 max-w-xl sm:shadow overflow-hidden sm:rounded-md">
49+
<form onSubmit={onSubmit}>
50+
<div className="shadow overflow-hidden sm:rounded-md">
51+
<ErrorSummary except="userName,password,rememberMe"/>
52+
<div className="px-4 py-5 bg-white dark:bg-black space-y-6 sm:p-6">
53+
<div className="flex flex-col gap-y-4">
54+
<TextInput id="userName" help="Email you signed up with" autoComplete="email"
55+
value={username} onChange={setUsername}/>
56+
<TextInput id="password" type="password" help="6 characters or more"
57+
autoComplete="current-password"
58+
value={password} onChange={setPassword}/>
59+
</div>
5960

60-
<div>
61-
<PrimaryButton>Log in</PrimaryButton>
62-
</div>
61+
<div>
62+
<PrimaryButton>Log in</PrimaryButton>
63+
</div>
6364

64-
<div className="mt-8 text-sm">
65-
<p className="mb-3">
66-
<Link className="font-semibold" href="/signup">Register as a new user</Link>
67-
</p>
65+
<div className="mt-8 text-sm">
66+
<p className="mb-3">
67+
<Link className="font-semibold" href="/signup">Register as a new user</Link>
68+
</p>
69+
</div>
6870
</div>
69-
</div>
7071

71-
</div>
72-
</form>
73-
</section>
74-
</ApiStateContext.Provider>
75-
<div className="mt-8">
76-
<h3 className="xs:block mr-4 leading-8 text-gray-500">Quick Links</h3>
77-
<div className="flex flex-wrap max-w-lg gap-2">
78-
<SecondaryButton onClick={() => setUser('[email protected]')}>
79-
[email protected]
80-
</SecondaryButton>
81-
<SecondaryButton onClick={() => setUser('[email protected]')}>
82-
[email protected]
83-
</SecondaryButton>
84-
<SecondaryButton onClick={() => setUser('[email protected]')}>
85-
[email protected]
86-
</SecondaryButton>
87-
<SecondaryButton onClick={() => setUser('[email protected]')}>
88-
[email protected]
89-
</SecondaryButton>
72+
</div>
73+
</form>
74+
</section>
75+
</ApiStateContext.Provider>
76+
<div className="mt-8">
77+
<h3 className="xs:block mr-4 leading-8 text-gray-500">Quick Links</h3>
78+
<div className="flex flex-wrap max-w-lg gap-2">
79+
<SecondaryButton onClick={() => setUser('[email protected]')}>
80+
[email protected]
81+
</SecondaryButton>
82+
<SecondaryButton onClick={() => setUser('[email protected]')}>
83+
[email protected]
84+
</SecondaryButton>
85+
<SecondaryButton onClick={() => setUser('[email protected]')}>
86+
[email protected]
87+
</SecondaryButton>
88+
<SecondaryButton onClick={() => setUser('[email protected]')}>
89+
[email protected]
90+
</SecondaryButton>
91+
</div>
9092
</div>
91-
</div>
92-
</Page>)
93+
</>
94+
)
95+
}
96+
97+
export default function SignIn() {
98+
return (
99+
<Page title="Use a local account to log in.">
100+
<Suspense fallback={<div>Loading...</div>}>
101+
<SignInContent />
102+
</Suspense>
103+
</Page>
104+
)
93105
}

‎MyApp.Client/app/signup-confirm/page.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22

33
import Page from "@/components/layout-page"
44
import { useSearchParams } from "next/navigation"
5+
import { Suspense } from "react"
56

6-
export default function SignUpConfirm() {
7+
function SignUpConfirmContent() {
78
const searchParams = useSearchParams()
89
const confirmLink = searchParams.get('confirmLink')
910

10-
return (<Page title="Signup confirmation">
11+
return (
1112
<div className="mt-8 mb-20">
1213
{!confirmLink ? null :
1314
<p className="my-4">
@@ -18,5 +19,15 @@ export default function SignUpConfirm() {
1819
</p>}
1920
<p className="my-4">Please check your email to confirm your account.</p>
2021
</div>
21-
</Page>)
22+
)
23+
}
24+
25+
export default function SignUpConfirm() {
26+
return (
27+
<Page title="Signup confirmation">
28+
<Suspense fallback={<div className="mt-8 mb-20">Loading...</div>}>
29+
<SignUpConfirmContent />
30+
</Suspense>
31+
</Page>
32+
)
2233
}

‎MyApp.Client/app/signup/page.tsx‎

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { SyntheticEvent, useEffect, useState } from "react"
3+
import { SyntheticEvent, Suspense, useEffect, useState } from "react"
44
import { useClient, FormLoading, ErrorSummary, TextInput, PrimaryButton, SecondaryButton, ApiStateContext } from "@servicestack/react"
55
import { serializeToObject, leftPart, rightPart, toPascalCase } from "@servicestack/client"
66
import {useRouter, useSearchParams} from "next/navigation"
@@ -9,7 +9,7 @@ import { getRedirect } from "@/lib/gateway"
99
import { Register, RegisterResponse } from "@/lib/dtos"
1010
import { appAuth, Redirecting } from "@/lib/auth"
1111

12-
export default function SignUp() {
12+
function SignUpContent() {
1313

1414
const client = useClient()
1515
const [displayName, setDisplayName] = useState<string>()
@@ -58,45 +58,57 @@ export default function SignUp() {
5858
}
5959
}
6060

61-
return (<Page title="Sign Up">
62-
<ApiStateContext.Provider value={client}>
63-
<section className="mt-4 max-w-xl sm:shadow overflow-hidden sm:rounded-md">
64-
<form onSubmit={onSubmit} className="max-w-prose">
65-
<div className="shadow overflow-hidden sm:rounded-md">
66-
<ErrorSummary except="displayName,userName,password,confirmPassword"/>
67-
<div className="px-4 py-5 bg-white dark:bg-black space-y-6 sm:p-6">
68-
<h3 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100 leading-tight">
69-
Create a new account.
70-
</h3>
71-
<div className="flex flex-col gap-y-4">
72-
<TextInput id="displayName" help="Your first and last name" autoComplete="name"
73-
value={displayName} onChange={setDisplayName}/>
74-
<TextInput id="userName" autoComplete="email"
75-
value={username} onChange={setUsername}/>
76-
<TextInput id="password" type="password" help="6 characters or more"
77-
autoComplete="new-password"
78-
value={password} onChange={setPassword}/>
79-
<TextInput id="confirmPassword" type="password" value={confirmPassword} onChange={setConfirmPassword}/>
61+
return (
62+
<>
63+
<ApiStateContext.Provider value={client}>
64+
<section className="mt-4 max-w-xl sm:shadow overflow-hidden sm:rounded-md">
65+
<form onSubmit={onSubmit} className="max-w-prose">
66+
<div className="shadow overflow-hidden sm:rounded-md">
67+
<ErrorSummary except="displayName,userName,password,confirmPassword"/>
68+
<div className="px-4 py-5 bg-white dark:bg-black space-y-6 sm:p-6">
69+
<h3 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100 leading-tight">
70+
Create a new account.
71+
</h3>
72+
<div className="flex flex-col gap-y-4">
73+
<TextInput id="displayName" help="Your first and last name" autoComplete="name"
74+
value={displayName} onChange={setDisplayName}/>
75+
<TextInput id="userName" autoComplete="email"
76+
value={username} onChange={setUsername}/>
77+
<TextInput id="password" type="password" help="6 characters or more"
78+
autoComplete="new-password"
79+
value={password} onChange={setPassword}/>
80+
<TextInput id="confirmPassword" type="password" value={confirmPassword} onChange={setConfirmPassword}/>
81+
</div>
8082
</div>
81-
</div>
82-
<div className="pt-5 px-4 py-3 bg-gray-50 dark:bg-gray-900 text-right sm:px-6">
83-
<div className="flex justify-end">
84-
{ client.loading ? <FormLoading className="flex-1"/> : null }
85-
<PrimaryButton className="ml-3">Sign Up</PrimaryButton>
83+
<div className="pt-5 px-4 py-3 bg-gray-50 dark:bg-gray-900 text-right sm:px-6">
84+
<div className="flex justify-end">
85+
{ client.loading ? <FormLoading className="flex-1"/> : null }
86+
<PrimaryButton className="ml-3">Sign Up</PrimaryButton>
87+
</div>
8688
</div>
8789
</div>
88-
</div>
89-
</form>
90-
</section>
91-
</ApiStateContext.Provider>
90+
</form>
91+
</section>
92+
</ApiStateContext.Provider>
9293

93-
<div className="flex mt-8 ml-8">
94-
<h3 className="mr-4 leading-8 text-gray-500 dark:text-gray-400">Quick Links</h3>
95-
<div className="flex flex-wrap max-w-lg gap-2">
96-
<SecondaryButton onClick={() => setUser('[email protected]')}>
97-
[email protected]
98-
</SecondaryButton>
94+
<div className="flex mt-8 ml-8">
95+
<h3 className="mr-4 leading-8 text-gray-500 dark:text-gray-400">Quick Links</h3>
96+
<div className="flex flex-wrap max-w-lg gap-2">
97+
<SecondaryButton onClick={() => setUser('[email protected]')}>
98+
[email protected]
99+
</SecondaryButton>
100+
</div>
99101
</div>
100-
</div>
101-
</Page>)
102+
</>
103+
)
104+
}
105+
106+
export default function SignUp() {
107+
return (
108+
<Page title="Sign Up">
109+
<Suspense fallback={<div>Loading...</div>}>
110+
<SignUpContent />
111+
</Suspense>
112+
</Page>
113+
)
102114
}

0 commit comments

Comments
 (0)