Merge pull request #286 from nextcloud/improve-registration-submissio…

…n-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/registration-settings.js.map binary
+/js/*.js binary
+/js/*.js.map binary

.l10nignore

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

lib/Controller/RegisterController.php

@@ -236,8 +236,10 @@ public function showUserForm(string $secret, string $token, string $loginname =
 			'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.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 @@
 			<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 @@
 		<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 @@
 			<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 @@
 		<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 @@ public function testShowUserForm(string $username, string $message): void {
 			'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