Make dual registration page better looking by using tabs

gulp/res/css/style.css

@@ -202,9 +202,15 @@ pre {
 .pv-5 {
 	padding: 5px 0;
 }
+.p-0 {
+	padding: 0!important;
+}
 .vh {
 	visibility: hidden!important;
 }
+.wm {
+	width: max-content;
+}
 #settings, .dummy-link {
 	cursor: pointer;
 }

views/includes/captchasidelabel.pug

@@ -2,5 +2,5 @@ section.row
 	.label
 		span #{__('Captcha')}
 			span.required *
-	.col
+	.col.p-0
 		include ./captcha.pug

views/includes/registration.pug

@@ -0,0 +1,16 @@
+.form-wrapper.flex-center
+	form.form-post(action='/forms/register' method='POST' data-captcha-preload='true')
+		.row
+			.label #{__('Username')}
+			input(type='text', name='username', maxlength='50' pattern='[a-zA-Z0-9]+' required title=__('alphanumeric only'))
+		.row
+			.label #{__('Password')}
+			input(type='password', name='password', maxlength='100' required)
+		.row
+			.label #{__('Confirm Password')}
+			input(type='password', name='passwordconfirm', maxlength='100' required)
+		if captchaOptions.type === 'text'
+			include ./captchasidelabel.pug
+		else
+			include ./captchafieldrow.pug
+		input(type='submit', value=__('Register'))

views/pages/account.pug

@@ -10,7 +10,7 @@ block content
 	hr(size=1)
 	h4.no-m-p #{__('General')}:
 	ul
-		if !user.twofactor
+		if !user.twofactor && !user.web3
 			li.bold: a(href='/twofactor.html') #{__('Setup 2FA (TOTP)')}
 		if permissions.get(Permissions.CREATE_BOARD)
 			li: a(href='/create.html') #{__('Create a board')}

views/pages/register.pug

@@ -5,37 +5,37 @@ block head
 
 block content
 	h1.board-title #{__('Register')}
-	.form-wrapper.flex-center.mv-10
-		form.form-post(action='/forms/register' method='POST' data-captcha-preload='true')
-			.row
-				.label #{__('Username')}
-				input(type='text', name='username', maxlength='50' pattern='[a-zA-Z0-9]+' required title=__('alphanumeric only'))
-			.row
-				.label #{__('Password')}
-				input(type='password', name='password', maxlength='100' required)
-			.row
-				.label #{__('Confirm Password')}
-				input(type='password', name='passwordconfirm', maxlength='100' required)
-			if captchaOptions.type === 'text'
-				include ../includes/captchasidelabel.pug
-			else
-				include ../includes/captchafieldrow.pug
-			input(type='submit', value=__('Register'))
-	if enableWeb3 === true
-		.jsonly.web3.mv-10
-			.text-center OR
+
+	.mv-10
+		if enableWeb3 === true
+			.sm#tab-1
+				.sm#tab-2
+					.tabbed-area.flexcenter
+						ul.tabs.group.web3
+							li
+								a(href='#tab-1') #{__('Username')}
+							li.jsonly
+								a(href='#tab-2') #{__('MetaMask')}
+						.box-wrap.mv-0.wm
+							.tab.tab-1
+								.form-wrapper.flex-center
+									include ../includes/registration.pug
+							.tab.tab-2.jsonly.web3
+								.form-wrapper.flex-center
+									form.form-post(action='/forms/register' method='POST' data-captcha-preload='true')
+										input(type='hidden' name='nonce')
+										input(type='hidden' name='address')
+										input(type='hidden' name='signature')
+										if captchaOptions.type === 'text'
+											include ../includes/captchasidelabel.pug
+										else
+											include ../includes/captchafieldrow.pug
+										.postform-style.dummy-link.web3-login.ct-r1.ph-5
+											img(src='/file/metamask-fox.svg' width=24 height=24)
+											| #{__('Register with MetaMask')}
+		else
 			.form-wrapper.flex-center.mv-10
-				form.form-post(action='/forms/register' method='POST' data-captcha-preload='true')
-					input(type='hidden' name='nonce')
-					input(type='hidden' name='address')
-					input(type='hidden' name='signature')
-					if captchaOptions.type === 'text'
-						include ../includes/captchasidelabel.pug
-					else
-						include ../includes/captchafieldrow.pug
-					.postform-style.dummy-link.web3-login.ct-r1.ph-5
-						img(src='/file/metamask-fox.svg' width=24 height=24)
-						| #{__('Register with MetaMask')}
+				include ../includes/registration.pug
 	.text-center.mt-10
 		p: a(href='/login.html') #{__('Login')}
 		p: a(href='/changepassword.html') #{__('Change Password')}