Added account update form and e-mail verification.

components/form/password.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+	password: {
+		type: String,
+		default: null,
+	},
+	placeholder: {
+		type: String,
+		default: 'Password',
+	},
+	autocomplete: {
+		type: String,
+		default: 'current-password',
+	},
+});
+
+const emit = defineEmits(['change', 'input']);
+
+const currentPassword = ref(props.password);
+const showPassword = ref(false);
+</script>
+
+<template>
+	<div class="password-container">
+		<input
+			v-model="currentPassword"
+			:type="showPassword ? 'input' : 'password'"
+			:placeholder="placeholder"
+			:autocomplete="autocomplete"
+			minlength="3"
+			class="password input"
+			@change="emit('change', currentPassword)"
+			@input="emit('input', currentPassword)"
+		>
+
+		<div
+			class="password-show"
+			@click="showPassword = !showPassword"
+		>
+			<Icon
+				v-show="!showPassword"
+				icon="eye"
+				class="password-show"
+			/>
+
+			<Icon
+				v-show="showPassword"
+				icon="eye-blocked"
+				class="password-show"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.input {
+	background: var(--background);
+	padding-right: 2.5rem;
+}
+
+.password-container {
+	display: flex;
+	position: relative;
+}
+
+.password {
+	flex-grow: 1;
+}
+
+.password-show {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	position: absolute;
+	right: 0;
+	padding: 0 1rem 0 .5rem;
+
+	.icon {
+		fill: var(--glass);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+</style>