create form as a guest (#29)

* create form as a guest

* Remove vue-tour

* Refactor initForm function and improve template merge

* Add templates to navbar

* Fix template preview submit issue

Co-authored-by: Chirag Chhatrala <chirag@notionforms.io>

resources/js/pages/auth/login.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <forgot-password-modal :show="showForgotModal" @close="showForgotModal=false" />
-
     <div class="flex mt-6 mb-10">
       <div class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap">
         <div class="w-full md:w-1/2 md:p-6">
@@ -11,35 +9,7 @@
             </h2>
             <small>Welcome back! Please enter your details.</small>
 
-            <form @submit.prevent="login" @keydown="form.onKeydown($event)" class="mt-4">
-              <!-- Email -->
-              <text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
-
-              <!-- Password -->
-              <text-input native-type="password" placeholder="Your password"
-                          name="password" :form="form" :label="$t('password')" :required="true"
-              />
-
-              <!-- Remember Me -->
-              <div class="relative flex items-center my-5">
-                <v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember" size="small">
-                  {{ $t('remember_me') }}
-                </v-checkbox>
-
-                <div class="w-full md:w-1/2 text-right">
-                  <a href="#" @click.prevent="showForgotModal=true" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700">
-                    Forgot your password?
-                  </a>
-                </div>
-              </div>
-
-              <!-- Submit Button -->
-              <v-button dusk="btn_login" :loading="form.busy">Log in to continue</v-button>
-
-              <p class="text-gray-500 mt-4">
-                Don't have an account?  <router-link :to="{name:'register'}" class="font-semibold ml-1">Sign Up</router-link>
-              </p>
-            </form>
+            <login-form />
           </div>
         </div>
         <div class="w-full md:w-1/2 md:p-6 mt-8 md:mt-0 ">
@@ -86,17 +56,15 @@
 </template>
 
 <script>
-import Form from 'vform'
-import Cookies from 'js-cookie'
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
 import Testimonials from '../../components/pages/welcome/Testimonials'
-import ForgotPasswordModal from './ForgotPasswordModal'
+import LoginForm from './components/LoginForm'
 
 export default {
   components: {
     OpenFormFooter,
     Testimonials,
-    ForgotPasswordModal
+    LoginForm
   },
 
   middleware: 'guest',
@@ -106,42 +74,11 @@ export default {
   },
 
   data: () => ({
-    form: new Form({
-      email: '',
-      password: ''
-    }),
-    remember: false,
-    showForgotModal: false
+
   }),
 
   methods: {
-    async login () {
-      // Submit the form.
-      const { data } = await this.form.post('/api/login')
 
-      // Save the token.
-      this.$store.dispatch('auth/saveToken', {
-        token: data.token,
-        remember: this.remember
-      })
-
-      // Fetch the user.
-      await this.$store.dispatch('auth/fetchUser')
-
-      // Redirect home.
-      this.redirect()
-    },
-
-    redirect () {
-      const intendedUrl = Cookies.get('intended_url')
-
-      if (intendedUrl) {
-        Cookies.remove('intended_url')
-        this.$router.push({ path: intendedUrl })
-      } else {
-        this.$router.push({ name: 'home' })
-      }
-    }
   }
 }
 </script>