So, I have this float button which a dialog which notify user to login, upon dialog appear, there are two option -cancel and ok. And I had create login component then I import in this code (i set false to hide). So my plan whenever press ok which go to login component . Since this code made by someone and im still newbie to continue it. Hopefully someone can help code it.

<template>
  <q-page-sticky position="bottom-right" :offset="[18, 18]">
    <q-btn fab icon="add" color="primary" @click="verifyUser"/>
  </q-page-sticky>
  <q-dialog v-model="state.formDialog" persistent>
    <q-card>
      <NewWord @close="state.formDialog=false" />
    </q-card>
  </q-dialog>
  <LoginComponents v-model='value'/>
</template>

<script>
import { defineComponent, reactive } from 'vue'
import { globalState } from '../util'
import NewWord from './../pages/NewWord'
import { Dialog } from 'quasar'
import LoginComponents from 'components/LoginComponents'
export default defineComponent({
  components: {
    NewWord,
    LoginComponents
  },
  setup () {
    const state = reactive({
      showDialog: false,
      formDialog: false
    })

    function verifyUser () {
      console.log(globalState)
      if (globalState.auth) {
        state.formDialog = true
      } else {
        Dialog.create({
          cancel: true,
          persistent: true,
          title: 'Login required',
          message: 'We love that you want to contribute to our cause. Please login to proceed. Thank you so much!.'
        }).onOk(() => {
          console.log('go to login')
        })
      }
    }

    return {
      state,
      verifyUser
    }
  },
  data () {
    return {
      value: false
    }
  }
})
</script>

Im trying to popup a login dialog but the problem i cannot make appear even I set it ‘true’. below is my two components that appear on main layout.

login components:

<template>
  <div v-show="true">
    <q-dialog>
        <q-card>
          <q-card-section>
            <q-form class="q-gutter-md" style="width: 400px">
              <h4 class="text-h4 text-primary q-my-auto text-weight-medium">Login</h4>
              <q-input
              filled
              :error="state.error"
              label="Your email *"
              lazy-rules
              :rules="[ required, email ]"
              />

              <q-input
                filled
                v-model="state.doc.password"
                :error-message="state.error ? 'Incorrect email or password' : 'Field is Required'"
                :error="state.error"
                :type="state.showPassword ? 'text' : 'password'"
                label="Password *"
                lazy-rules
                :rules="[ required ]">
                <template v-slot:append>
                  <q-icon
                  :name="state.showPassword ? 'visibility' : 'visibility_off'"
                  class="cursor-pointer"
                  @click="state.showPassword = !state.showPassword" />
                </template>
              </q-input>

            <div style="margin-top: 40px;" class="q-gutter-x-sm">
              <q-btn label="Login" type="submit" color="primary"/>
              <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit" />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'
import { setCookie } from 'tiny-cookie'
import { globalState } from '../util'
import { useRouter } from 'vue-router'
import axios from 'axios'
const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/
export default defineComponent({
  setup () {
    const router = useRouter()
    const state = reactive({
      doc: {},
      showPassword: false,
      error: false
    })

    function onSubmit () {
      const apiUrl = '/api/login'
      state.doc.email = state.doc.email.trim()
      state.doc.password = state.doc.password.trim()
      axios.post(apiUrl, state.doc)
        .then(res => {
          console.log(res)
          if (res && res.data) {
            setCookie('Test123', JSON.stringify({
              username: res.data.email,
              password: res.data.password,
              database: res.data.database,
              phone: res.data.phone,
              auth: true
            }), { expires: '8h' })
            globalState.database = res.data.database
            globalState.username = res.data.email
            globalState.email = res.data.email
            globalState.phone = res.data.phone
            router.push({ path: '/' })
          }
        })
        .catch(err => {
          console.error(err)
          state.error = true
          setTimeout(() => {
            state.error = false
          }, 2000)
        })
    }

    function onReset () {
      state.doc = {}
    }

    return {
      onSubmit,
      onReset,
      state,
      email: (v) => emailPattern.test(v) || 'Invalid email',
      required: (v) => !!v || 'Field is Required'
    }
  }
})
</script>

other components that call login component as dialog:

<template>
  <LoginComponents />
</template>

<script>
import { defineComponent } from 'vue'
import LoginComponents from 'components/LoginComponents'
export default defineComponent({
  components: {
    LoginComponents
  }
})
</script>

My partner create a login page with several components like “email”, “password”, “phone number”, “login button” and “forgot password”. But then ask me to move all the components into new vue under ‘/components’ folder. I only know to move the components but I cannot make it functional since the method is not callable. Please help.

original login page:

