From 5a3eb7d536c1f919aab1185603cd944698655514 Mon Sep 17 00:00:00 2001
From: Kaan <kaan94karaca@gmail.com>
Date: Sun, 24 Sep 2017 01:24:32 +0300
Subject: [PATCH] A Signup View & Form

---
 package.json                   |  1 +
 src/components/User/Signup.vue | 80 ++++++++++++++++++++++++++++++++--
 src/main.js                    | 12 ++++-
 3 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 169bb43..1651630 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "firebase": "^4.4.0",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0",
     "vuetify": "^0.15.1",
diff --git a/src/components/User/Signup.vue b/src/components/User/Signup.vue
index ce06c58..c026aa4 100644
--- a/src/components/User/Signup.vue
+++ b/src/components/User/Signup.vue
@@ -1,5 +1,77 @@
 <template>
-    <div>
-        <p>The Sign up Page</p>
-    </div>
-</template>
\ No newline at end of file
+  <v-container>
+    <v-layout row>
+      <v-flex x12 sm6 offset-sm3>
+        <v-card>
+          <v-card-text>
+            <v-container>
+              <form>
+                <v-layout row>
+                  <v-flex xs12>
+                    <v-text-field
+                      name="email"
+                      label="Mail"
+                      id="email"
+                      v-model="email"
+                      type="email"
+                      required></v-text-field>
+                  </v-flex>
+                </v-layout>
+                <v-layout row>
+                  <v-flex xs12>
+                    <v-text-field
+                      name="password"
+                      label="Password"
+                      id="password"
+                      v-model="password"
+                      type="password"
+                      required></v-text-field>
+                  </v-flex>
+                </v-layout>
+                <v-layout row>
+                  <v-flex xs12>
+                    <v-text-field
+                      name="confirmPassword"
+                      label="Confirm Password"
+                      id="confirmPassword"
+                      v-model="confirmPassword"
+                      type="password"
+                      :rules="[comparePasswords]"></v-text-field>
+                  </v-flex>
+                </v-layout>
+                <v-layout row>
+                  <v-flex xs12>
+                    <v-btn type="submit">Sign up</v-btn>
+                  </v-flex>
+                </v-layout>
+              </form>
+            </v-container>
+          </v-card-text>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        email: '',
+        password: '',
+        confirmPassword: ''
+      }
+    },
+    computed: {
+      comparePasswords () {
+        return this.password !== this.confirmPassword ? 'Password do not match' : ''
+      }
+    },
+    methods: {
+      onSignup () {
+        // Vuex
+        console.log({email: this.email, password: this.password, confirmPassword: this.confirmPassword})
+      }
+    }
+  }
+</script>
diff --git a/src/main.js b/src/main.js
index f089566..81ab2ac 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import './stylus/main.styl'
 import App from './App'
+import * as firebase from 'firebase'
 import router from './router'
 import {store} from './store'
 import DateFilter from './filters/date'
@@ -19,5 +20,14 @@ new Vue({
   router,
   store,
   template: '<App/>',
-  components: {App}
+  components: {App},
+  created () {
+    firebase.initializeApp({
+      apiKey: 'AIzaSyBjoaHdhc9MScDKHn8dYe13b4wQLpCPnOg',
+      authDomain: 'meetup-vue-h4yfans.firebaseapp.com',
+      databaseURL: 'https://meetup-vue-h4yfans.firebaseio.com',
+      projectId: 'meetup-vue-h4yfans',
+      storageBucket: 'meetup-vue-h4yfans.appspot.com'
+    })
+  }
 })