Collect preferred name on sign up and use it

webclient/src/Account.js

@@ -212,7 +212,7 @@ export function AccountForm(props) {
 			<Header size='medium'>Member Details</Header>
 
 			<div className='field'>
-				<label>Username</label>
+				<label>Spaceport Username</label>
 				<p>{user.username}</p>
 			</div>
 

webclient/src/Admin.js

@@ -42,7 +42,7 @@ export function AdminVet(props) {
 			onClick={handleVet}
 			loading={loading}
 		>
-			{yousure ? 'You Sure?' : 'Vet ' + member.first_name}
+			{yousure ? 'You Sure?' : 'Vet ' + member.preferred_name}
 		</Button>
 	);
 }
@@ -87,7 +87,7 @@ export function AdminVetting(props) {
 							<Table.Body>
 								{(displayAll ? vetting : vetting.slice(0,5)).map(x =>
 									<Table.Row key={x.id}>
-										<Table.Cell><Link to={'/members/'+x.id}>{x.first_name} {x.last_name}</Link></Table.Cell>
+										<Table.Cell><Link to={'/members/'+x.id}>{x.preferred_name} {x.last_name}</Link></Table.Cell>
 										<Table.Cell><a href={'mailto:'+x.email}>Email</a></Table.Cell>
 										<Table.Cell>
 											<Icon name='circle' color={statusColor[x.status]} />

webclient/src/AdminMembers.js

@@ -527,10 +527,6 @@ export function AdminMemberInfo(props) {
 
 			<BasicTable>
 				<Table.Body>
-					<Table.Row>
-						<Table.Cell>Name:</Table.Cell>
-						<Table.Cell>{member.first_name} {member.last_name}</Table.Cell>
-					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Status:</Table.Cell>
 						<Table.Cell>

webclient/src/LoginSignup.js

@@ -75,14 +75,14 @@ export function SignupForm(props) {
 	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
 	const genUsername = () => {
-		if (input.first_name && input.last_name) {
-			let first_name = input.first_name.trim().toLowerCase();
+		if (input.preferred_name && input.last_name) {
+			let preferred_name = input.preferred_name.trim().toLowerCase();
 			let last_name = input.last_name.trim().toLowerCase();
-			first_name = first_name.replace(/[^a-z- ]+/g, '');
+			preferred_name = preferred_name.replace(/[^a-z- ]+/g, '');
 			last_name = last_name.replace(/[^a-z- ]+/g, '');
-			first_name = first_name.replace(/[ -]/g, '.');
+			preferred_name = preferred_name.replace(/[ -]/g, '.');
 			last_name = last_name.replace(/[ -]/g, '.');
-			return first_name + '.' + last_name;
+			return preferred_name + '.' + last_name;
 		} else {
 			return '';
 		}
@@ -147,6 +147,18 @@ export function SignupForm(props) {
 						/>
 					</Form.Group>
 
+					<Form.Group widths='equal'>
+						<Form.Input
+							label='Preferred First Name'
+							name='preferred_name'
+							autoComplete='off'
+							fluid
+							onChange={handleChange}
+							error={error.preferred_name}
+						/>
+						<Form.Field/>
+					</Form.Group>
+
 					<Form.Input
 						label='Email'
 						autoComplete='off'
@@ -181,7 +193,7 @@ export function SignupForm(props) {
 
 					{!!genUsername() &&
 						<Form.Input
-							label='Username'
+							label='Spaceport Username'
 							name='username'
 							value={genUsername()}
 							error={error.username}