From 43e1e446b64a74726984efe3cb675a3211f5211d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 16 Aug 2023 14:38:11 +0800
Subject: [PATCH] feat: add reveal button for password input (#4434)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind feature
/milestone 2.9.x

#### What this PR does / why we need it:

为 FormKit 的 password 类型输入框添加统一的显示/隐藏明文按钮。

<img width="541" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/2947cef2-258c-434d-9268-c8b5ad26a9f7">


#### Which issue(s) this PR fixes:

Fixes #4382

#### Special notes for your reviewer:

测试密码输入框的显示隐藏明文按钮是否可以正常使用即可。

#### Does this PR introduce a user-facing change?

```release-note
为 FormKit 的 password 类型输入框添加统一的显示/隐藏明文按钮。
```
---
 console/src/formkit/formkit.config.ts         |  2 +
 .../formkit/inputs/password/RevealButton.vue  | 35 +++++++++
 console/src/formkit/inputs/password/index.ts  | 76 +++++++++++++++++++
 console/src/styles/index.css                  |  5 ++
 4 files changed, 118 insertions(+)
 create mode 100644 console/src/formkit/inputs/password/RevealButton.vue
 create mode 100644 console/src/formkit/inputs/password/index.ts

diff --git a/console/src/formkit/formkit.config.ts b/console/src/formkit/formkit.config.ts
index 76cfd06ee..7d6d62245 100644
--- a/console/src/formkit/formkit.config.ts
+++ b/console/src/formkit/formkit.config.ts
@@ -19,6 +19,7 @@ import { tagCheckbox } from "./inputs/tag-checkbox";
 import { roleSelect } from "./inputs/role-select";
 import { attachmentPolicySelect } from "./inputs/attachment-policy-select";
 import { attachmentGroupSelect } from "./inputs/attachment-group-select";
+import { password } from "./inputs/password";
 
 import radioAlt from "./plugins/radio-alt";
 import stopImplicitSubmission from "./plugins/stop-implicit-submission";
@@ -39,6 +40,7 @@ const config: DefaultConfigOptions = {
   ],
   inputs: {
     form,
+    password,
     group,
     attachment,
     code,
diff --git a/console/src/formkit/inputs/password/RevealButton.vue b/console/src/formkit/inputs/password/RevealButton.vue
new file mode 100644
index 000000000..67c1cc41f
--- /dev/null
+++ b/console/src/formkit/inputs/password/RevealButton.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { FormKitFrameworkContext } from "@formkit/core";
+import { IconEye, IconEyeOff } from "@halo-dev/components";
+import type { PropType } from "vue";
+import { toRefs } from "vue";
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
+});
+
+const { context } = toRefs(props);
+
+function handleChange() {
+  context.value.node.props.type =
+    context.value.node.props.type === "password" ? "text" : "password";
+}
+</script>
+
+<template>
+  <div
+    class="group flex h-full cursor-pointer items-center px-3 transition-all"
+    @click="handleChange"
+  >
+    <IconEye
+      v-if="context.node.props.type === 'password'"
+      class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
+    />
+    <IconEyeOff
+      v-else
+      class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
+    />
+  </div>
+</template>
diff --git a/console/src/formkit/inputs/password/index.ts b/console/src/formkit/inputs/password/index.ts
new file mode 100644
index 000000000..36d5b2a2b
--- /dev/null
+++ b/console/src/formkit/inputs/password/index.ts
@@ -0,0 +1,76 @@
+import type { FormKitTypeDefinition } from "@formkit/core";
+import {
+  outer,
+  inner,
+  wrapper,
+  label,
+  help,
+  messages,
+  message,
+  icon,
+  prefix,
+  suffix,
+  textInput,
+} from "@formkit/inputs";
+import RevealButton from "./RevealButton.vue";
+
+import { createSection } from "@formkit/inputs";
+
+export const RevealButtonSuffix = createSection("RevealButtonSuffix", () => ({
+  $cmp: "RevealButton",
+  props: {
+    context: "$node.context",
+  },
+}));
+
+/**
+ * Input definition for a text.
+ * @public
+ */
+export const password: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label("$label"),
+      inner(
+        icon("prefix", "label"),
+        prefix(),
+        textInput(),
+        suffix(),
+        RevealButtonSuffix()
+      )
+    ),
+    help("$help"),
+    messages(message("$message.value"))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: "input",
+  /**
+   * The family of inputs this one belongs too. For example "text" and "email"
+   * are both part of the "text" family. This is primary used for styling.
+   */
+  family: "text",
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [],
+  /**
+   * Forces node.props.type to be this explicit value.
+   */
+  forceTypeProp: "password",
+  /**
+   * Additional features that should be added to your input
+   */
+  features: [],
+  /**
+   * The key used to memoize the schema.
+   */
+  schemaMemoKey: "92o49lnph2p",
+  library: {
+    RevealButton,
+  },
+};
diff --git a/console/src/styles/index.css b/console/src/styles/index.css
index 26269ce9d..ede60322d 100644
--- a/console/src/styles/index.css
+++ b/console/src/styles/index.css
@@ -16,3 +16,8 @@
 .fade-leave-to {
   @apply opacity-0;
 }
+
+/* https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control */
+::-ms-reveal {
+  display: none;
+}