• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126

<template>

  <v-dialog v-model="show" max-width="700px">
    
    <div v-if="which == 'login'">
      <v-card>
        <v-card-title column style='flex-direction: column'>
        <div class="headline">Login to your account</div>    
      </v-card-title>    
      </v-card>
      <v-card>
        <v-card-text>
          <FormLogin />          
          <v-flex class="text-xs-right">
            <v-btn flat small color="secondary" to='/reset-password' @click='showDialog = false'>Forgot password?</v-btn>
            <v-btn small  flat color='secondary'  @click.prevent='toggleForm("register")'>Don't have an account? Create one!</v-btn>
          </v-flex>                        
        </v-card-text>       
      </v-card>
    </div>

    <div v-if="which == 'register'">
      <v-card>
        <v-card-title column style='flex-direction: column'>
          <div class="headline">Create your account!</div>             
        </v-card-title>
      </v-card>
      <v-card>
        <v-card-text>
          <FormRegister />
          <v-flex class="text-xs-right">
            <v-btn small flat color='secondary'  @click.prevent='toggleForm("login")'>Already have an account? Log in!</v-btn>
          </v-flex>       
        </v-card-text>
      </v-card>
    </div>
  </v-dialog>
</template>


<script>
  import FormRegister from './FormRegister'
  import FormLogin from './FormLogin'
  import { mapState, mapActions } from 'vuex'
  

  export default {
    components: {
      FormRegister,
      FormLogin
    },
    
  

    computed: mapState ({
      show: state => state.dialogs.auth.show,
      which: state => state.dialogs.auth.which      
    }),

    

    // computed: {
    //   show: {
    //     get () 
    //     {
    //       return this.$store.state.dialogs.auth.show
    //     },
    //     set (flag)
    //     {
    //       this.$store.state.dialogs.auth.show = flag
    //     }
        
    //   },
    //   which: {
    //     get ()
    //     {
    //       return this.$store.state.dialogs.auth.which
    //     },
    //     set (flag)
    //     {
    //       this.$store.state.dialogs.auth.which = flag
    //     }
    //   }
    // },
    
    
    methods: {

      ...mapActions([
        'dialogs/toggleDialog'
      ]),

      /*
       * Toggles between login and register form
       * inside the dialog
       * @param {str} form - 'login' or 'register'
       */

      toggleForm (form)
      {
        this.$store.dispatch('dialogs/toggleDialog', {
          dialogKey: 'auth',
          show: true,
          args: {
            form: form
          }
        })      
      }
      
    }

 
  }
</script>


<style lang='stylus'>
  
  .dialog
    background #fff
</style>