Skip to content
Snippets Groups Projects
Login.vue 4.04 KiB
Newer Older
  • Learn to ignore specific revisions
  •   <main class="main pusher" v-title="labels.title">
        <section class="ui vertical stripe segment">
    
            <h2><translate :translate-context="'Content/Login/Title/Verb'">Log in to your Funkwhale account</translate></h2>
    
            <form class="ui form" @submit.prevent="submit()">
              <div v-if="error" class="ui negative message">
    
                <div class="header"><translate :translate-context="'Content/Login/Error message.Title'">We cannot log you in</translate></div>
    
                  <li v-if="error == 'invalid_credentials'"><translate :translate-context="'Content/Login/Error message.List item/Call to action'">Please double-check your username/password couple is correct</translate></li>
                  <li v-else><translate :translate-context="'Content/Login/Error message/List item'">An unknown error happend, this can mean the server is down or cannot be reached</translate></li>
    
                  <translate :translate-context="'Content/Login/Input.Label/Noun'">Username or email</translate> |
    
                  <router-link :to="{path: '/signup'}">
    
                    <translate :translate-context="'Content/Login/Link/Verb'">Create an account</translate>
    
                  </router-link>
                </label>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                :placeholder="labels.usernamePlaceholder"
    
                v-model="credentials.username"
                >
              </div>
              <div class="field">
    
                  <translate :translate-context="'Content/Login/Input.Label'">Password</translate> |
    
                  <router-link :to="{name: 'auth.password-reset', query: {email: credentials.username}}">
    
                    <translate :translate-context="'Content/Login/Link/Verb'">Reset your password</translate>
    
                  </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">
    
                 <translate :translate-context="'Content/Login/Button.Label/Verb'">Login</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              </button>
    
    import PasswordInput from "@/components/forms/PasswordInput"
    
        next: { type: String, default: "/library" }
    
      components: {
        PasswordInput
      },
    
        return {
          // We need to initialize the component with any
          // properties that will be used in it
          credentials: {
    
      created () {
        if (this.$store.state.auth.authenticated) {
          this.$router.push(this.next)
        }
      },
    
    Eliot Berriot's avatar
    Eliot Berriot committed
      computed: {
    
          let usernamePlaceholder = this.$pgettext('Content/Login/Input.Placeholder', "Enter your username or email")
          let title = this.$pgettext('Head/Login/Title', "Log In")
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          return {
            usernamePlaceholder,
            title
          }
        }
      },
    
          var credentials = {
            username: this.credentials.username,
            password: this.credentials.password
          }
    
          console.log('NEXT', this.next)
    
          this.$store
            .dispatch("auth/login", {
              credentials,
    
              onError: error => {
                if (error.response.status === 400) {
                  self.error = "invalid_credentials"
                } else {
                  self.error = "unknown_error"
                }
    
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>