Skip to content

Commit 2344495

Browse files
mikey-tmikey-t
committed
More refactoring of auth components.
Renamed "register" terminology to "sign up" everywhere for consistency.
1 parent b10f1db commit 2344495

19 files changed

+79
-69
lines changed

‎client/src/SiteSettings.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const SiteSettings = {
2-
ENABLE_SOCIAL_LOGINS: false,
2+
ENABLE_EXTERNAL_LOGINS: false,
33
MICROSOFT_CLIENT_ID: "7fdb3b65-2c02-41f5-9e0b-0140eaa31651",
44
GOOGLE_CLIENT_ID: "101730043460-2etv7jn5225b36ni0b5k9hnb1e606l7v.apps.googleusercontent.com",
55
ENABLE_ALPHA_LOGIN_DISCLAIMER: true

‎client/src/auth/components/AlphaLoginDisclaimer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function AlphaLoginDisclaimer() {
99
}
1010
return (
1111
<Box>
12-
<Alert severity="info"><Typography variant="body2" align="center">This site is in Alpha. You may not register or login unless you have received an invite.</Typography></Alert>
12+
<Alert severity="info"><Typography variant="body2" align="center">This site is in Alpha. You may not sign up or login unless you have received an invite.</Typography></Alert>
1313
</Box>
1414
)
1515
}

‎client/src/auth/components/AlreadyHaveAnAccount.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography/Typography'
33

