Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
authentication, alerts, header, search
- Loading branch information
1 parent
e23a084
commit d0b2f51
Showing
15 changed files
with
494 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "firebase": "gkeep-vueifire2", | ||
| "firebase": "gkeep-vueifire3", | ||
| "public": "dist", | ||
| "ignore": [ | ||
| "firebase.json", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <template> | ||
| <div class="alerts"> | ||
| <div v-for="alert in alerts" v-bind:class="alert.type" transition="expand"> | ||
| <p> | ||
| {{alert.message}} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| props: ['alerts'] | ||
| } | ||
| </script> | ||
| <style> | ||
| .alerts{ | ||
| position: fixed; | ||
| top: 50px; | ||
| left: 0; | ||
| right: 0; | ||
| z-index: 1; | ||
| } | ||
| .alerts div{ | ||
| background: #bbb; | ||
| overflow: hidden; | ||
| } | ||
| .alerts div.error{ | ||
| background: #e03c3c; | ||
| color: #fff; | ||
| } | ||
| .alerts div.success{ | ||
| background: #41b883; | ||
| color: #fff; | ||
| } | ||
| .alerts p{ | ||
| width: 480px; | ||
| margin: 0 auto; | ||
| padding: 4px; | ||
| text-align: center; | ||
| } | ||
| .expand-transition{ | ||
| max-height: 200px; /* height 0 -> auto is not animatable, so use max-height 0 -> large height */ | ||
| transition: max-height 1s ease; | ||
| } | ||
| .expand-enter, .expand-leave{ | ||
| max-height: 0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <template> | ||
| <header v-if="user"> | ||
| <input placeholder="Search" v-model="searchQuery" debounce="500"> | ||
| <div> | ||
| <span>{{user.userTitle}}</span> | ||
| <img :src="user.imageUrl" alt="{{user.userTitle}}"/> | ||
| <i class="fa fa-sign-out" aria-hidden="true" v-on:click="signOut"></i> | ||
| </div> | ||
| </header> | ||
| </template> | ||
| <script> | ||
| import authRepository from 'src/data/AuthRepository' | ||
| export default { | ||
| data () { | ||
| return { | ||
| user: null, | ||
| searchQuery: '' | ||
| } | ||
| }, | ||
| watch: { | ||
| 'searchQuery': function () { | ||
| this.$dispatch('search', this.searchQuery) | ||
| } | ||
| }, | ||
| methods: { | ||
| processUser (authed) { | ||
| switch (authed.provider) { | ||
| case 'password': | ||
| this.user = { | ||
| userTitle: authed.password.email, | ||
| imageUrl: authed.password.profileImageURL | ||
| } | ||
| break | ||
| default: | ||
| this.user = { | ||
| userTitle: authed[authed.provider].displayName, | ||
| imageUrl: authed[authed.provider].profileImageURL | ||
| } | ||
| break | ||
| } | ||
| }, | ||
| signOut () { | ||
| authRepository.signOut() | ||
| this.$router.go('auth') | ||
| } | ||
| }, | ||
| ready () { | ||
| authRepository.detachFirebaseListeners() | ||
| authRepository.on('authed', () => { | ||
| this.processUser(authRepository.getAuth()) | ||
| }) | ||
| authRepository.on('unauthed', () => { | ||
| this.user = null | ||
| }) | ||
| this.user = authRepository.getAuth() | ||
| authRepository.attachFirebaseListeners() | ||
| } | ||
| } | ||
| </script> | ||
| <style> | ||
| header{ | ||
| position: fixed; | ||
| left: 0; | ||
| top: 0; | ||
| right: 0; | ||
| z-index: 1; | ||
| height: 50px; | ||
| background: #333; | ||
| padding: 10px; | ||
| box-shadow: 0 2px 5px rgba(0,0,0,.4); | ||
| } | ||
| header input { | ||
| display: block; | ||
| width: 480px; | ||
| margin: 0 auto; | ||
| height: 30px; | ||
| border: none; | ||
| padding: 0 16px; | ||
| border-radius: 2px; | ||
| } | ||
| header span { | ||
| padding: 15px; | ||
| color: #fff; | ||
| position: absolute; | ||
| right: 95px; | ||
| top: 1px; | ||
| } | ||
| header img { | ||
| width: 35px; | ||
| height: 35px; | ||
| border-radius: 20px; | ||
| position: absolute; | ||
| right: 60px; | ||
| top: 8px; | ||
| } | ||
| header i.fa { | ||
| position: absolute; | ||
| display: block; | ||
| color: #fff; | ||
| right: 15px; | ||
| top: 13px; | ||
| font-size: 25px; | ||
| cursor: pointer; | ||
| } | ||
| @media screen and (max-width: 1200px) { | ||
| header span{ | ||
| display: none; | ||
| } | ||
| } | ||
| @media screen and (max-width: 720px) { | ||
| header input{ | ||
| width: calc(100% - 64px); | ||
| margin: 0 0 0 16px; | ||
| } | ||
| header span, header img { | ||
| display: none; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.