Skip to content

Commit 63196e6

Browse files
sylvainrayesylvainraye
committed
Issue #11: Disable username on frontend (except checkout - still some work about it)
1 parent 0dc31c8 commit 63196e6

File tree

9 files changed

+276
-7
lines changed

9 files changed

+276
-7
lines changed

‎Block/Widget/Username.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ public function _construct()
8585
*/
8686
public function isEnabled()
8787
{
88-
return ($this->_getAttribute('username') ? (bool)$this->_getAttribute('username')->isVisible() : false);
88+
return $this->usernameHelper->isEnabled() && ($this->_getAttribute('username') ? (bool)$this->_getAttribute('username')->isVisible() : false);
8989
}
9090

9191
/**

‎Helper/Customer.php

+9
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
*/
2222
class Customer extends \Magento\Framework\App\Helper\AbstractHelper
2323
{
24+
const CFG_ENABLED = 'username/general/enabled';
2425
const CFG_FRONTEND = 'username/general/frontend';
2526
const CFG_INPUT_VALIDATION = 'username/general/input_validation';
2627
const CFG_CASE_SENSITIVE = 'username/general/case_sensitive';
@@ -111,6 +112,14 @@ public function isEditableOnFrontend()
111112
return $this->config->isSetFlag(self::CFG_FRONTEND);
112113
}
113114

115+
/**
116+
* @return bool
117+
*/
118+
public function isEnabled()
119+
{
120+
return $this->config->isSetFlag(self::CFG_ENABLED);
121+
}
122+
114123
/**
115124
* @return bool
116125
*/

‎etc/adminhtml/system.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<field id="input_validation" type="select" translate="label comment" sortOrder="50" showInDefault="1">
4343
<label>Input Validation</label>
4444
<source_model>Diglin\Username\Model\Config\Source\Inputvalidation</source_model>
45-
<comment><![CDATA[What kind of username do you want to accept? You can set the value 'Default' which accept letters, digits and the special characters '_-' ]]></comment>
45+
<comment><![CDATA[What kind of username do you want to accept? You can set the value 'Default' which accept letters, digits and the special characters '_-'. Be aware that once the setting is defined and username are created, you MUST not change this setting.]]></comment>
4646
</field>
4747

4848
<field id="input_validation_custom" type="text" translate="label comment" sortOrder="60" showInDefault="1">

‎view/frontend/requirejs-config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var config = {
2+
map: {
3+
'*': {
4+
'Magento_Checkout/template/authentication.html':
5+
'Diglin_Username/template/authentication.html'
6+
//'Magento_Checkout/form/element/email':
7+
// 'Diglin_Username/form/element/email',
8+
//'Magento_Checkout/form/element/email.html':
9+
// 'Diglin_Username/form/element/email.html'
10+
}
11+
}
12+
};

‎view/frontend/templates/form/forgotpassword.phtml

+12-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@
88

99
// @codingStandardsIgnoreFile
1010

11+
$usernameLabel = __('Email');
12+
$usernameInputType = 'email';
13+
$usernameInputValidation = ", 'validate-email':true";
14+
15+
if ($this->helper('\Diglin\Username\Helper\Customer')->isEnabled()) {
16+
$usernameLabel = __('Email/Username');
17+
$usernameInputType = 'text';
18+
$usernameInputValidation = "";
19+
}
20+
1121
?>
1222
<form class="form password forget"
1323
action="<?php /* @escapeNotVerified */ echo $block->getUrl('*/*/forgotpasswordpost') ?>"
@@ -17,9 +27,9 @@
1727
<fieldset class="fieldset" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
1828
<div class="field note"><?php /* @escapeNotVerified */ echo __('Please enter your email address or your username below to receive a password reset link.'); ?></div>
1929
<div class="field email required">
20-
<label for="email_address" class="label"><span><?php /* @escapeNotVerified */ echo __('Email or Username') ?></span></label>
30+
<label for="email_address" class="label"><span><?php /* @escapeNotVerified */ echo $usernameLabel ?></span></label>
2131
<div class="control">
22-
<input type="text" name="email" alt="email" id="email_address" class="input-text" value="<?php echo $block->escapeHtml($block->getEmailValue()) ?>" data-validate="{required:true}">
32+
<input type="<?php echo $usernameInputType; ?>" name="email" alt="email" id="email_address" class="input-text" value="<?php echo $block->escapeHtml($block->getEmailValue()) ?>" data-validate="{required:true<?php echo $usernameInputValidation; ?>}">
2333
</div>
2434
</div>
2535
<?php echo $block->getChildHtml('form_additional_info'); ?>

‎view/frontend/templates/form/login.phtml

