<template>
    <div>
      <section>
        <v-parallax :src="require('../assets/hero.jpeg')" height="600">
          <v-layout
            column
            align-center
            justify-center
            class="white--text"
          >
            <img src="../assets/vuetify.png" alt="Vuetify.js" height="200">
            <h1 class="white--text mb-2 display-1 text-xs-center">Crypto File Sharing</h1>
            <div class="subheading mb-3 text-xs-center">Powered by Vue.js</div>
            <v-btn
              class="blue lighten-2 mt-5"
              dark
              large
              @click.stop="goToDashboard()"
            >
              Go to Dashboard
            </v-btn>


        <v-dialog v-model="loginDialog" max-width="500px">
          <v-card class="elevation-12">
              <v-toolbar dark color="primary">
              <v-btn icon @click.native="loginDialog = false" dark>
                <v-icon>close</v-icon>
              </v-btn>
                <v-toolbar-title>Login</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field prepend-icon="person" label="Username" v-model="loginUsername" type="text"></v-text-field>
                  <v-text-field prepend-icon="lock" label="Password" v-model="loginPassword" @keyup.enter="login()" type="password"></v-text-field>
                </v-form>
              <v-alert type="error" v-model='loginError'>
                {{ this.loginErrorText }}
              </v-alert>
              </v-card-text>

              <v-card-actions>
                <v-btn color="primary"
                  flat
                  @click.stop="loginDialog = false; signupDialog = true"
                >
                  New User? Signup
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn
                  color="primary"
                  @click.stop="login()"
                >
                  Login
                </v-btn>
              </v-card-actions>
            </v-card>
        </v-dialog>


      <v-dialog v-model="signupDialog" max-width="500px">
        <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-btn icon @click.native="signupDialog = false" dark>
                  <v-icon>close</v-icon>
                </v-btn>
                <v-toolbar-title>Sign Up</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-tooltip bottom>

                  <span>Source</span>
                </v-tooltip>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field prepend-icon="person" label="Name" v-model="signupName" type="text"></v-text-field>
                  <v-text-field prepend-icon="perm_identity" label="Username" v-model="signupUsername" type="text"></v-text-field>
                  <v-text-field prepend-icon="lock" label="Password" v-model="signupPassword" @keyup.enter="signup()" type="password"></v-text-field>
                </v-form>
              <v-alert type="error" v-model='signupError'>
                {{ this.signupErrorText }}
              </v-alert>
              </v-card-text>
              <v-card-actions>

                <v-spacer></v-spacer>
                <v-btn
                  color="primary"
                  @click.stop="signup()"
                  @keyup.enter="signup()"
                >
                  Sign Up
                </v-btn>

              </v-card-actions>
            </v-card>
          </v-dialog>

          </v-layout>
        </v-parallax>
      </section>

      <section>
        <v-layout
          column
          wrap
          class="my-5"
          align-center
        >
          <v-flex xs12 sm4 class="my-3">
            <div class="text-xs-center">
              <h2 class="headline">The best way to share your files</h2>
              <span class="subheading">
                Leakproof. Tamperproof. Foolproof
              </span>
            </div>
          </v-flex>
          <v-flex xs12>
            <v-container grid-list-xl>
              <v-layout row wrap align-center>
                <v-flex xs12 md4>
                  <v-card class="elevation-0 transparent">
                    <v-card-text class="text-xs-center">
                      <v-icon x-large class="blue--text text--lighten-2">color_lens</v-icon>
                    </v-card-text>
                    <v-card-title primary-title class="layout justify-center">
                      <div class="headline text-xs-center">Less Server, More You</div>
                    </v-card-title>
                    <v-card-text>
                      Crypto File Sharing beats most leading File Sharing Systems by a mile. We make use of Client side resources to get your files zipped up and locked away in our custom built encryption vault.
                    </v-card-text>
                  </v-card>
                </v-flex>
                <v-flex xs12 md4>
                  <v-card class="elevation-0 transparent">
                    <v-card-text class="text-xs-center">
                      <v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
                    </v-card-text>
                    <v-card-title primary-title class="layout justify-center">
                      <div class="headline">Multiple Layers of Security</div>
                    </v-card-title>
                    <v-card-text>
                      We encrypt your data once. As if that werent enough (just kidding), we do it again, ensuring that no Hacker, black or white hat, gets hold of your files, as incriminating as they could be ;).
                    </v-card-text>
                  </v-card>
                </v-flex>
                <v-flex xs12 md4>
                  <v-card class="elevation-0 transparent">
                    <v-card-text class="text-xs-center">
                      <v-icon x-large class="blue--text text--lighten-2">build</v-icon>
                    </v-card-text>
                    <v-card-title primary-title class="layout justify-center">
                      <div class="headline text-xs-center">Completely Open Sourced</div>
                    </v-card-title>
                    <v-card-text>
                      Crypto File Sharing is built from scratch using a wide array of technologies, all completely Open-Sourced, with the source code available for you to verify.
                    </v-card-text>
                  </v-card>
                </v-flex>
              </v-layout>
            </v-container>
          </v-flex>
        </v-layout>
      </section>

      <section>
        <v-parallax :src="require('../assets/section.jpg')" height="380">
          <v-layout column align-center justify-center>
            <div class="headline white--text mb-3 text-xs-center">File Sharing has never been easier</div>
            <em>Call your friends, share your photos and music and videos.</em>
            <v-btn
              class="blue lighten-2 mt-5"
              dark
              large
            >
              Get Started
            </v-btn>
          </v-layout>
        </v-parallax>
      </section>

      <section>
        <v-container grid-list-xl>
          <v-layout row wrap justify-center class="my-5">
            <v-flex xs12 sm4>
              <v-card class="elevation-0 transparent">
                <v-card-title primary-title class="layout justify-center">
                  <div class="headline">Company info</div>
                </v-card-title>
                <v-card-text>
                  Implementation of a secure file sharing application where users can send files and receive files while preserving security to a high degree. We propose a system that can send and receive files using encryption thus, eliminating the possibility of eavesdropping. Our system  encrypts and decrypts the file uploaded transparently. This is a method for secure communication over the internet for people even without any technical knowledge.
                </v-card-text>
              </v-card>
            </v-flex>
            <v-flex xs12 sm4 offset-sm1>
              <v-card class="elevation-0 transparent">
                <v-card-title primary-title class="layout justify-center">
                  <div class="headline">The Team</div>
                </v-card-title>
                <v-card-text>
                  Adarsh J. Abraham
                  Amal Jos
                  Anna B. Mathew
                  Jovin Jijo
                </v-card-text>
                <v-list class="transparent">
                  <v-list-tile>
                    <v-list-tile-action>
                      <v-icon class="blue--text text--lighten-2">phone</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                      <v-list-tile-title>808-946-9170</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                  <v-list-tile>
                    <v-list-tile-action>
                      <v-icon class="blue--text text--lighten-2">place</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                      <v-list-tile-title>RSET, Kakkanad</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                  <v-list-tile>
                    <v-list-tile-action>
                      <v-icon class="blue--text text--lighten-2">email</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                      <v-list-tile-title>adarshjabraham@gmail.com</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                </v-list>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </section>

      /*<v-footer class="blue darken-2">
        <v-layout row wrap align-center>
          <v-flex xs12>
            <div class="white--text ml-3">
              Made with
              <v-icon class="red--text">favorite</v-icon>
              by <a class="white--text" href="https://vuetifyjs.com" target="_blank">Vuetify</a>
              and <a class="white--text" href="https://github.com/vwxyzjn">Costa Huang</a>
            </div>
          </v-flex>
        </v-layout>
      </v-footer>*/
    </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      loginDialog: false,
      signupDialog: false,
      loginUsername: '',
      loginPassword: '',
      signupUsername: '',
      signupPassword: '',
      signupName: '',
      loginErrorText: '',
      loginError: false,
      signupError: false,
      signupErrorText: ''

    }
  },
  methods: {
    login: function () {
      if (this.loginUsername === '' || this.loginPassword === '') {
        this.loginErrorText = 'Please enter vaid username and password'
        this.loginError = true
      } else {
        this.$auth.logIn(this.loginUsername, this.loginPassword).then(response => {
          // Successful login
          this.$router.push('/dashboard')
        }, err => {
          console.log(err.status)
          this.loginErrorText = 'Incorrect username or password'
          this.loginError = true
        })
      }
    },
    signup: function () {
      if (this.signupUsername === '' || this.signupPassword === '') {
        this.signupErrorText = 'Please enter vaid username and password'
        this.signupError = true
      } else {
        this.$auth.register(this.signupUsername, this.signupPassword).then(response => {
          // Successful signup
          this.$http.post('/api/registerdetails', {username: this.signupUsername, name: this.signupName}).then(response => {
            console.log('Register details successful' + this.$auth.isLoggedIn())
            this.$router.push('/dashboard')
          }, err => {
            console.log('ERROR: Node API Signup, Error Code : ' + err.status)
          })
        }, err => {
          console.log(err.status)
          this.signupErrorText = 'Please choose a different username'
          this.signupError = true
        })
      }
    },
    goToDashboard: function () {
      if (this.$auth.isLoggedIn()) {
        this.$router.push('/dashboard')
      } else {
        this.loginDialog = true
      }
    }
  },
  mounted: function () {
    this.$root.$on('loginClicked', () => {
      this.loginDialog = true
    })
    this.$root.$on('signupClicked', () => {
      this.signupDialog = true
    })
  }
}
</script>