From 0476bc7e31229d8f14b4774ca88ffdbec51f3cf1 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Wed, 19 Jan 2022 23:58:19 +0000
Subject: [PATCH] Signup UI fixes, disable autocomplete

---
 webclient/src/Account.js     | 11 ++++++++++
 webclient/src/LoginSignup.js | 40 +++++++++++++++++++++++++++---------
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/webclient/src/Account.js b/webclient/src/Account.js
index a5b226f..ae2cd29 100644
--- a/webclient/src/Account.js
+++ b/webclient/src/Account.js
@@ -213,20 +213,28 @@ export function AccountForm(props) {
 		<Form onSubmit={handleSubmit}>
 			<Header size='medium'>Member Details</Header>
 
+			<div className='field'>
+				<label>Username</label>
+				<p>{user.username}</p>
+			</div>
+
 			<Form.Input
 				label='Preferred First Name'
+				autoComplete='off'
 				required
 				{...makeProps('preferred_name')}
 			/>
 
 			<Form.Input
 				label='Email Address'
+				autoComplete='off'
 				required
 				{...makeProps('email')}
 			/>
 
 			<Form.Input
 				label='Phone Number (999) 555-1234'
+				autoComplete='off'
 				required
 				{...makeProps('phone')}
 			/>
@@ -252,15 +260,18 @@ export function AccountForm(props) {
 
 			<Form.Input
 				label='Emergency Contact Name'
+				autoComplete='off'
 				{...makeProps('emergency_contact_name')}
 			/>
 			<Form.Input
 				label='Emergency Contact Phone'
+				autoComplete='off'
 				{...makeProps('emergency_contact_phone')}
 			/>
 
 			{member.discourse_username && <Form.Input
 				label='Discourse Username'
+				autoComplete='off'
 				{...makeProps('discourse_username')}
 			/>}
 
diff --git a/webclient/src/LoginSignup.js b/webclient/src/LoginSignup.js
index bb69606..ca631bb 100644
--- a/webclient/src/LoginSignup.js
+++ b/webclient/src/LoginSignup.js
@@ -73,6 +73,7 @@ export function SignupForm(props) {
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
+	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
 	const genUsername = () => {
 		if (input.first_name && input.last_name) {
@@ -130,30 +131,26 @@ export function SignupForm(props) {
 				<>
 					<Form.Group widths='equal'>
 						<Form.Input
-							label='First Name'
+							label='Legal First Name'
 							name='first_name'
+							autoComplete='off'
 							fluid
 							onChange={handleChange}
 							error={error.first_name}
 						/>
 						<Form.Input
-							label='Last Name'
+							label='Legal Last Name'
 							name='last_name'
+							autoComplete='off'
 							fluid
 							onChange={handleChange}
 							error={error.last_name}
 						/>
 					</Form.Group>
 
-					<Form.Input
-						label='Username'
-						name='username'
-						value={genUsername()}
-						error={error.username}
-						readOnly
-					/>
 					<Form.Input
 						label='Email'
+						autoComplete='off'
 						name='email'
 						onChange={handleChange}
 						error={error.email}
@@ -183,8 +180,16 @@ export function SignupForm(props) {
 						<p>Please do a <Link to='/password/reset'>password reset</Link> instead.</p>
 					</Message>}
 
+					{!!genUsername() &&
+						<div className='field'>
+							<label>Username</label>
+							<p style={{background: 'yellow'}}>{genUsername()}</p>
+						</div>
+					}
+
 					<Form.Input
 						label='Password'
+						autoComplete='new-password'
 						name='password1'
 						type='password'
 						onChange={handleChange}
@@ -192,17 +197,32 @@ export function SignupForm(props) {
 					/>
 					<Form.Input
 						label='Confirm Password'
+						autoComplete='new-password'
 						name='password2'
 						type='password'
 						onChange={handleChange}
 						error={error.password2}
 					/>
 
+					<div className='field'>
+						<label>Please note that payment of your first dues is required with this application</label>
+						<Form.Checkbox
+							label='I am ready to pay'
+							name='ready_to_pay'
+							onChange={handleCheck}
+							checked={input.ready_to_pay}
+						/>
+					</div>
+
 					<p>
 						{progress.map(x => <>{x}<br /></>)}
 					</p>
 
-					<Form.Button loading={loading} error={error.non_field_errors} disabled={input.existing_member !== false}>
+					<Form.Button
+						loading={loading}
+						error={error.non_field_errors}
+						disabled={input.existing_member !== false || !input.ready_to_pay}
+					>
 						Sign Up
 					</Form.Button>
 				</>