쿼리 로그인 from firebase + 로그인 기능 구현

nuxt.config.js

@@ -66,7 +66,12 @@ export default {
     '/register/': {
       target: 'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyCYndjau99Ugi0BhT5THKDKhR5XTCv_zw4',
       pathRewrite: { '^/register/': '' }
+    },
+    '/login/': {
+      target: 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyCYndjau99Ugi0BhT5THKDKhR5XTCv_zw4',
+      pathRewrite: { '^/login/': '' }
     }
+
   },
   env: {
     NEWS_API_KEY: '2d199fb5095b44869cb4311a7a0366d2'

pages/login/index.vue

@@ -1,9 +1,124 @@
 <template>
-  <p>login</p>
+  <div class="md-layout md-alignment-center-center" style="height: 100vh;">
+    <md-card class="md-layout-item md-size-50">
+      <md-card-header>
+        <div class="md-title">
+          Login
+        </div>
+      </md-card-header>
+
+      <form @submit.prevent="validateForm">
+        <md-card-content>
+          <md-field :class="getValidationClass('email')" md-clearable>
+            <label for="email">Email</label>
+            <md-input
+              id="email"
+              v-model="form.email"
+              :disabled="loading"
+              type="email"
+              name="email"
+              autocomplete="email"
+            />
+            <span v-if="!$v.form.email.required" class="md-error">The email is required</span>
+            <span v-else-if="!$v.form.email.email" class="md-error">Invalid required</span>
+          </md-field>
+          <md-field :class="getValidationClass('password')">
+            <label for="password">password</label>
+            <md-input
+              id="password"
+              v-model="form.password"
+              :disabled="loading"
+              type="password"
+              name="password"
+              autocomplete="password"
+            />
+            <span v-if="!$v.form.password.required" class="md-error">The email is required</span>
+            <span v-else-if="!$v.form.password.minLength" class="md-error">password too short</span>
+            <span v-else-if="!$v.form.password.maxLength" class="md-error">password too Long</span>
+          </md-field>
+        </md-card-content>
+
+        <md-card-actions>
+          <md-button to="/register">
+            Go To Register
+          </md-button>
+          <md-button class="md-primary md-raised" type="submit">
+            Submit
+          </md-button>
+        </md-card-actions>
+      </form>
+
+      <md-snackbar :md-active.sync="isAuthenticated">
+        {{ form.email }} was successfully logged in!
+      </md-snackbar>
+    </md-card>
+  </div>
 </template>
 
 <script>
+import { validationMixin } from 'vuelidate'
+import { required, email, minLength, maxLength } from 'vuelidate/lib/validators'
+
 export default {
-  middleware: 'auth'
+  middleware: 'auth',
+  mixins: [validationMixin],
+  validations: {
+    form: {
+      email: {
+        required,
+        email
+      },
+      password: {
+        required,
+        minLength: minLength(6),
+        maxLength: maxLength(20)
+      }
+    }
+  },
+  data: () => ({
+    form: {
+      email: '',
+      password: ''
+    }
+  }),
+  computed: {
+    loading () {
+      return this.$store.getters.loading
+    },
+    isAuthenticated () {
+      return this.$store.getters.isAuthenticated
+    }
+  },
+  watch: {
+    isAuthenticated (value) {
+      if (value) {
+        setTimeout(() => this.$router.push('/'), 500)
+      }
+    }
+  },
+  methods: {
+    validateForm () {
+      this.$v.$touch()
+      if (!this.$v.$invalid) {
+        this.loginUser()
+      }
+    },
+    async loginUser () {
+      await this.$store.dispatch('authenticateUser', {
+        action: 'login',
+        email: this.form.email,
+        password: this.form.password,
+        resturnSecureToken: true
+      })
+    },
+    getValidationClass (fieldName) {
+      const field = this.$v.form[fieldName]
+      if (field) {
+        return {
+          'md-invalid': field.$invalid && field.$dirty
+        }
+      }
+    }
+  }
 }
 </script>

pages/register/index.vue

@@ -105,6 +105,7 @@ export default {
     },
     async resisterUser () {
       await this.$store.dispatch('authenticateUser', {
+        action: 'register',
         email: this.form.email,
         password: this.form.password,
         resturnSecureToken: true

store/index.js

@@ -43,15 +43,27 @@ const createStore = () => {
         try {
           commit('setLoading', true)
           const autuUserData = await this.$axios.$post(
-            '/register/',
-            userPayload
+            `/${userPayload.action}/`,
+            {
+              email: userPayload.email,
+              password: userPayload.password,
+              resturnSecureToken: userPayload.resturnSecureToken
+            }
           )
-          const avatar = `http://gravatar.com/avatar/${md5(autuUserData.email)}?d=identicon`
-          const user = { email: autuUserData.email, avatar }
-          await db
-            .collection('users')
-            .doc(userPayload.email)
-            .set(user)
+          let user
+          if (userPayload.action === 'register') {
+            const avatar = `http://gravatar.com/avatar/${md5(autuUserData.email)}?d=identicon`
+            user = { email: autuUserData.email, avatar }
+            await db
+              .collection('users')
+              .doc(userPayload.email)
+              .set(user)
+          } else {
+            const loginRef = db.collection('users').doc(userPayload.email)
+            const loggedInUser = await loginRef.get()
+            user = loggedInUser.data()
+          }
+
           commit('setUser', user)
           commit('setToken', autuUserData.idToken)
           commit('setLoading', false)