Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <template lang="pug">
.container
OverlayLoadingLogo(animation="animate-in-compound")
p.explain
span.-mobile-only schoolsyst:
| Une application web tout-en-un pour gérer notes, devoirs, emploi du temps et bien plus encore.
wbr
a(href="https://schoolsyst.com/") En savoir plus
.register-link
p
| Pas de compte ?
ButtonNormal(smaller variant="outline" href="/register") Créez-en un
form(method="post" @submit.prevent="login({username, password}); submitted = true")
//TODO: social login
//TODO: remember username
InputField(
name="username"
v-model="username"
v-bind="{validation}"
tabindex="0"
no-action-button
) Nom
InputField(
type="password"
v-model="password"
v-bind="{validation}"
) Mot de passe
.forgotten-password
p
| Mot de passe oublié ?
nuxt-link(to="/reset-password/") Changez-le ici
|.
ButtonNormal(
variant="primary"
type="submit"
v-bind="{validation}"
).submit Connexion
TheFooter
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import TheHeading from '~/components/legacy/TheHeading.vue'
import OverlayLoadingLogo from '~/components/legacy/OverlayLoadingLogo.vue'
import ButtonNormal from '~/components/legacy/ButtonNormal.vue'
import InputField from '~/components/legacy/InputField.vue'
export default {
middleware: false,
layout: 'bare',
components: {
TheHeading,
OverlayLoadingLogo,
ButtonNormal,
InputField,
},
data() {
return {
username: '',
password: '',
email: '',
error: null,
submitted: false,
}
},
computed: {
validation() {
return this.validateLogin()(this)
},
},
methods: {
...mapGetters('auth', ['validateLogin']),
...mapActions('auth', ['login']),
},
}
</script>
<style lang="sass" scoped>
@import '~/assets/defaults'
.container
min-height: 100vh
width: 100vw
display: flex
align-items: center
justify-content: center
flex-direction: column
text-align: center
padding-bottom: 2.5em
.register-link
margin-bottom: 4em
.forgotten-password
margin-top: 0em
.submit
margin-top: 3em
.explain
margin-top: -1em
margin-bottom: 3em
max-width: 700px
@media (min-width: 500px)
.explain .-mobile-only
display: none
</style>
|