Allow users to customize their Discourse username

webclient/src/Account.js

@@ -259,6 +259,11 @@ export function AccountForm(props) {
 				{...makeProps('emergency_contact_phone')}
 			/>
 
+			{member.discourse_username && <Form.Input
+				label='Discourse Username'
+				{...makeProps('discourse_username')}
+			/>}
+
 			<Form.Input
 				label='Member Photo'
 				name='photo'

webclient/src/AdminMembers.js

@@ -534,6 +534,11 @@ export function AdminMemberInfo(props) {
 						<Table.Cell>{member.user ? 'Yes' : 'No'}</Table.Cell>
 					</Table.Row>
 
+					<Table.Row>
+						<Table.Cell>Discourse Username:</Table.Cell>
+						<Table.Cell>{member.discourse_username || '?'}</Table.Cell>
+					</Table.Row>
+
 					<Table.Row>
 						<Table.Cell>Public Bio:</Table.Cell>
 					</Table.Row>

webclient/src/Auth.js

@@ -137,7 +137,7 @@ export function AuthDiscourse(props) {
 				<Header size='small'>Success!</Header>
 				<p>You can now log into the Discourse:</p>
 				<p>
-					Username: {user.username}<br/>
+					Username: {user.member.discourse_username || user.username}<br/>
 					Password: [this Spaceport password]
 				</p>
 				<p><a href='https://forum.protospace.ca' rel='noopener noreferrer'>Protospace Discourse</a></p>