bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

handeled login or register from a modal, YES git status

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-10-07 15:54:03 +02:00
parent 8b3c31c0f5
commit d5a6194727
25 changed files with 398 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/modules/custom/materio_user/materio_user.module
View File

@@ -30,6 +30,67 @@ function materio_user_form_user_login_form_alter(&$form, FormStateInterface $for
}
function materio_user_form_user_modal_form_alter(&$form, FormStateInterface $form_state, $form_id) {
// Drupal::logger('materio_user')->notice(print_r($form['mail'], true));
// ksm($form);
$form['account']['mail']['#attributes'] = array(
"v-model" => "mail",
"@keyup.enter" => "register",
"placeholder" => $form['account']['mail']['#title'],
"title" => $form['account']['mail']['#description']
);
// https://drupal.stackexchange.com/a/217112
// Get default process function array:
$element_info = element_info('password_confirm');
$process = $element_info['#process'];
// Add our process function to the array:
$process[] = '_materio_user_process_password_confirm';
$form['account']['pass']['#process'] = $process;
$form['actions']['submit']['#attributes'] = array(
"@click.prevent" => "register",
"@keyup.enter" => "register"
);
}
function _materio_user_process_password_confirm($element){
// ksm($element);
$element['pass1']['#attributes'] += array(
"v-model" => "pass1",
"placeholder" => $element['pass1']['#title']
);
$element['pass2']['#attributes'] += array(
"v-model" => "pass2",
"placeholder" => $element['pass2']['#title']
);
return $element;
}
/**
* Returns HTML for a form element.
* Prepares variables for form element templates.
*
* Default template: form-element.html.twig.
*
* @param array $variables
* An associative array containing:
* - element: An associative array containing the properties of the element.
* Properties used: #title, #title_display, #description, #id, #required,
* #children, #type, #name, #label_for.
*/
// function materio_user_preprocess_form_element(&$vars) {
// $element = $vars['element'];
// if($element['#type'] == 'password' && $element['#array_parents'][0] == 'account'){
// ksm($vars);
// // $vars['attributes']['placeholder'] = $element['#title'];
// $vars['element']['#attributes']['placeholder'] = $element['#title'];
// }
// }
/**
* implements hook_block_view_BASE_BLOCK_ID_alter()
*
@@ -55,3 +116,8 @@ function _materio_user_user_login_block_pre_render(array $build){
));
return $build;
}
function materio_user_entity_type_build(array &$entity_types) {
// https://drupal.stackexchange.com/a/230547
$entity_types['user']->setFormClass('modal', 'Drupal\user\RegisterForm');
}

11
web/modules/custom/materio_user/src/Controller/AjaxRegisterForm.php
View File

@@ -44,12 +44,13 @@ class AjaxRegisterForm extends ControllerBase {
}
private function getFormDefinition(){
// $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
// \Drupal::logger('materio_user')->notice($language);
// $this->form_builded = $this->formBuilder->getForm('Drupal\user\Form\UserLoginForm');
$entity = \Drupal::entityTypeManager()->getStorage('user')->create(array());
// http://web-tricks.org/content/how-render-user-login-form-and-user-register-form-drupal-8
$entity = \Drupal::entityTypeManager()
->getStorage('user')
->create(array());
// to use modal form display see materio_user_entity_type_build()
$formObject = \Drupal::entityTypeManager()
->getFormObject('user', 'register')
->getFormObject('user', 'modal')
->setEntity($entity);
$this->form_builded = $this->formBuilder()->getForm($formObject);
}

13
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -40,6 +40,19 @@ div.description[data-v-7bb795f8] {
display: none;
}
.form-type-email[data-v-2acc57a0],
.form-type-password-confirm[data-v-2acc57a0] {
max-width: 30%;
margin: 0;
}
input[data-v-2acc57a0] {
box-sizing: content-box;
max-width: 100%;
}
label[data-v-2acc57a0],
div.description[data-v-2acc57a0] {
display: none;
}
fieldset[data-v-340aa566] {
padding: 0;

6
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

15
web/themes/custom/materiotheme/templates/form/form.html.twig Normal file
View File

@@ -0,0 +1,15 @@
{#
/**
* @file
* Theme override for a 'form' element.
*
* Available variables
* - attributes: A list of HTML attributes for the wrapper element.
* - children: The child elements of the form.
*
* @see template_preprocess_form()
*/
#}
<form{{ attributes }}>
{{ children }}
</form>

4
web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.vue
View File

@@ -16,8 +16,8 @@ export default {
userLogin: 'User/userLogin'
}),
getLoginForm(){
// Form through ajax is provided by materio_user custom module
// vuejs attributes a inserted by template in theme level
// 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/login_form`)
.then(({data}) => {
console.log("getLoginForm data");

77
web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue
View File

@@ -7,20 +7,21 @@ import { MA } from 'vuejs/api/ma-axios'
export default {
name: "RegisterForm",
data: () => ({
form:null,
mail:null,
password:null
form: null,
mail: null,
pass1: null,
pass2: null
}),
methods: {
...mapActions({
userRegister: 'User/userRegister'
}),
getRegisterForm(){
// Form through ajax is provided by materio_user custom module
// vuejs attributes a inserted by template in theme level
// 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");
console.log("getRegisterForm data", data);
this.form = Vue.compile(data.rendered)
this.$options.staticRenderFns = [];
this._staticTrees = [];
@@ -30,19 +31,27 @@ export default {
console.warn('Issue with getRegisterForm', error)
})
},
// login () {
// this.userLogin({
// mail: this.mail,
// pass: this.password
// }).then( () => {
// console.log('logedin from login component');
// this.$emit('onLogedIn')
// }
// ).catch(( error ) => {
// console.warn('Issue with login from login component', error)
// Promise.reject(error)
// })
// }
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){
@@ -67,20 +76,18 @@ export default {
</script>
<style lang="scss" scoped>
// .form-item,
// .form-actions{
// display:inline-block;
// max-width:30%;
// margin:0;
// }
// input{
// box-sizing:content-box;
// max-width:100%;
// }
// div.description{
// display:none;
// }
// .form-item-persistent-login{
// display:none;
// }
.form-type-email,
.form-type-password-confirm{
// display:inline-block;
max-width:30%;
margin:0;
}
input{
box-sizing:content-box;
max-width:100%;
}
label,
div.description{
display:none;
}
</style>

5
web/themes/custom/materiotheme/vuejs/store/modules/user.js
View File

@@ -81,7 +81,10 @@ export default {
REST.post('/user/register?_format=json', credentials)
.then(({ data }) => {
console.log('user REST registered', data);
resolve()
dispatch('userLogin', credentials)
.then(() => {
resolve()
})
})
.catch(( error ) => {
console.warn('Issue with register', error)