+13-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,17 @@
1515
* @see \Magento\Customer\Block\Form\Login
1616
* @var $block \Magento\Customer\Block\Form\Login
1717
*/
18+
19+
$usernameLabel = __('Email');
20+
$usernameInputType = 'email';
21+
$usernameInputValidation = ", 'validate-email':true";
22+
23+
if ($this->helper('\Diglin\Username\Helper\Customer')->isEnabled()) {
24+
$usernameLabel = __('Email/Username');
25+
$usernameInputType = 'text';
26+
$usernameInputValidation = "";
27+
}
28+
1829
?>
1930
<div class="block block-customer-login">
2031
<div class="block-title">
@@ -30,9 +41,9 @@
3041
<fieldset class="fieldset login" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
3142
<div class="field note"><?php /* @escapeNotVerified */ echo __('If you have an account, sign in with your email address.') ?></div>
3243
<div class="field email required">
33-
<label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email/Username') ?></span></label>
44+
<label class="label" for="email"><span><?php /* @escapeNotVerified */ echo $usernameLabel ?></span></label>
3445
<div class="control">
35-
<input name="login[username]" value="<?php echo $block->escapeHtml($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) :?> autocomplete="off"<?php endif; ?> id="email" type="text" class="input-text" title="<?php /* @escapeNotVerified */ echo __('Email/Username') ?>" data-validate="{required:true}">
46+
<input name="login[username]" value="<?php echo $block->escapeHtml($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) :?> autocomplete="off"<?php endif; ?> id="email" type="<?php echo $usernameInputType; ?>" class="input-text" title="<?php /* @escapeNotVerified */ echo $usernameLabel ?>" data-validate="{required:true<?php echo $usernameInputValidation; ?>}">
3647
</div>
3748
</div>
3849
<div class="field password required">

‎view/frontend/templates/form/register.phtml

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</div>
3131
</div>
3232
<?php $_username = $block->getLayout()->createBlock('Diglin\Username\Block\Widget\Username') ?>
33-
<?php if ($_username->isEnabled()): ?>
33+
<?php if ($_username->isEnabled() && $_username->isEditable()): ?>
3434
<?php echo $_username
3535
->setUsername($block->getFormData()->getUsername())
3636
->setObject($block->getFormData())

‎view/frontend/web/js/view/form/element/email.js

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/**
2+
* Copyright © 2016 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
/*browser:true*/
6+
/*global define*/
7+
define([
8+
'jquery',
9+
'uiComponent',
10+
'ko',
11+
'Magento_Customer/js/model/customer',
12+
'Magento_Customer/js/action/check-email-availability',
13+
'Magento_Customer/js/action/login',
14+
'Magento_Checkout/js/model/quote',
15+
'Magento_Checkout/js/checkout-data',
16+
'Magento_Checkout/js/model/full-screen-loader',
17+
'mage/validation'
18+
], function ($, Component, ko, customer, checkEmailAvailability, loginAction, quote, checkoutData, fullScreenLoader) {
19+
'use strict';
20+
21+
var validatedEmail = checkoutData.getValidatedEmailValue();
22+
23+
if (validatedEmail && !customer.isLoggedIn()) {
24+
quote.guestEmail = validatedEmail;
25+
}
26+
27+
return Component.extend({
28+
defaults: {
29+
template: 'Diglin_Username/form/element/email',
30+
email: checkoutData.getInputFieldEmailValue(),
31+
emailFocused: false,
32+
isLoading: false,
33+
isPasswordVisible: false,
34+
listens: {
35+
email: 'emailHasChanged',
36+
emailFocused: 'validateEmail'
37+
}
38+
},
39+
checkDelay: 2000,
40+
checkRequest: null,
41+
isEmailCheckComplete: null,
42+
isCustomerLoggedIn: customer.isLoggedIn,
43+
forgotPasswordUrl: window.checkoutConfig.forgotPasswordUrl,
44+
emailCheckTimeout: 0,
45+
46+
/**
47+
* Initializes observable properties of instance
48+
*
49+
* @returns {Object} Chainable.
50+
*/
51+
initObservable: function () {
52+
this._super()
53+
.observe(['email', 'emailFocused', 'isLoading', 'isPasswordVisible']);
54+
55+
return this;
56+
},
57+
58+
/**
59+
* Callback on changing email property
60+
*/
61+
emailHasChanged: function () {
62+
var self = this;
63+
64+
clearTimeout(this.emailCheckTimeout);
65+
66+
if (self.validateEmail()) {
67+
quote.guestEmail = self.email();
68+
checkoutData.setValidatedEmailValue(self.email());
69+
}
70+
this.emailCheckTimeout = setTimeout(function () {
71+
if (self.validateEmail()) {
72+
self.checkEmailAvailability();
73+
} else {
74+
self.isPasswordVisible(false);
75+
}
76+
}, self.checkDelay);
77+
78+
checkoutData.setInputFieldEmailValue(self.email());
79+
},
80+
81+
/**
82+
* Check email existing.
83+
*/
84+
checkEmailAvailability: function () {
85+
var self = this;
86+
this.validateRequest();
87+
this.isEmailCheckComplete = $.Deferred();
88+
this.isLoading(true);
89+
this.checkRequest = checkEmailAvailability(this.isEmailCheckComplete, this.email());
90+
91+
$.when(this.isEmailCheckComplete).done(function () {
92+
self.isPasswordVisible(false);
93+
}).fail(function () {
94+
self.isPasswordVisible(true);
95+
}).always(function () {
96+
self.isLoading(false);
97+
});
98+
},
99+
100+
/**
101+
* If request has been sent -> abort it.
102+
* ReadyStates for request aborting:
103+
* 1 - The request has been set up
104+
* 2 - The request has been sent
105+
* 3 - The request is in process
106+
*/
107+
validateRequest: function () {
108+
if (this.checkRequest != null && $.inArray(this.checkRequest.readyState, [1, 2, 3])) {
109+
this.checkRequest.abort();
110+
this.checkRequest = null;
111+
}
112+
},
113+
114+
/**
115+
* Local email validation.
116+
*
117+
* @param {Boolean} focused - input focus.
118+
* @returns {Boolean} - validation result.
119+
*/
120+
validateEmail: function (focused) {
121+
var loginFormSelector = 'form[data-role=email-with-possible-login]',
122+
usernameSelector = loginFormSelector + ' input[name=username]',
123+
loginForm = $(loginFormSelector),
124+
validator;
125+
126+
loginForm.validation();
127+
128+
if (focused === false && !!this.email()) {
129+
return !!$(usernameSelector).valid();
130+
}
131+
132+
validator = loginForm.validate();
133+
134+
return validator.check(usernameSelector);
135+
},
136+
137+
/**
138+
* Log in form submitting callback.
139+
*
140+
* @param {HTMLElement} loginForm - form element.
141+
*/
142+
login: function (loginForm) {
143+
var loginData = {},
144+
formDataArray = $(loginForm).serializeArray();
145+
146+
formDataArray.forEach(function (entry) {
147+
loginData[entry.name] = entry.value;
148+
});
149+
150+
if (this.isPasswordVisible() && $(loginForm).validation() && $(loginForm).validation('isValid')) {
151+
fullScreenLoader.startLoader();
152+
loginAction(loginData).always(function() {
153+
fullScreenLoader.stopLoader();
154+
});
155+
}
156+
}
157+
});
158+
});

