From 0513ff8b4e7177c4846d856b2a4023850c04ddde Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Wed, 24 May 2023 17:29:58 +0900 Subject: [PATCH] refactor --- .../src/components/MkForgotPassword.vue | 55 +++++++------------ 1 file changed, 20 insertions(+), 35 deletions(-) diff --git a/packages/frontend/src/components/MkForgotPassword.vue b/packages/frontend/src/components/MkForgotPassword.vue index 0befa7e3ae..1264c42331 100644 --- a/packages/frontend/src/components/MkForgotPassword.vue +++ b/packages/frontend/src/components/MkForgotPassword.vue @@ -8,27 +8,28 @@ > <template #header>{{ i18n.ts.forgotPassword }}</template> - <form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit"> - <div class="main _gaps_m"> - <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required> - <template #label>{{ i18n.ts.username }}</template> - <template #prefix>@</template> - </MkInput> + <MkSpacer :marginMin="20" :marginMax="28"> + <form v-if="instance.enableEmail" @submit.prevent="onSubmit"> + <div class="_gaps_m"> + <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required> + <template #label>{{ i18n.ts.username }}</template> + <template #prefix>@</template> + </MkInput> - <MkInput v-model="email" type="email" :spellcheck="false" required> - <template #label>{{ i18n.ts.emailAddress }}</template> - <template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template> - </MkInput> + <MkInput v-model="email" type="email" :spellcheck="false" required> + <template #label>{{ i18n.ts.emailAddress }}</template> + <template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template> + </MkInput> - <MkButton type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton> + <MkButton type="submit" rounded :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton> + + <MkInfo>{{ i18n.ts._forgotPassword.ifNoEmail }}</MkInfo> + </div> + </form> + <div v-else> + {{ i18n.ts._forgotPassword.contactAdmin }} </div> - <div class="sub"> - <MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA> - </div> - </form> - <div v-else class="bafecedb"> - {{ i18n.ts._forgotPassword.contactAdmin }} - </div> + </MkSpacer> </MkModalWindow> </template> @@ -37,6 +38,7 @@ import { } from 'vue'; import MkModalWindow from '@/components/MkModalWindow.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; +import MkInfo from '@/components/MkInfo.vue'; import * as os from '@/os'; import { instance } from '@/instance'; import { i18n } from '@/i18n'; @@ -62,20 +64,3 @@ async function onSubmit() { dialog.close(); } </script> - -<style lang="scss" scoped> -.bafeceda { - > .main { - padding: 24px; - } - - > .sub { - border-top: solid 0.5px var(--divider); - padding: 24px; - } -} - -.bafecedb { - padding: 24px; -} -</style>