Skip to content

Instantly share code, notes, and snippets.

@armedoctopus

armedoctopus/App.vue

Forked from dabit3/App.vue
Created October 9, 2018 04:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save armedoctopus/82c862e30a7e19cd6dde349edd1ea511 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save armedoctopus/82c862e30a7e19cd6dde349edd1ea511 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @dabit3 dabit3 revised this gist Sep 14, 2018. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions App.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -20,10 +20,8 @@ import { Auth } from 'aws-amplify'
    import * as AmplifyVue from 'aws-amplify-vue';
    const signOutOptions = {
    signOutOptions: {
    msg: 'This is a message that appears above the sign out button', // type: string, default: null
    signOutButton: 'Sign Out', // type: string, default: 'Sign Out', required: false
    }
    msg: 'You are currently signed in.', // type: string, default: null
    signOutButton: 'Sign Out', // type: string, default: 'Sign Out', required: false
    }
    export default {
  2. @dabit3 dabit3 revised this gist Sep 14, 2018. 1 changed file with 19 additions and 17 deletions.
    36 changes: 19 additions & 17 deletions App.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -4,22 +4,22 @@
    <amplify-authenticator></amplify-authenticator>
    </div>
    <div v-if="signedIn">
    <amplify-sign-out class="signout" v-bind:signOutOptions="signOutOptions"></amplify-sign-out>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button v-on:click="signOut">Sign Out</button>
    <!-- <button v-on:click="signOut">Sign Out</button> -->
    </div>
    </div>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld.vue'
    import { components } from 'aws-amplify-vue'
    import { AmplifyEventBus, components } from 'aws-amplify-vue'
    import { Auth } from 'aws-amplify'
    import { AmplifyEventBus } from 'aws-amplify-vue';
    import * as AmplifyVue from 'aws-amplify-vue';
    const authOptions = {
    const signOutOptions = {
    signOutOptions: {
    msg: 'This is a message that appears above the sign out button', // type: string, default: null
    signOutButton: 'Sign Out', // type: string, default: 'Sign Out', required: false
    @@ -47,34 +47,36 @@ export default {
    }
    });
    },
    methods: {
    signOut: async function () {
    await Auth.signOut()
    this.signedIn = false
    console.log('signed out!')
    }
    },
    // methods: {
    // signOut: async function () {
    // await Auth.signOut()
    // this.signedIn = false
    // console.log('signed out!')
    // }
    // },
    data () {
    return {
    authOptions,
    signOutOptions,
    signedIn: false
    }
    }
    }
    </script>

    <style>
    body {
    margin: 0
    }
    #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    }
    .container {
    display: flex;
    flex: 1;
    justify-content: center;
    .signout {
    background-color: #ededed;
    margin: 0;
    padding: 11px 0px 1px;
    }
    </style>
  3. @dabit3 dabit3 created this gist Sep 14, 2018.
    80 changes: 80 additions & 0 deletions App.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    <template>
    <div id="app">
    <div v-if="!signedIn">
    <amplify-authenticator></amplify-authenticator>
    </div>
    <div v-if="signedIn">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button v-on:click="signOut">Sign Out</button>
    </div>
    </div>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld.vue'
    import { components } from 'aws-amplify-vue'
    import { Auth } from 'aws-amplify'
    import { AmplifyEventBus } from 'aws-amplify-vue';
    import * as AmplifyVue from 'aws-amplify-vue';
    const authOptions = {
    signOutOptions: {
    msg: 'This is a message that appears above the sign out button', // type: string, default: null
    signOutButton: 'Sign Out', // type: string, default: 'Sign Out', required: false
    }
    }
    export default {
    name: 'app',
    components: {
    components,
    HelloWorld
    },
    async beforeCreate() {
    try {
    const user = await Auth.currentAuthenticatedUser()
    this.signedIn = true
    } catch (err) {
    this.signedIn = false
    }
    AmplifyEventBus.$on('authState', info => {
    if (info === 'signedIn') {
    this.signedIn = true
    } else {
    this.signedIn = false
    }
    });
    },
    methods: {
    signOut: async function () {
    await Auth.signOut()
    this.signedIn = false
    console.log('signed out!')
    }
    },
    data () {
    return {
    authOptions,
    signedIn: false
    }
    }
    }
    </script>

    <style>
    #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    }
    .container {
    display: flex;
    flex: 1;
    justify-content: center;
    }
    </style>