From 7bc9f390db88116ab924a9d06e1d7ff83790f566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 3 Jan 2023 05:17:11 +0800
Subject: [PATCH] feat(settings): add reset form

---
 locales/en-US.json                    |  1 +
 pages/settings/profile/appearance.vue | 24 ++++++++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/locales/en-US.json b/locales/en-US.json
index 63c0177a..a0ee2895 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -59,6 +59,7 @@
     "publish": "Publish!",
     "reply": "Reply",
     "reply_count": "{0}",
+    "reset": "Reset",
     "save": "Save",
     "save_changes": "Save changes",
     "sign_in": "Sign in",
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index 05e9b6d9..87ecdb78 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -129,22 +129,30 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
           <SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
         </div>
 
-        <!-- submit -->
-        <div text-right>
+        <!-- actions -->
+        <div flex="~ gap2" justify-end>
+          <button
+            type="button"
+            btn-text text-sm
+            flex gap-x-2 items-center
+            text-red
+            @click="reset()"
+          >
+            <div aria-hidden="true" i-ri:eraser-line />
+            {{ $t('action.reset') }}
+          </button>
+
           <button
             type="submit"
             btn-solid rounded-full text-sm
-            flex-inline gap-x-2 items-center
+            flex gap-x-2 items-center
             :disabled="submitting || !isCanSubmit"
           >
-            <span
+            <div
               aria-hidden="true"
-              inline-block
               :class="submitting ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:save-line'"
             />
-            <span>
-              {{ $t('action.save') }}
-            </span>
+            {{ $t('action.save') }}
           </button>
         </div>
       </div>