Merge pull request #286 from nextcloud/improve-registration-submission-form

Improve registration submission form

.eslintrc.js

@@ -1,5 +1,8 @@
 module.exports = {
 	extends: [
 		'@nextcloud'
-	]
+	],
+	globals: {
+		'$': true
+	}
 };

.gitattributes

@@ -1,2 +1,2 @@
-/js/registration-settings.js binary
+/js/*.js binary
-/js/registration-settings.js.map binary
+/js/*.js.map binary

.l10nignore

@@ -1,3 +1,2 @@
 # compiled vue templates
-js/registration-settings.js
+js/
-js/registration-settings.js.map

js/form.js

@@ -1,14 +0,0 @@
-// var instead of let/const for better older browsers compatibility
-var passwordTextField;
-function togglePasswordTextFieldVisibility() {
-    if (passwordTextField.attr('type') == "password") {
-        passwordTextField.attr('type', 'text');
-    } else {
-        passwordTextField.attr('type', 'password');
-    }
-}
-
-$(document).ready(function() {
-    passwordTextField = $("#password");
-    $("#showadminpass").click(togglePasswordTextFieldVisibility);
-});

js/registration-form.js

@@ -0,0 +1,2 @@
+!function(){"use strict";document.addEventListener("DOMContentLoaded",(function(){var i=this;$("#showadminpass").click((function(){var t=$("#password");"password"===t.attr("type")?t.attr("type","text"):t.attr("type","password")})),$("form").submit((function(){$(i).find(":submit").attr("disabled","disabled"),$(i).find(":submit")[0].value=t("registration","Loading …")}))}))}();
+//# sourceMappingURL=registration-form.js.map?v=9934ad4775c110e9376d

js/registration-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://registration/./src/form.js"],"names":["document","addEventListener","$","click","passwordTextField","attr","submit","find","value","t"],"mappings":"yBAAAA,SAASC,iBAAiB,oBAAoB,WAAW,WAExDC,EAAE,kBAAkBC,OAAM,WACzB,IAAMC,EAAoBF,EAAE,aACW,aAAnCE,EAAkBC,KAAK,QAC1BD,EAAkBC,KAAK,OAAQ,QAE/BD,EAAkBC,KAAK,OAAQ,eAKjCH,EAAE,QAAQI,QAAO,WAEhBJ,EAAE,GAAMK,KAAK,WAAWF,KAAK,WAAY,YACzCH,EAAE,GAAMK,KAAK,WAAW,GAAGC,MAAQC,EAAE,eAAgB,mB","file":"registration-form.js?v=9934ad4775c110e9376d","sourcesContent":["document.addEventListener('DOMContentLoaded', function() {\n\t// Password toggle\n\t$('#showadminpass').click(() => {\n\t\tconst passwordTextField = $('#password')\n\t\tif (passwordTextField.attr('type') === 'password') {\n\t\t\tpasswordTextField.attr('type', 'text')\n\t\t} else {\n\t\t\tpasswordTextField.attr('type', 'password')\n\t\t}\n\t})\n\n\t// Disable submit after first click\n\t$('form').submit(() => {\n\t\t// prevent duplicate form submissions\n\t\t$(this).find(':submit').attr('disabled', 'disabled')\n\t\t$(this).find(':submit')[0].value = t('registration', 'Loading …')\n\t})\n})\n"],"sourceRoot":""}

lib/Controller/RegisterController.php

@@ -236,8 +236,10 @@ class RegisterController extends Controller {
 			'loginname' => $loginname,
 			'fullname' => $fullname,
 			'show_fullname' => $this->config->getAppValue('registration', 'show_fullname', 'no') === 'yes',
+			'enforce_fullname' => $this->config->getAppValue('registration', 'enforce_fullname', 'no') === 'yes',
 			'phone' => $phone,
 			'show_phone' => $this->config->getAppValue('registration', 'show_phone', 'no') === 'yes',
+			'enforce_phone' => $this->config->getAppValue('registration', 'enforce_phone', 'no') === 'yes',
 			'message' => $message,
 			'password' => $password,
 			'additional_hint' => $additional_hint,

package-lock.json

@@ -1084,6 +1084,12 @@
 				}
 			}
 		},
+		"@nextcloud/browserslist-config": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/browserslist-config/-/browserslist-config-1.0.0.tgz",
+			"integrity": "sha512-f+sKpdLZXkODV+OY39K1M+Spmd4RgxmtEXmNn4Bviv4R7uBFHXuw+JX9ZdfDeOryfHjJ/TRQxQEp0GMpBwZFUw==",
+			"dev": true
+		},
 		"@nextcloud/capabilities": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@nextcloud/capabilities/-/capabilities-1.0.2.tgz",

package.json

@@ -3,7 +3,6 @@
 	"version": "1.0.0",
 	"description": "",
 	"license": "AGPL-3.0-or-later",
-	"main": "main.js",
 	"scripts": {
 		"build": "NODE_ENV=production webpack --progress --config webpack.js",
 		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
@@ -25,6 +24,7 @@
 	"devDependencies": {
 		"@babel/eslint-parser": "^7.13.14",
 		"@nextcloud/babel-config": "^1.0.0-beta.0",
+		"@nextcloud/browserslist-config": "^1.0.0",
 		"@nextcloud/eslint-config": "^5.0.0",
 		"@nextcloud/eslint-plugin": "^2.0.0",
 		"@nextcloud/webpack-vue-config": "^4.0.1",
@@ -51,5 +51,8 @@
 		"vue-template-compiler": "^2.6.12",
 		"webpack": "^5.28.0",
 		"webpack-cli": "^4.6.0"
-	}
+	},
+	"browserslist": [
+		"extends @nextcloud/browserslist-config"
+	]
 }

src/form.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+	// Password toggle
+	$('#showadminpass').click(() => {
+		const passwordTextField = $('#password')
+		if (passwordTextField.attr('type') === 'password') {
+			passwordTextField.attr('type', 'text')
+		} else {
+			passwordTextField.attr('type', 'password')
+		}
+	})
+
+	// Disable submit after first click
+	$('form').submit(() => {
+		// prevent duplicate form submissions
+		$(this).find(':submit').attr('disabled', 'disabled')
+		$(this).find(':submit')[0].value = t('registration', 'Loading …')
+	})
+})

templates/form/email.php

@@ -2,6 +2,7 @@
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
 style('registration', 'style');
+script('registration', 'registration-form');
 ?>
 	<form action="" method="post">
 		<fieldset>

templates/form/user.php

@@ -2,7 +2,7 @@
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
 style('registration', 'style');
-script('registration', 'form');
+script('registration', 'registration-form');
 ?><form action="" method="post">
 	<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
 	<fieldset>
@@ -33,7 +33,7 @@ script('registration', 'form');
 			<p class="groupmiddle">
 				<input type="text" name="loginname" id="loginname" value="<?php if (!empty($_['loginname'])) {
 	p($_['loginname']);
-} ?>" placeholder="<?php p($l->t('Login name')); ?>" />
+} ?>" placeholder="<?php p($l->t('Login name')); ?>" required />
 				<label for="loginname" class="infield"><?php p($l->t('Login name')); ?></label>
 				<img id="loginname-icon" class="svg" src="<?php print_unescaped(image_path('', 'categories/auth.svg')); ?>" alt=""/>
 			</p>
@@ -45,7 +45,9 @@ script('registration', 'form');
 		<p class="groupmiddle">
 			<input type="text" name="fullname" id="fullname" value="<?php if (!empty($_['fullname'])) {
 	p($_['fullname']);
-} ?>" placeholder="<?php p($l->t('Full name')); ?>" />
+} ?>" placeholder="<?php p($l->t('Full name')); ?>" <?php if ($_['enforce_fullname']) {
+	p('required');
+} ?> />
 			<label for="fullname" class="infield"><?php p($l->t('Full name')); ?></label>
 			<img id="fullname-icon" class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
 		</p>
@@ -57,7 +59,9 @@ script('registration', 'form');
 			<p class="groupmiddle">
 				<input type="text" name="phone" id="phone" value="<?php if (!empty($_['phone'])) {
 	p($_['phone']);
-} ?>" placeholder="<?php p($l->t('Phone number')); ?>" />
+} ?>" placeholder="<?php p($l->t('Phone number')); ?>" <?php if ($_['enforce_phone']) {
+	p('required');
+} ?> />
 				<label for="phone" class="infield"><?php p($l->t('Phone number')); ?></label>
 				<img id="phone-icon" class="svg" src="<?php print_unescaped(image_path('', 'clients/phone.svg')); ?>" alt=""/>
 			</p>
@@ -68,7 +72,7 @@ script('registration', 'form');
 		<p class="groupbottom">
 			<input type="password" name="password" id="password" value="<?php if (!empty($_['password'])) {
 	p($_['password']);
-} ?>" placeholder="<?php p($l->t('Password')); ?>"/>
+} ?>" placeholder="<?php p($l->t('Password')); ?>" required />
 			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
 			<img id="password-icon" class="svg" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
 			<a id="showadminpass" href="#" class="toggle-password">

templates/form/verification.php

@@ -2,6 +2,7 @@
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
 style('registration', 'style');
+script('registration', 'registration-form');
 ?>
 	<form action="" method="post">
 		<fieldset>

tests/Unit/Controller/RegisterControllerTest.php

@@ -471,8 +471,10 @@ class RegisterControllerTest extends TestCase {
 			'loginname' => $username,
 			'fullname' => $fullname,
 			'show_fullname' => true,
+			'enforce_fullname' => false,
 			'phone' => $phone,
 			'show_phone' => true,
+			'enforce_phone' => false,
 			'message' => $message,
 			'password' => $password,
 			'additional_hint' => null,

webpack.js

@@ -3,6 +3,7 @@ const webpackConfig = require('@nextcloud/webpack-vue-config')
 
 webpackConfig.entry = {
 	settings: path.join(__dirname, 'src', 'settings'),
+	form: path.join(__dirname, 'src', 'form'),
 }
 
 module.exports = webpackConfig