Rewrite user home page in svelte

svelte/src/user_home/AccountSettings.svelte

@@ -0,0 +1,126 @@
+<script>
+import Form from "./../util/Form.svelte";
+
+let password_change = {
+	name: "password_change",
+	fields: [
+		{
+			name: "old_password",
+			label: "Old password",
+			type: "current_password",
+		}, {
+			name: "new_password",
+			label: "New password",
+			type: "new_password",
+		}, {
+			name: "new_password2",
+			label: "New password again",
+			type: "new_password",
+			description: "we need you to repeat your password so you " +
+					"won't be locked out of your account if you make a " +
+					"typing error"
+		},
+	],
+	submit_label: `<i class="icon">save</i> Save`,
+	on_submit: async fields => {
+		if (fields.new_password != fields.new_password2) {
+			return {success: false, message: "Passwords do not match! Please enter the same password in both fields"}
+		}
+
+		const form = new FormData()
+		form.append("old_password", fields.old_password)
+		form.append("new_password", fields.new_password)
+
+		const resp = await fetch(
+			window.api_endpoint+"/user/password",
+			{ method: "PUT", body: form }
+		);
+		if(resp.status >= 400) {
+			return {error_json: await resp.json()}
+		}
+		return {success: true, message: "Success! Your password has been updated"}
+	},
+}
+
+let email_change = {
+	name: "email_change",
+	fields: [
+		{
+			name: "new_email",
+			label: "New e-mail address",
+			type: "email",
+			default_value: window.user.email,
+			description: `we will send an e-mail to the new address to
+					verify that it's real. The address will be saved once the
+					link in the message is clicked. If the e-mail doesn't arrive
+					right away please check your spam box too. Leave the field
+					empty to remove your current e-mail address from your
+					account`,
+		},
+	],
+	submit_label: `<i class="icon">save</i> Save`,
+	on_submit: async fields => {
+		const form = new FormData()
+		form.append("new_email", fields.new_email)
+
+		const resp = await fetch(
+			window.api_endpoint+"/user/email_reset",
+			{ method: "PUT", body: form }
+		);
+		if(resp.status >= 400) {
+			return {error_json: await resp.json()}
+		}
+		return {success: true, message: "Success! E-mail sent. Click the link in the message to verify your new address"}
+	},
+}
+
+let name_change = {
+	name: "name_change",
+	fields: [
+		{
+			name: "new_username",
+			label: "New name",
+			type: "username",
+			description: `changing your username also changes the name used to
+				log in. If you forget your username you can still log in using
+				your e-mail address if you have one configured`,
+		},
+	],
+	submit_label: `<i class="icon">save</i> Save`,
+	on_submit: async fields => {
+		const form = new FormData()
+		form.append("new_username", fields.new_username)
+
+		const resp = await fetch(
+			window.api_endpoint+"/user/username",
+			{ method: "PUT", body: form }
+		);
+		if(resp.status >= 400) {
+			return {error_json: await resp.json()}
+		}
+		return {success: true, message: "Success! You are now known as "+fields.new_username}
+	},
+}
+</script>
+
+<div>
+	<div class="limit_width">
+		<h2>Change password</h2>
+		<div class="highlight_dark">
+			<Form config={password_change}></Form>
+		</div>
+
+		<h2>Change e-mail address</h2>
+		<div class="highlight_dark">
+			<Form config={email_change}></Form>
+		</div>
+
+		<h2>Change name</h2>
+		<div class="highlight_dark">
+			<Form config={name_change}></Form>
+		</div>
+	</div>
+</div>
+
+<style>
+</style>