<template>
  <div class="q-pa-md" style="width: 400px">

    <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
    >
      <!-- <q-input
        filled
        v-model="email"
        label="Your email *"
        lazy-rules
        :rules="[val => !!val || 'Email is missing', isValidEmail]"
      />

      <q-input
        filled
        type="password"
        v-model="password"
        label="Password *"
        hint="Password should be 8 characters"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your password',
          val => val.length === 8 || 'Please enter a valid password'
        ]"
      />

      <q-input
        filled
        type="number"
        v-model="phone"
        label="Your phone number *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your phone number',
          val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
        ]"
      />

      <div>
        <q-btn label="Login" type="submit" color="primary"/>
        <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
      </div> -->
    </q-form>

  </div>
</template>

<script>
export default {
  data () {
    return {
      email: null,
      password: null,
      phone: null,
      accept: false
    }
  },

  methods: {
    isValidEmail (val) {
      const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/
      return emailPattern.test(val) || 'Invalid email'
    },
    onSubmit () {
      if (this.accept !== true) {
        this.$q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning'
        })
      } else {
        this.$q.notify({
          color: 'green-4',
          textColor: 'white',
          icon: 'cloud_done',
          message: 'Submitted'
        })
      }
      this.onReset()
    },

    onReset () {
      this.email = null
      this.password = null
      this.phone = null
      this.accept = false
    }
  }
}
</script>

new component vue:

<template>
  <q-input
        filled
        v-model="email"
        label="Your email *"
        lazy-rules
        :rules="[val => !!val || 'Email is missing', isValidEmail]"
      />

    <q-input
        filled
        type="password"
        v-model="password"
        label="Password *"
        hint="Password should be 8 characters"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your password',
          val => val.length === 8 || 'Please enter a valid password'
        ]"
      />

      <q-input
        filled
        type="number"
        v-model="phone"
        label="Your phone number *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your phone number',
          val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
        ]"
      />

      <div>
        <q-btn label="Login" type="submit" color="primary"/>
        <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
      </div>
</template>

<script>
export default {

}
</script>

I create a layout that contain toolbar, header and q-tabs. I use this layout for several pages which mean also several router. But then I want disable the tab-bar on a certain pages but keep the toolbar and header. Any solution for this?

@metalsadman yeah already. Finally I can expand it…Thanks

@s-molinari said in how to expand q-input width?:

Just a shot in the dark

what do you mean? and can you show me how to add the style in q-input? very appreciate it

here is my header, i code q-input to make ‘search’ textfield. But I encounter problem which I cannot extend the width even I use max-width in search.vue. Moreover I still new to this quasar, and I don’t know what to change in layout.vue. I want the textfield is longer enough.

search.vue code:

<div style="max-width:900px">
    <q-input v-show="showSearch"
        :hidden="showSearch"
        v-model="search"
        dark
        placeholder="Search word"
        label-color="white"
        type="search"
        class="bg-primary"
        color="white"/>
  </div>

some of layout.vue code:

<q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar class="row justify-center">
          <q-toolbar-title class="q-pa-md" >testing</q-toolbar-title>
          <SearchWord />
          <q-btn flat round dense icon="more_vert">
            <q-menu
          transition-show="jump-down"
          transition-hide="jump-up">
          <q-list style="min-width: 200px">
            <q-item clickable @click="add = true">
              <q-item-section>a</q-item-section>
            </q-item>
            <q-item clickable @click="about = true">
              <q-item-section>b</q-item-section>
            </q-item>
            <q-item clickable @click="profile = true">
              <q-item-section>c</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
        </q-btn>
      </q-toolbar>
        <q-tabs inline-label outside-arrows mobile-arrows>
          <q-route-tab to="/" name="dictionary" label="Dictionary" />
          <q-route-tab to="/entries" name="entries" label="New Words" />
          <q-route-tab to="/contributors" name="contributors" label="Top Contributors" />
        </q-tabs>
      </q-header>

@metalsadman i tried v-if nothing happen but when I change to v-show, it can toggle as I wanted. is it correct to use v-show. Anyway thanks for that idea

I was try to make the search bar appear and disappear whenever I click the search button. This mean the button is toggle the search field. But I cannot make the search bar disappear after I click search button.

<template>
  <q-input
    :hidden="showSearch"
    v-model="search"
    dark
    label-color="white"
    type="search"
    class="bg-primary"
    color="white" />
  <q-btn
    flat rounded
    icon="search"
    color="white"
    @click="toggleSearch"/>

</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({

  setup () {
    const showSearch = ref(false)
    const search = ref('')
    const toggleSearch = () => {
      console.log('toggle search', showSearch.value)
      showSearch.value = !showSearch.value
    }

    return {
      search,
      showSearch,
      toggleSearch
    }
  }
})
</script>