From a8a732146c85db90f1d27a6e2b2415db9b5793aa Mon Sep 17 00:00:00 2001
From: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
Date: Wed, 23 Nov 2022 14:38:54 +0800
Subject: [PATCH] intrn(user): show the email of users who can reset password

---
 components/authentication/log_in_form.vue | 111 +++++++++++-----------
 pages/user/log_in.page.vue                |  46 ++++-----
 routes/enhancer/user/log_in.get.ts        |  23 +----
 3 files changed, 82 insertions(+), 98 deletions(-)

diff --git a/components/authentication/log_in_form.vue b/components/authentication/log_in_form.vue
index 9c0ba72bf..3449b9cac 100644
--- a/components/authentication/log_in_form.vue
+++ b/components/authentication/log_in_form.vue
@@ -60,10 +60,13 @@
 				</p>
 				<ul class="list-of-contacts">
 					<li
-						v-for="contact in contacts"
-						:key="contact"
+						v-for="user in users.data"
+						:key="user.id"
 						class="contact">
-						*<strong>{{ contact }}</strong>
+						*<strong>
+							{{ user.name }}
+							({{ user.email }})
+						</strong>
 					</li>
 				</ul>
 			</template>
@@ -72,65 +75,65 @@
 </template>
 
 <style scoped lang="scss">
-@import "@styles/btn.scss";
-@import "@styles/status_messages.scss";
-@import "@styles/variables.scss";
-
-.login-form {
-	@apply dark:bg-dark-700;
-	background: white;
-	width: 100%;
-	max-width: 1200px;
-	margin: 0 2em;
-	padding: 1em 2em;
-	z-index: 1;
-
-
-	@screen sm {
-		width: initial;
-		margin: auto 0;
-	}
+	@import "@styles/btn.scss";
+	@import "@styles/status_messages.scss";
+	@import "@styles/variables.scss";
+
+	.login-form {
+		@apply dark:bg-dark-700;
+		background: white;
+		width: 100%;
+		max-width: 1200px;
+		margin: 0 2em;
+		padding: 1em 2em;
+		z-index: 1;
+
+
+		@screen sm {
+			width: initial;
+			margin: auto 0;
+		}
 
-	h1 {
-		font-size: 2em;
-		text-transform: uppercase;
+		h1 {
+			font-size: 2em;
+			text-transform: uppercase;
+		}
 	}
-}
 
-form {
-	@apply text-sm;
-	margin: 1em 0 2em;
+	form {
+		@apply text-sm;
+		margin: 1em 0 2em;
 
-	.field {
-		margin-bottom: 1em;
-	}
-}
-.controls {
-	@apply flex flex-col text-xs;
-	margin-top: 1em;
-	@screen sm {
-		@apply flex-row items-center justify-between;
-
-		.submit-btn {
-			order: 2;
+		.field {
+			margin-bottom: 1em;
 		}
 	}
+	.controls {
+		@apply flex flex-col text-xs;
+		margin-top: 1em;
+		@screen sm {
+			@apply flex-row items-center justify-between;
+
+			.submit-btn {
+				order: 2;
+			}
+		}
 
-	#forgot-btn {
-		@apply text-gray-800
-		text-decoration: underline;
-		@screen <sm {
-			margin-top: 1em;
+		#forgot-btn {
+			@apply text-gray-800
+			text-decoration: underline;
+			@screen <sm {
+				margin-top: 1em;
+			}
 		}
-	}
-	button {
-		@apply dark:bg-dark-100;
+		button {
+			@apply dark:bg-dark-100;
 
-		padding: 0.5em 1em;
-		background-color: gray;
-		color: white;
+			padding: 0.5em 1em;
+			background-color: gray;
+			color: white;
+		}
 	}
-}
 </style>
 
 <script setup lang="ts">
@@ -152,10 +155,10 @@ import PasswordField from "@/fields/sensitive_text.vue"
 import TextualField from "@/fields/non-sensitive_text.vue"
 import RoleSelector from "@/fields/selectable_options.vue"
 
-type AdditionalPageProps = "adminEmails"
+type AdditionalPageProps = "users"
 const pageContext = inject("pageContext") as PageContext<"deserialized", AdditionalPageProps>
 const { pageProps } = pageContext
-const contacts = pageProps.adminEmails as string[]
+const { users } = pageProps
 
 const props = defineProps<{
 	receivedErrorFromPageContext?: UnitError & Serializable
diff --git a/pages/user/log_in.page.vue b/pages/user/log_in.page.vue
index cf688aeac..6bd7d4d97 100644
--- a/pages/user/log_in.page.vue
+++ b/pages/user/log_in.page.vue
@@ -12,36 +12,36 @@ body {
 </style>
 
 <style scoped lang="scss">
-@import "@styles/variables.scss";
+	@import "@styles/variables.scss";
 
-.login-container {
-	@apply flex items-center justify-center;
-	height: 100vh;
+	.login-container {
+		@apply flex items-center justify-center;
+		height: 100vh;
 
-	.image {
-		content: '';
-		position: fixed;
-		inset: 0;
+		.image {
+			content: '';
+			position: fixed;
+			inset: 0;
 
-		background-image: url("https://unsplash.it/g/1920/1080");
-		background-repeat: no-repeat;
-		background-size: cover;
+			background-image: url("https://unsplash.it/g/1920/1080");
+			background-repeat: no-repeat;
+			background-size: cover;
+		}
 	}
-}
 
-@media (min-width: $mobileViewportMaximum) {
-	.login-container {
-		display: grid;
-		align-items: initial;
-		justify-content: initial;
-		height: 100vh;
-		grid-template-columns: 2fr 400px;
-		.image {
-			position: initial;
-			width: 100%;
+	@media (min-width: $mobileViewportMaximum) {
+		.login-container {
+			display: grid;
+			align-items: initial;
+			justify-content: initial;
+			height: 100vh;
+			grid-template-columns: 2fr 400px;
+			.image {
+				position: initial;
+				width: 100%;
+			}
 		}
 	}
-}
 </style>
 
 <script setup lang="ts">
diff --git a/routes/enhancer/user/log_in.get.ts b/routes/enhancer/user/log_in.get.ts
index 7c9f79c44..c1a49c405 100644
--- a/routes/enhancer/user/log_in.get.ts
+++ b/routes/enhancer/user/log_in.get.ts
@@ -3,8 +3,6 @@ import type { Serializable } from "$/types/general"
 import type { DocumentProps } from "$/types/server"
 import type { UserListDocument } from "$/types/documents/user"
 
-import { DEFAULT_LIST_LIMIT } from "$/constants/numerical"
-
 import Policy from "!/bases/policy"
 import PageMiddleware from "!/bases/controller-likes/page_middleware"
 import DynamicGatedRedirector from "!/middlewares/miscellaneous/dynamic_gated_redirector"
@@ -31,27 +29,10 @@ export default class extends PageMiddleware {
 	async getPageProps(unusedRequest: Request): Promise<Serializable> {
 		const manager = new Manager()
 
-		const adminUsers = await manager.list({
-			"filter": {
-				"department": "*",
-				"existence": "exists",
-				"kind": "unreachable_employee",
-				"role": "*",
-				"slug": ""
-			},
-			"page": {
-				"limit": DEFAULT_LIST_LIMIT,
-				"offset": 0
-			},
-			"sort": [ "email" ]
-		}) as UserListDocument
-
-		const adminEmails = adminUsers.data
-		.map(user => user.attributes.email)
-		.slice(0, 3)
+		const users = await manager.retrieveResetterEmails() as UserListDocument
 
 		return {
-			adminEmails
+			users
 		}
 	}
 }