前提・実現したいこと
当方、開発歴約半年程度の新人です。awsもvueも今回初めて触っています。
aws-amplifyで、認証機能付きログイン画面を作成しています。
認証コンポーネントにamplify-authenticatorを使用しています。
実現したいこととしまして、
パスワードを可視化または確認用パスワード入力欄を追加したいです。
調べた限りでは、
パスワードの可視化も確認用パスワード入力欄も実装できない
と記載されている記事は見つけました。
ですが、npm run serveを実施後、VSCodeのデバッグ機能を使用して画面を表示させ、
ログイン画面のパスワード欄に入力すると、パスワード可視化ができるのです。(目のマークが表示されます)
↓VSCodeのデバッグで表示した画面(目のマークは動作しました)
実際のWeb画面を開いて試してみると、パスワード可視化はできませんでした。
上司にこの旨を伝えたところ、どこかにそういう項目があるかもしれない、と。
そのため、この事象について知っている方がいないかと、ここに質問させていただきます。
他にも必要な情報等ありましたら提示しますので教えてください。
該当のソースコード
【ログイン画面のソースコード】
vue
1<template> 2 <amplify-authenticator username-alias="email"> //メールアドレスで認証する 3 <amplify-sign-in slot="sign-in" username-alias="email"> 4 <div slot="secondary-footer-content"></div> //アカウント作成はしない 5 </amplify-sign-in> 6 </amplify-authenticator> 7</template> 8 9<script> 10export default { 11 name:'Login', 12 data() { 13 return { 14 formFields:[ 15 { 16 type: "email", 17 label: "Email", 18 required: true 19 }, 20 { 21 type: "password", 22 label: "Password", 23 required: true 24 } 25 ], 26 } 27 } 28} 29</script>
補足情報(FW/ツールのバージョンなど)
"aws-amplify": "^4.1.2"
"@aws-amplify/ui-vue": "^1.0.13"
"@aws-amplify/ui-components": "^1.6.0"
"vue": "^2.6.11"
Node.js v14.16.1
npm 7.16.0
VSCode 1.60.2
あなたの回答
tips
プレビュー