差分

このページの2つのバージョン間の差分を表示します。

--- 16.vue.jsのvuexでパスワード制限:index.html [2019/01/31] – [src/components/Authentication.vueにGoogleログインを実装] adash333
+++ 16.vue.jsのvuexでパスワード制限:index.html [2019/02/01] (現在) – [開発環境] adash333
@@ 行 24: / 行 24: @@
 ソースコード
+https://github.com/adash333/Vue_Vuex_Firebase_Auth
 https://codesandbox.io/s/54n9575y44
-作成中
 Demo
+https://54n9575y44.codesandbox.io/
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074345.png}}
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074324.png}}
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074427.png}}
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074458.png}}
 ===== 開発環境 =====
 <code>
 Chrome
@@ 行 360: / 行 364: @@
 {{:16.vue.jsのvuexでパスワード制限:pasted:20190131-000054.png}}
 {{:16.vue.jsのvuexでパスワード制限:pasted:20190131-000204.png}}
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-000336.png}}
+残念ながら、ログインした後も、Sign in With Googleのボタンのままでした。。。
+firebase.jsの写経をするときに、どこかでタイプミスしたことが原因であったらしく、https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#firebase-firebasejsのコードをコピペしたら、動くようになりました。
+（見栄えは変えないと、、、）
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-001353.png}}
+==== ログイン/ログアウトボタンの見た目の調整 ====
+かなり厳しい。。。名前を表示するのはあきらめようかと思います。
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-002954.png}}
+Vuetifyの<v-list-tile>の使い方がいまいちわからず、思った通りにならない。
+とりあえず、<v-navigation-drawer>のところに名前を表示するのはあきらめて、Sign outボタンのみにしました。
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-003426.png}}
+ちなみに、<v-button>の中身のテキストがすべて大文字になってしまうため、<style>のところに、以下のように記載しています。
+<code>
+<style scoped>
+* {
+  text-transform: none !important;
+}
+</style>
+</code>
+参考：https://github.com/vuetifyjs/vuetify/issues/1443
+[Help]How to make the global text not uppercase/capitalize #1443
+ Closed	alterhu2020 opened this issue on 22 Aug 2017
+===== App.vueの<content>の中身のcardを、Home.vueとAbout.vueにそれぞれ移動 =====
+src/App.vue
+(変更前)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004004.png}}
+(変更後)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004330.png}}
+src/components/Home.vue
+(変更前)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004348.png}}
+(変更後)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004458.png}}
+src/components/About.vue
+(変更前)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004533.png}}
+(変更後)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004610.png}}
+===== Home.vueの編集 =====
+中身を変えます。Home.vueはログイン前後で変化なしにしようと思います。
+(変更前)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004832.png}}
+(変更後)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-010253.png}}
+途中ですが、ここまでのソースコード
+{{ :16.vue.jsのvuexでパスワード制限:vuex-firebase-auth.zip |}}
+===== About.vueの編集 =====
+ログインした状態で、ログインした人の名前を表示しようと思います。
+https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#aboutvueを参考に、変えてみます。
+<html>
+<script src="https://gist.github.com/adash333/291ef9a3df09f58e6182c9847f21560f.js"></script>
+</html>
+(変更前)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-010352.png}}
+(変更後)
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-051958.png}}
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-052015.png}}
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-052120.png}}
+今回はここまでとなります。
+参考：https://vuetifyjs.com/ja/components/lists
+===== ソースコード =====
+https://github.com/adash333/Vue_Vuex_Firebase_Auth
+https://codesandbox.io/s/54n9575y44
+Demo
+https://54n9575y44.codesandbox.io/
+{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-053519.png}}