add email field for users

4 files changed, 25 insertions, 4 deletions

diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 2d1ee6a5..1c6d52e0 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -9,7 +9,8 @@
 	export let pageID;
 
 	let username = 'bob',
-		password = 'pw';
+		password = 'pw',
+		email = '[email protected]';
 
 	let revealPassword = false;
 
@@ -33,6 +34,20 @@
 			<h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1>
 
 			<form class="space-y-5" {action} method="POST">
+				{#if pageID === 'register'}
+					<div>
+						<label for="email" class="font-semibold">Email</label>
+						<!-- svelte-ignore a11y-autofocus -->
+						<input
+							name="email"
+							type="email"
+							required
+							class="bg-primary p-4 rounded-2xl w-full"
+							bind:value={email}
+							autofocus
+						/>
+					</div>
+				{/if}
 				<div>
 					<label for="username" class="font-semibold">{$t('login.username')}</label>
 					<!-- svelte-ignore a11y-autofocus -->
@@ -42,7 +57,7 @@
 						required
 						class="bg-primary p-4 rounded-2xl w-full"
 						bind:value={username}
-						autofocus
+						autofocus={pageID === 'signIn'}
 					/>
 				</div>
 
@@ -81,7 +96,7 @@
 				{:else}
 					<div class="flex justify-end items-center">
 						<a href="/forgot" class="underline underline-offset-4 text-black text-sm"
-							>{$t('login.forgotPassword')}</a
+							>{$t('login.forgotUserOrPassword')}</a
 						>
 					</div>
 				{/if}
diff --git a/src/lib/translations/translations.js b/src/lib/translations/translations.js
index 5066b818..d1288a75 100644
--- a/src/lib/translations/translations.js
+++ b/src/lib/translations/translations.js
@@ -120,7 +120,7 @@ export default {
 			password: 'Password',
 			passwordRecommendation:
 				'We recommend a long, random password generated with a password manager.',
-			forgotPassword: 'Forgot Password?',
+			forgotUserOrPassword: 'Forgot Username or Password?',
 			haveAccount: 'Already have an account?',
 			noAccount: "Don't have an account?",
 			register: 'Register',
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index c0e0a9a5..5a7e9be5 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -65,6 +65,11 @@
 			</div>
 
 			<div>
+				<label for="email" class="font-bold mb-1 block">Email</label>
+				<input type="email" disabled name="email" class="block border rounded-xl p-3 w-full" />
+			</div>
+
+			<div>
 				<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
 				<input
 					type="text"
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index e7341806..efb65136 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -24,6 +24,7 @@
 					name="email"
 					bind:value={email}
 					required
+					disabled
 				/>
 			</div>