‎view/frontend/web/template/form/element/email.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!--
2+
/**
3+
* Copyright © 2016 Magento. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
<!-- ko ifnot: isCustomerLoggedIn() -->
8+
9+
<!-- ko foreach: getRegion('before-login-form') -->
10+
<!-- ko template: getTemplate() --><!-- /ko -->
11+
<!-- /ko -->
12+
<form class="form form-login" data-role="email-with-possible-login"
13+
data-bind="submit:login"
14+
method="post">
15+
<fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
16+
<div class="field required">
17+
<label class="label" for="customer-email">
18+
<span data-bind="i18n: 'Email Address / Username'"></span>
19+
</label>
20+
<div class="control _with-tooltip">
21+
<input class="input-text"
22+
type="text"
23+
data-bind="
24+
textInput: email,
25+
hasFocus: emailFocused"
26+
name="username"
27+
data-validate="{required:true}"
28+
id="customer-email" />
29+
<!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
30+
<span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
31+
</div>
32+
</div>
33+
34+
<!--Hidden fields -->
35+
<fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
36+
<div class="field">
37+
<label class="label" for="customer-password">
38+
<span data-bind="i18n: 'Password'"></span>
39+
</label>
40+
<div class="control">
41+
<input class="input-text"
42+
placeholder="optional"
43+
type="password"
44+
name="password"
45+
id="customer-password"
46+
data-validate="{required:true}" autocomplete="off"/>
47+
<span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'"></span>
48+
</div>
49+
50+
</div>
51+
<!-- ko foreach: getRegion('additional-login-form-fields') -->
52+
<!-- ko template: getTemplate() --><!-- /ko -->
53+
<!-- /ko -->
54+
<div class="actions-toolbar">
55+
<input name="context" type="hidden" value="checkout" />
56+
<div class="primary">
57+
<button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Login'"></span></button>
58+
</div>
59+
<div class="secondary">
60+
<a class="action remind" data-bind="attr: { href: forgotPasswordUrl }">
61+
<span data-bind="i18n: 'Forgot Your Password?'"></span>
62+
</a>
63+
</div>
64+
</div>
65+
</fieldset>
66+
<!--Hidden fields -->
67+
</fieldset>
68+
</form>
69+
<!-- /ko -->

0 commit comments

Comments
 (0)