A Signup View & Form

h4yfans · Sep 23, 2017 · 5a3eb7d · 5a3eb7d
1 parent f5b2139
commit 5a3eb7d
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 5 deletions.
diff --git 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
@@ -1,5 +1,77 @@
 <template>
-    <div>
-        <p>The Sign up Page</p>
-    </div>
-</template>
+  <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
@@ -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'
+    })
+  }
 })