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 109 110 111 112 113 114 115 116 117 118 119 120 121 | <template>
<main id="login-container"
class="d-lg-flex flex-column bg-white align-items-center px-4 px-sm-5 px-md-6 px-lg-5 py-4 my-4 my-md-5 my-lg-6 mx-auto">
<form-text
:title="'AUTENTIFICARE' /* title text */"
:subtitle="'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt' /* subtitle text */">
</form-text>
<form-comp
:formSpecs="{
fields: getFields, // form fields
task: 'adminLogin', // specifies what form fields to use from the vuex store
submitText: 'Autentificare', // submit button text
checkboxLabel: null // checkbox label
}"
@submit="submitLogin"/>
<!-- <div class="login-bottom-text d-flex justify-content-center">-->
<!-- <span>Nu ai cont?</span>-->
<!-- <nuxt-link id="cont-nou" to="/register">Cont NOU</nuxt-link>-->
<!-- </div>-->
</main>
</template>
<script>
import formComp from '../../components/utilities/form-utils/form-comp.vue';
import formText from '../../components/utilities/form-utils/form-text.vue';
import {mapActions, mapGetters, mapMutations} from 'vuex';
export default {
components: {formComp, formText},
layout: 'dashboard',
auth: 'guest',
computed: {
...mapGetters({
getFields: 'adminLoginFields'
})
},
methods: {
...mapActions(['adminLogin']),
...mapMutations(['changeError', 'resetInputState']),
/**
* Dispatches the login action when the submit button is clicked
* @see submitLogin
* @return void
*/
async submitLogin() {
await this.adminLogin();
}
},
/**
* Resets the error and the fields for the login form when the page is destroyed
* @see destroyed
* @return void
*/
destroyed() {
this.resetInputState({task: 'adminLogin'});
this.changeError('');
}
}
</script>
<style lang="scss" scoped>
#login-container {
width: 50%;
border-radius: 10px;
box-shadow: 0 0 8px -1px rgb(0 0 0 / 80%);
}
//#cont-nou {
// color: rgb(154, 117, 63);
// margin-left: 0.2vw;
//}
//
//.login-bottom-text {
// font-size: 1vw;
//}
@media screen and #{$ipad-pro-portrait-breakpoint},
screen and #{$ipad-landscape-breakpoint} {
#login-container {
width: 90%;
padding-left: $spacer * 8 !important;
padding-right: $spacer * 8 !important;
}
//.login-bottom-text {
// font-size: 3vw;
//}
}
@media screen and #{$ipad-pro-landscape-breakpoint} {
#login-container {
width: 90%;
padding-left: $spacer * 11 !important;
padding-right: $spacer * 11 !important;
}
//.login-bottom-text {
// font-size: 3vw;
//}
}
@include media-breakpoint-down(lg) {
#login-container {
width: 90%;
}
//.login-bottom-text {
// font-size: 3vw;
//}
}
//@include media-breakpoint-down(xssm) {
//
// .login-bottom-text {
// font-size: 4vw;
// }
//}
</style>
|