MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate all input fields to StyledInput (#5306)

Browse Source 
* feat: StyledInput component

* migrate: auth pages to styledInput

* migrate: search/filter inputs

* migrate: dashboard inputs

* migrate: app frontend

* migrate: search related inputs

* migrate: all of app-frontend

* fix: missing inputs on app-frontend

* migrate: frontend

* feat: multiline

* migrate: textareas

* fix: storybook use text-primary

* fix: lint

* fix: merge conflict

* feat: cleanup
This commit is contained in:
Calum H.
2026-02-09 14:57:31 +00:00
committed by GitHub
parent 90438a1ad5
commit 37eac92329
108 changed files with 1670 additions and 1479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
apps/frontend/src/pages/auth/reset-password.vue
View File

@@ -7,20 +7,18 @@
{{ formatMessage(methodChoiceMessages.description) }}
</p>
<div class="iconified-input">
<label for="email" hidden>
{{ formatMessage(commonMessages.emailUsernameLabel) }}
</label>
<MailIcon />
<input
id="email"
v-model="email"
type="text"
autocomplete="username"
class="auth-form__input"
:placeholder="formatMessage(commonMessages.emailLabel)"
/>
</div>
<label for="email" hidden>
{{ formatMessage(commonMessages.emailUsernameLabel) }}
</label>
<StyledInput
id="email"
v-model="email"
:icon="MailIcon"
type="text"
autocomplete="username"
:placeholder="formatMessage(commonMessages.emailLabel)"
wrapper-class="w-full"
/>
<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
@@ -35,33 +33,29 @@
<template v-else-if="step === 'passed_challenge'">
<p>{{ formatMessage(postChallengeMessages.description) }}</p>
<div class="iconified-input">
<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
<KeyIcon />
<input
id="password"
v-model="newPassword"
type="password"
autocomplete="new-password"
class="auth-form__input"
:placeholder="formatMessage(commonMessages.passwordLabel)"
/>
</div>
<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
<StyledInput
id="password"
v-model="newPassword"
:icon="KeyIcon"
type="password"
autocomplete="new-password"
:placeholder="formatMessage(commonMessages.passwordLabel)"
wrapper-class="w-full"
/>
<div class="iconified-input">
<label for="confirm-password" hidden>
{{ formatMessage(commonMessages.passwordLabel) }}
</label>
<KeyIcon />
<input
id="confirm-password"
v-model="confirmNewPassword"
type="password"
autocomplete="new-password"
class="auth-form__input"
:placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
/>
</div>
<label for="confirm-password" hidden>
{{ formatMessage(commonMessages.passwordLabel) }}
</label>
<StyledInput
id="confirm-password"
v-model="confirmNewPassword"
:icon="KeyIcon"
type="password"
autocomplete="new-password"
:placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
wrapper-class="w-full"
/>
<button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
{{ formatMessage(postChallengeMessages.action) }}
@@ -72,7 +66,13 @@
</template>
<script setup>
import { KeyIcon, MailIcon, SendIcon } from '@modrinth/assets'
import { commonMessages, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
import {
commonMessages,
defineMessages,
injectNotificationManager,
StyledInput,
useVIntl,
} from '@modrinth/ui'
import HCaptcha from '@/components/ui/HCaptcha.vue'