44
export default function AlreadyHaveAnAccount() {
55
return (
6-
<Typography>
6+
<Typography sx={{ textAlign: 'center' }}>
77
Already have an account? <Link href="/login" component={Link}>Sign In</Link>
88
</Typography>
99
)

‎client/src/auth/pages/Login.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function Login() {
2525
const [email, setEmail] = useState<string>('')
2626
const [password, setPassword] = useState<string>('')
2727
const [hasError, setHasError] = useState<boolean>(false)
28-
const [socialLoginError, setSocialLoginError] = useState<string>('')
28+
const [externalLoginError, setExternalLoginError] = useState<string>('')
2929
const [loading, setLoading] = useState<boolean>(false)
3030
const [whitelistError, setWhitelistError] = useState<boolean>(false)
3131

@@ -64,7 +64,7 @@ export default function Login() {
6464
<Grid container sx={{ marginTop: 2, display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
6565
<AlphaLoginDisclaimer />
6666
<AuthPageTitle>Sign In</AuthPageTitle>
67-
{SiteSettings.ENABLE_SOCIAL_LOGINS && <Grid item xs={12}>
67+
{SiteSettings.ENABLE_EXTERNAL_LOGINS && <Grid item xs={12}>
6868
<Box>
6969
<GoogleLoginButton
7070
onSuccess={(user) => {
@@ -74,22 +74,22 @@ export default function Login() {
7474
}}
7575
onLoginFailure={(error) => {
7676
console.error('error processing google login response', error)
77-
setSocialLoginError('An unexpected error occurred attempting to login with google')
77+
setExternalLoginError('An unexpected error occurred attempting to login with google')
7878
}}
7979
onInitFailure={(error) => {
8080
console.error('error initializing google login button', error)
8181
}}
8282
/>
83-
{socialLoginError && <Alert severity="error">{socialLoginError}</Alert>}
83+
{externalLoginError && <Alert severity="error">{externalLoginError}</Alert>}
8484
</Box>
8585
</Grid>}
86-
{SiteSettings.ENABLE_SOCIAL_LOGINS && <Grid item xs={12}>
86+
{SiteSettings.ENABLE_EXTERNAL_LOGINS && <Grid item xs={12}>
8787
<MicrosoftLoginButton
8888
onWhitelistFailure={() => {
8989
setWhitelistError(true)
9090
}}
9191
onFailure={() => {
92-
setSocialLoginError('An unexpected error occurred attempting to login with microsoft')
92+
setExternalLoginError('An unexpected error occurred attempting to login with microsoft')
9393
}}
9494
onSuccess={(user) => {
9595
auth.login(user, () => {
@@ -98,9 +98,8 @@ export default function Login() {
9898
}}
9999
/>
100100
</Grid>}
101-
{SiteSettings.ENABLE_SOCIAL_LOGINS && <Grid item xs={12}>
102-
<Typography variant="h5" gutterBottom={true} sx={{ mt: 2 }}>OR
103-
</Typography>
101+
{SiteSettings.ENABLE_EXTERNAL_LOGINS && <Grid item xs={12}>
102+
<Typography variant="h5" gutterBottom={true} sx={{ mt: 2 }}>OR</Typography>
104103
</Grid>}
105104
<Grid item xs={12} sm={4}>
106105
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ maxWidth: '400px' }}>
@@ -148,7 +147,7 @@ export default function Login() {
148147
{whitelistError && <Alert severity="error" sx={{ mt: '1rem' }}>Your account has not received an invite</Alert>}
149148
</Grid>
150149
<Typography sx={{ pt: '1rem' }}>
151-
Don&apos;t have an account? <Link href="/sign-up">Sign up</Link>
150+
Don&apos;t have an account? <Link href="/sign-up-external">Sign up</Link>
152151
</Typography>
153152
</Grid>
154153
</>

‎client/src/auth/pages/RegisterWithEmail.tsx ‎client/src/auth/pages/SignUpEmail.tsx

+17-9
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import Alert from '@mui/material/Alert'
22
import Box from '@mui/material/Box'
3-
import Button from '@mui/material/Button'
43
import Grid from '@mui/material/Grid/Grid'
54
import Link from '@mui/material/Link/Link'
65
import TextField from '@mui/material/TextField/TextField'
76
import React, { useState } from 'react'
87
import { useNavigate } from 'react-router-dom'
8+
import Button1 from '../../components/Button1'
9+
import AccountApi from '../../logic/AccountApi'
910
import AlphaLoginDisclaimer from '../components/AlphaLoginDisclaimer'
1011
import AlreadyHaveAnAccount from '../components/AlreadyHaveAnAccount'
1112
import AuthPageTitle from '../components/AuthPageTitle'
1213
import LegalDisclaimer from '../components/LegalDisclaimer'
13-
import AccountApi from '../../logic/AccountApi'
14+
import Typography from '@mui/material/Typography/Typography'
15+
import { SiteSettings } from '../../SiteSettings'
1416

1517
const api = new AccountApi()
1618

17-
export default function RegisterWithEmail() {
19+
export default function SignUpEmail() {
1820
const formWidth = '400px'
1921

2022
const [firstName, setFirstName] = useState<string>('')
@@ -28,12 +30,15 @@ export default function RegisterWithEmail() {
2830
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
2931
event.preventDefault()
3032
setMessage('')
31-
const res = await api.register(firstName, lastName, email, password)
33+
const res = await api.signUp(firstName, lastName, email, password)
3234
if (res.isError()) {
35+
if (res.statusCode === 400) {
36+
setMessage('an unexpected error occurred')
37+
}
3338
setMessage('an unexpected error occurred')
3439
return
3540
}
36-
navigate('/register-next')
41+
navigate('/sign-up-next')
3742
}
3843

3944
return (
@@ -94,15 +99,18 @@ export default function RegisterWithEmail() {
9499
/>
95100
</Grid>
96101
</Grid>
97-
<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
102+
<Button1 type="submit" sx={{ mt: 3, mb: 2 }}>
98103
Sign Up
99-
</Button>
104+
</Button1>
100105
{message && <Box sx={{ pb: '1rem', maxWidth: formWidth }}>
101106
<Alert severity="error">{message}</Alert>
102107
</Box>}
103-
<Box display="flex" flexDirection="column" alignItems="center">
108+
{SiteSettings.ENABLE_EXTERNAL_LOGINS && <Box sx={{ textAlign: 'center' }}>
109+
Or, go back to <Link href="/sign-up-external">external account registration</Link>
110+
</Box>}
111+
<Box sx={{ textAlign: 'center' }}>
104112
<AlreadyHaveAnAccount />
105-
<Link href="/register-resend-email">Resend verification email</Link>
113+
<Link href="/sign-up-resend-email">Resend verification email</Link>
106114
</Box>
107115
</Box>
108116
</Box>

‎client/src/auth/pages/SignUp.tsx ‎client/src/auth/pages/SignUpExternal.tsx

+15-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box'
33
import Grid from '@mui/material/Grid'
44
import Typography from '@mui/material/Typography'
55
import { useState } from 'react'
6-
import { useLocation, useNavigate } from 'react-router-dom'
6+
import { Navigate, useLocation, useNavigate } from 'react-router-dom'
77
import { SiteSettings } from '../../SiteSettings'
88
import AlphaLoginDisclaimer from '../components/AlphaLoginDisclaimer'
99
import AlreadyHaveAnAccount from '../components/AlreadyHaveAnAccount'
@@ -14,11 +14,15 @@ import LegalDisclaimer from '../components/LegalDisclaimer'
1414
import LinkButton from '../components/LinkButton'
1515
import MicrosoftLoginButton from '../components/MicrosoftLoginButton'
1616

17-
export default function SignUp() {
17+
export default function SignUpExternal() {
18+
if (!SiteSettings.ENABLE_EXTERNAL_LOGINS) {
19+
return <Navigate to="/sign-up-email" replace={true} />
20+
}
21+
1822
const auth = useAuth()
1923
const navigate = useNavigate()
2024
const { state } = useLocation()
21-
const [socialLoginError, setSocialLoginError] = useState<string>('')
25+
const [externalLoginError, setExternalLoginError] = useState<string>('')
2226
const [whitelistError, setWhitelistError] = useState<boolean>(false)
2327

2428
const fromUrl = state?.from?.pathname || '/'
@@ -28,7 +32,7 @@ export default function SignUp() {
2832
<AlphaLoginDisclaimer />
2933
<AuthPageTitle>Sign Up</AuthPageTitle>
3034
<LegalDisclaimer />
31-
{SiteSettings.ENABLE_SOCIAL_LOGINS && <Grid item xs={12}>
35+
{SiteSettings.ENABLE_EXTERNAL_LOGINS && <Grid item xs={12}>
3236
<GoogleLoginButton
3337
onSuccess={(user) => {
3438
auth.login(user, () => {
@@ -37,21 +41,21 @@ export default function SignUp() {
3741
}}
3842
onLoginFailure={(error) => {
3943
console.error('error processing google login response', error)
40-
setSocialLoginError('An unexpected error occurred attempting to login with google')
44+
setExternalLoginError('An unexpected error occurred attempting to login with google')
4145
}}
4246
onInitFailure={(error) => {
4347
console.error('error initializing google login button', error)
4448
}}
4549
/>
46-
{socialLoginError && <Alert severity="error">{socialLoginError}</Alert>}
50+
{externalLoginError && <Alert severity="error">{externalLoginError}</Alert>}
4751
</Grid>}
48-
{SiteSettings.ENABLE_SOCIAL_LOGINS && <Grid item xs={12}>
52+
{SiteSettings.ENABLE_EXTERNAL_LOGINS && <Grid item xs={12}>
4953
<MicrosoftLoginButton
5054
onWhitelistFailure={() => {
5155
setWhitelistError(true)
5256
}}
5357
onFailure={() => {
54-
setSocialLoginError('An unexpected error occurred attempting to login with microsoft')
58+
setExternalLoginError('An unexpected error occurred attempting to login with microsoft')
5559
}}
5660
onSuccess={(user) => {
5761
auth.login(user, () => {
@@ -63,13 +67,12 @@ export default function SignUp() {
6367
<Grid item xs={12}>
6468
{whitelistError && <Alert severity="error" sx={{ mb: '2rem' }}>Your account has not received an invite</Alert>}
6569
</Grid>
66-
{SiteSettings.ENABLE_SOCIAL_LOGINS && <Grid item xs={12}>
67-
<Typography variant="h5" gutterBottom={true} sx={{ mt: 2 }}>OR
68-
</Typography>
70+
{SiteSettings.ENABLE_EXTERNAL_LOGINS && <Grid item xs={12}>
71+
<Typography variant="h5" component="p" sx={{ mt: 2 }}>OR</Typography>
6972
</Grid>}
7073
<Grid item xs={12}>
7174
<Box sx={{ maxWidth: '245px', mb: 2 }}>
72-
<LinkButton to="/register">Register with Email</LinkButton>
75+
<LinkButton to="/sign-up-email">Sign Up with Email</LinkButton>
7376
</Box>
7477
<AlreadyHaveAnAccount />
7578
</Grid>

‎client/src/auth/pages/RegisterNext.tsx ‎client/src/auth/pages/SignUpNext.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Container from '@mui/material/Container/Container'
22
import Link from '@mui/material/Link/Link'
33
import AuthPageTitle from '../components/AuthPageTitle'
44

5-
export default function RegisterNext() {
5+
export default function SignUpNext() {
66
return (
77
<Container maxWidth="sm">
88
<AuthPageTitle>Sign Up - Next Steps</AuthPageTitle>
@@ -13,7 +13,7 @@ export default function RegisterNext() {
1313
</p>
1414
<p>
1515
Be sure to check your spam folder if you do not see the email in your inbox within a few minutes.
16-
If you do not receive an email within one hour, please <Link href="/register-resend-email">click here</Link>.
16+
If you do not receive an email within one hour, please <Link href="/sign-up-resend-email">click here</Link>.
1717
</p>
1818
</Container>
1919
)

‎client/src/auth/pages/RegisterResendEmail.tsx ‎client/src/auth/pages/SignUpResendEmail.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Link from '@mui/material/Link/Link'
1111

1212
const api = new AccountApi()
1313

14-
export default function RegisterResendEmail() {
14+
export default function SignUpResendEmail() {
1515
const [email, setEmail] = useState<string>('')
1616
const [message, setMessage] = useState<string>('')
1717
const [errorMessage, setErrorMessage] = useState<string>('')

‎client/src/logic/AccountApi.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default class AccountApi extends ApiBase {
2626
return await this.post<User>('account/login-microsoft', { code })
2727
}
2828

29-
async register(firstName: string, lastName: string, email: string, password: string): Promise<ApiResponse<unknown>> {
30-
return await this.post<string>('account/register', {
29+
async signUp(firstName: string, lastName: string, email: string, password: string): Promise<ApiResponse<unknown>> {
30+
return await this.post<string>('account/sign-up', {
3131
firstName: firstName,
3232
lastName: lastName,
3333
email: email,

‎client/src/logic/ApiBase.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default class ApiBase {
9494
try {
9595
statusCode = axiosError?.response?.status || 500
9696
} catch (err) {
97-
console.error('error parsing axios error code, using 500', err)
97+
console.error('error parsing axios error code - using 500', err)
9898
statusCode = 500
9999
}
100100
return statusCode

‎client/src/router.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ import Logout from './auth/pages/Logout'
1313
import Account from './pages/protected/Account'
1414
import RequireAuth from './auth/components/RequireAuth'
1515
import RequireNotAuth from './auth/components/RequireNotAuth'
16-
import SignUp from './auth/pages/SignUp'
17-
import RegisterWithEmail from './auth/pages/RegisterWithEmail'
16+
import SignUpExternal from './auth/pages/SignUpExternal'
17+
import SignUpEmail from './auth/pages/SignUpEmail'
1818
import VerifyEmail from './auth/pages/VerifyEmail'
19-
import RegisterNext from './auth/pages/RegisterNext'
20-
import RegisterResendEmail from './auth/pages/RegisterResendEmail'
19+
import SignUpNext from './auth/pages/SignUpNext'
20+
import SignUpResendEmail from './auth/pages/SignUpResendEmail'
2121
import AdminHome from './pages/admin/AdminHome'
2222
import Users from './pages/admin/Users'
2323
import Whitelist from './pages/admin/Whitelist'
@@ -65,24 +65,24 @@ const routes: RouteObject[] = [
6565
element: <RequireNotAuth><Login /></RequireNotAuth>
6666
},
6767
{
68-
path: 'sign-up',
69-
element: <RequireNotAuth><SignUp /></RequireNotAuth>
68+
path: 'sign-up-external',
69+
element: <RequireNotAuth><SignUpExternal /></RequireNotAuth>
7070
},
7171
{
72-
path: 'register',
73-
element: <RequireNotAuth><RegisterWithEmail /></RequireNotAuth>
72+
path: 'sign-up-email',
73+
element: <RequireNotAuth><SignUpEmail /></RequireNotAuth>
7474
},
7575
{
7676
path: 'verify-email',
7777
element: <RequireNotAuth><VerifyEmail /></RequireNotAuth>
7878
},
7979
{
80-
path: 'register-next',
81-
element: <RequireNotAuth><RegisterNext /></RequireNotAuth>
80+
path: 'sign-up-next',
81+
element: <RequireNotAuth><SignUpNext /></RequireNotAuth>
8282
},
8383
{
84-
path: 'register-resend-email',
85-
element: <RequireNotAuth><RegisterResendEmail /></RequireNotAuth>
84+
path: 'sign-up-resend-email',
85+
element: <RequireNotAuth><SignUpResendEmail /></RequireNotAuth>
8686
},
8787
{
8888
path: 'logout',

‎docs/DotnetReactSandbox.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ This is a combination of a playground for trying new ideas as well as a referenc
2020
- Cross platform development*
2121
- Lightning fast startup and full hot reload for local development for both server and client
2222
- Postgres database running in Docker with fully automated management via swig tasks
23-
- Local trusted https support* (especially important when working on social login functionality locally)
23+
- Local trusted https support* (especially important when working on external login functionality locally)
2424
- Role based user authentication/authorization
2525
- Segregated test database, perfect for running potentially destructive unit tests that access the database - without disturbing your local application data
2626
- Manage primary and test databases on a dev machine simultaneously with simply centralized shell commands
@@ -32,7 +32,7 @@ This is a combination of a playground for trying new ideas as well as a referenc
3232
- React router
3333
- Dark mode
3434
- Login and registration components/pages
35-
- Social logins functionality (Microsoft, Google)
35+
- External login functionality (Microsoft, Google)
3636
- Email registration (WIP)
3737
- Basic routing setup
3838
- Basic admin site template with auth-aware routing
@@ -184,7 +184,7 @@ Verify your new project setup:
184184
- Login with your super admin user - use the credentials you set in your `.env` (defaults to `admin@test.com`/`Abc1234!`)
185185
- Setup a connection to your locally running database with PgAdmin or a VSCode extension by using `localhost` as the host and credentials from `DB_ROOT_USER` and `DB_ROOT_PASSWORD` from your `.env`
186186

187-
Note that social logins (login with google and microsoft), google analytics and user registration using AWS SES won't work without additional setup. For setting up social logins, see [./SocialLogins.md](./SocialLogins.md).
187+
Note that external logins (login with google and microsoft), google analytics and user registration using AWS SES won't work without additional setup. For setting up external logins, see [./ExternalLogins.md](./ExternalLogins.md).
188188

189189
## Remove Project
190190

@@ -381,7 +381,7 @@ Access swagger UI at https://localhost:5001/api or the json at https://localhost
381381

382382
## Other Docs
383383

384-
Social login documentation: [Social Logins documentation](./SocialLogins.md)
384+
External login documentation: [External Login documentation](./ExternalLogins.md)
385385

386386
## Local Postgres Upgrade Process
387387

0 commit comments

Comments
 (0)