123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- <script>
- import Vue from 'vue'
- import { mapState, mapActions } from 'vuex'
- import { MA } from 'vuejs/api/ma-axios'
- import passwordStrength from 'check-password-strength'
- export default {
- name: "RegisterForm",
- data: () => ({
- form: null,
- mail: null,
- pass1: null,
- pass2: null,
- ps: ""
- }),
- computed: {
- psswd_class: function(){
- return this.ps.toLowerCase()
- },
- can_register: function() {
- if (this.ps === "Strong") {
- return 'can-register'
- }
- return ''
- }
- },
- methods: {
- ...mapActions({
- userRegister: 'User/userRegister'
- }),
- getRegisterForm(){
- // Form through ajax is provided by materio_user drupal custom module
- // vuejs attributes a inserted by form alter in same module
- MA.get(`/materio_user/register_form`)
- .then(({data}) => {
- console.log("getRegisterForm data", data);
- this.form = Vue.compile(data.rendered)
- this.$options.staticRenderFns = [];
- this._staticTrees = [];
- this.form.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
- })
- .catch(( error ) => {
- console.warn('Issue with getRegisterForm', error)
- })
- },
- checkSubmitEnabled () {
- if(this.ps === 'Strong'){
- this.$refs.register.disabled = false
- }else{
- this.$refs.register.disabled = true
- }
- },
- register () {
- console.log('register', this.mail, this.pass1, this.pass2);
- // TODO: check for identical password
- // TODO: check for valide email
- // TODO: check for unique email
- if(this.pass1 === this.pass2){
- this.userRegister({
- name: this.mail,
- mail: this.mail,
- pass: this.pass1
- }).then( () => {
- console.log('registered from register component');
- this.$emit('onRegistered')
- }
- ).catch(( error ) => {
- console.warn('Issue with register from registerform component', error)
- Promise.reject(error)
- })
- }
- }
- },
- beforeMount () {
- if(!this.form){
- this.getRegisterForm()
- }
- },
- mounted(){
- // console.log('LoginBlock mounted');
- Drupal.attachBehaviors(this.$el);
- this.checkSubmitEnabled()
- },
- render(h) {
- // console.log('LoginBlock render');
- if(!this.form){
- // console.log('LoginBlock render NAN');
- return h('span', 'Loading ...')
- }else{
- // console.log('LoginBlock render template');
- return this.form.render.call(this)
- }
- },
- watch: {
- pass1: function(n, o){
- if(n){
- this.ps = passwordStrength(n).value
- console.log('watch pass1 n', n, 'ps :', this.ps)
- this.checkSubmitEnabled()
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .form-type-email,
- .form-type-password-confirm{
- // display:inline-block;
- max-width:30%;
- margin:0;
- }
- .form-type-password input{
- &.weak {
- border-width: 2px;
- border-color: red!important;
- &:focus{
- outline:none;
- }
- }
- &.medium {
- border-width: 2px;
- border-color: orange!important;
- &:focus{
- outline:none;
- }
- }
- &.strong {
- border-width: 2px;
- border-color: green!important;
- &:focus{
- outline:none;
- }
- }
- }
- input{
- box-sizing:content-box;
- max-width:100%;
- }
- // input#edit-submit{
- //
- // }
- label,
- div.description{
- display:none;
- }
- </style>
|