Skip to content
Snippets Groups Projects
Login.vue 3.01 KiB
Newer Older
  • Learn to ignore specific revisions
  • Bat's avatar
    Bat committed
      <div class="main pusher" v-title="'Log In'">
    
        <div class="ui vertical stripe segment">
          <div class="ui small text container">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            <h2>{{ $gettext('Log in to your Funkwhale account') }}</h2>
    
            <form class="ui form" @submit.prevent="submit()">
              <div v-if="error" class="ui negative message">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                <div class="header">{{ $gettext('We cannot log you in') }}</div>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                  <li v-if="error == 'invalid_credentials'">{{ $gettext('Please double-check your username/password couple is correct') }}</li>
                  <li v-else>{{ $gettext('An unknown error happend, this can mean the server is down or cannot be reached') }}</li>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                  {{ $gettext('Username or email') }} |
    
                  <router-link :to="{path: '/signup'}">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                    {{ $gettext('Create an account') }}
    
                  </router-link>
                </label>
    
                placeholder="Enter your username or email"
    
                v-model="credentials.username"
                >
              </div>
              <div class="field">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                  {{ $gettext('Password') }} |
    
                  <router-link :to="{name: 'auth.password-reset', query: {email: credentials.username}}">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                    {{ $gettext('Reset your password') }}
    
                  </router-link>
                </label>
                <password-input :index="2" required v-model="credentials.password" />
    
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              <button tabindex="3" :class="['ui', {'loading': isLoading}, 'right', 'floated', 'green', 'button']" type="submit">
                {{ $gettext('Login') }}
              </button>
    
    import PasswordInput from '@/components/forms/PasswordInput'
    
        next: {type: String, default: '/'}
    
      components: {
        PasswordInput
      },
    
      data () {
        return {
          // We need to initialize the component with any
          // properties that will be used in it
          credentials: {
            username: '',
            password: ''
          },
          error: '',
          isLoading: false
        }
      },
      mounted () {
        this.$refs.username.focus()
      },
      methods: {
        submit () {
          var self = this
          self.isLoading = true
          this.error = ''
          var credentials = {
            username: this.credentials.username,
            password: this.credentials.password
          }
    
          this.$store.dispatch('auth/login', {
            credentials,
    
            next: '/library',
            onError: error => {
              if (error.response.status === 400) {
    
                self.error = 'invalid_credentials'
              } else {
                self.error = 'unknown_error'
              }
    
            self.isLoading = false
          })
        }
      }
    
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>