Captcha appearance and layout changes

.gitignore

@@ -6,8 +6,8 @@ static/*
 gulp/res/js/socket.io.js
 views/custompages/*.pug
 /gulp/res/css/codethemes
-gulp/res/js/timezone.js
-gulp/res/js/themelist.js
+gulp/res/css/locals.css
+gulp/res/js/locals.js
 gulp/res/js/post.js
 gulp/res/js/modal.js
 tmp/

gulp/res/css/nscaptcha.css

@@ -1,6 +1,6 @@
 img {
-	width: 200px;
-	height: 200px;
+	width: var(--captcha-w);
+	height: var(--captcha-h);
 	image-rendering: crisp-edges;
 	margin: 0 auto;
 }

gulp/res/css/style.css

@@ -1,7 +1,3 @@
-table, img, .label, .pages, .catalog-tile, .post-container, .stickynav, .toggle-summary, .postform-style, input[type="button"], input[type="file"], input[type="number"], input[type="password"], input[type="range"], input[type="submit"], input[type="text"], select, textarea {
-	border-radius: 2px!important;
-}
-
 body {
 	font-family: arial, helvetica, sans-serif;
 	font-size: 10pt;
@@ -1073,19 +1069,23 @@ input[type="file"] {
 
 iframe.captcha, iframe.bypass {
 	/*dumb hack cos of noscript wrapping in unstyleable span*/
-	margin-bottom: -2px;
+	/*margin-bottom: -2px;*/
+}
+
+iframe.captcha {
+	width: 100%;
 }
 
 iframe.bypass {
 	height: var(--bypass-height);
-	width: 450px;
+	width: 350px;
 }
 
 .captcha {
 	border: 1px solid var(--input-borders);
 	background: white;
 	margin-bottom: 1px;
-	width: var(--captcha-w);
+	min-width: var(--captcha-w);
 	height: var(--captcha-h);
 	box-sizing: border-box;
 	object-fit: contain;
@@ -1245,7 +1245,6 @@ row.wrap.sb .col {
 
 @media only screen and (max-width: 600px) {
 
-
 	.postmenu {
 		border-left: .5em solid transparent;
 		border-right: .5em solid transparent;
@@ -1311,6 +1310,7 @@ row.wrap.sb .col {
 
 	iframe.bypass {
 		height: 100vh;
+		width: 100%;
 	}
 
 	.file-thumb {
@@ -1395,6 +1395,10 @@ row.wrap.sb .col {
 		width: 100%;
 	}
 
+	input#file {
+		width: 100%;
+	}
+
 }
 
 .flag {

gulp/res/js/captcha.js

@@ -74,14 +74,14 @@ class CaptchaController {
 		captchaDiv.style.display = '';
 		captchaImg.style.margin = '0 auto';
 		captchaImg.style.display = 'flex';
-		captchaImg.style.width = '100%';
+		//captchaImg.style.width = '100%';
 		refreshDiv.classList.add('captcharefresh', 'noselect');
 		refreshDiv.addEventListener('click', (e) => this.refreshCaptchas(e), true);
 		refreshDiv.textContent = '↻';
 		field.placeholder = 'loading';
 		captchaImg.src = '/captcha';
 		captchaImg.onload = function() {
-				field.placeholder = '';
+				field.placeholder = 'Captcha text';
 				captchaDiv.appendChild(captchaImg);
 				captchaDiv.appendChild(refreshDiv);
 		}

gulp/res/js/captchaformsection.js

@@ -9,7 +9,7 @@ var block = (this && this.block), attributes = (this && this.attributes) || {};
 pug_html = pug_html + "\u003Cdetails class=\"row label mr-0\"\u003E\u003Csummary class=\"pv-5\"\u003ECaptcha\u003Cspan class=\"required\"\u003E*\u003C\u002Fspan\u003E\u003C\u002Fsummary\u003E";
 switch (captchaType){
 case 'google':
-pug_html = pug_html + "\u003Cdiv" + (" class=\"g-recaptcha\""+pug_attr("data-sitekey", `${googleRecaptchaSiteKey}`, true, false)+" data-theme=\"dark\" data-size=\"compact\" data-callback=\"recaptchaCallback\"") + "\u003E\u003C\u002Fdiv\u003E";
+pug_html = pug_html + "\u003Cdiv" + (" class=\"g-recaptcha\""+pug_attr("data-sitekey", `${googleRecaptchaSiteKey}`, true, false)+" data-theme=\"dark\" data-size=\"compact\" data-callback=\"recaptchaCallback\"") + "\u003E\u003C\u002Fdiv\u003E\u003Cnoscript\u003EPlease enable JavaScript to solve the captcha.\u003C\u002Fnoscript\u003E";
   break;
 case 'text':
 pug_html = pug_html + "\u003Cnoscript class=\"no-m-p\"\u003E\u003Ciframe" + (" class=\"captcha\""+" src=\"\u002Fcaptcha.html\""+pug_attr("width=210", true, true, false)+" height=\"80\" scrolling=\"no\" loading=\"lazy\"") + "\u003E\u003C\u002Fiframe\u003E\u003C\u002Fnoscript\u003E\u003Cdiv class=\"jsonly captcha\" style=\"display:none;\"\u003E\u003C\u002Fdiv\u003E\u003Cinput" + (" class=\"captchafield\""+" type=\"text\" name=\"captcha\" autocomplete=\"off\" placeholder=\"Captcha text\" pattern=\".{6}\""+pug_attr("required", true, true, false)+" title=\"6 characters\"") + "\u002F\u003E";

gulpfile.js

@@ -138,13 +138,19 @@ async function css() {
 		let bypassHeight = configs.captchaOptions.type === 'google' ? 500
 			: configs.captchaOptions.type === 'grid' ? 330
 			: 235;
+		let captchaHeight = configs.captchaOptions.type === 'text' ? 80
+			: configs.captchaOptions.type === 'grid' ? configs.captchaOptions.grid.imageSize+30
+			: 200; //'google' doesnt need this set
+		let captchaWidth = configs.captchaOptions.type === 'text' ? 210
+			: configs.captchaOptions.type === 'grid' ? configs.captchaOptions.grid.imageSize+30
+			: 200; //'google' doesnt need this set
 		const cssLocals = `:root {
     --attachment-img: url('/file/attachment.png');
     --spoiler-img: url('/file/spoiler.png');
     --audio-img: url('/file/audio.png');
     --thumbnail-size: ${configs.thumbSize}px;
-    --captcha-w: 200px;
-    --captcha-h: 200px;
+    --captcha-w: ${captchaWidth}px;
+    --captcha-h: ${captchaHeight}px;
     --bypass-height: ${bypassHeight}px;
 }`;
 		fs.writeFileSync('gulp/res/css/locals.css', cssLocals);
@@ -168,8 +174,10 @@ async function css() {
 		.pipe(cleanCSS())
 		.pipe(gulp.dest(`${paths.styles.dest}/codethemes/`));
 	await gulp.src([
+			`${paths.styles.src}/locals.css`,
 			`${paths.styles.src}/nscaptcha.css`,
 		])
+		.pipe(concat('nscaptcha.css'))
 		.pipe(less())
 		.pipe(cleanCSS())
 		.pipe(gulp.dest(paths.styles.dest));
@@ -264,6 +272,8 @@ const SERVER_TIMEZONE = '${Intl.DateTimeFormat().resolvedOptions().timeZone}';`;
 			`!${paths.scripts.src}/yous.js`,
 			`!${paths.scripts.src}/catalog.js`,
 			`!${paths.scripts.src}/time.js`,
+			`!${paths.scripts.src}/themelist.js`, //dont include files from my fuck up with git. todo: make this a migration?
+			`!${paths.scripts.src}/timezone.js`,
 		])
 		.pipe(concat('all.js'))
 		.pipe(uglify({compress:false}))

models/pages/captcha.js

@@ -2,7 +2,7 @@
 
 const { Captchas, Ratelimits } = require(__dirname+'/../../db/')
 	, { secureCookies, rateLimitCost, captchaOptions } = require(__dirname+'/../../configs/main.js')
-	, generateCaptcha = require(__dirname+`/../../helpers/captcha/generators/${captchaOptions.type}.js`)
+	, generateCaptcha = captchaOptions.type !== 'google' ? require(__dirname+`/../../helpers/captcha/generators/${captchaOptions.type}.js`) : null
 	, production = process.env.NODE_ENV === 'production';
 
 module.exports = async (req, res, next) => {

views/includes/captcha.pug

@@ -1,6 +1,7 @@
 case captchaType
 	when 'google'
 		div(class="g-recaptcha" data-sitekey=`${googleRecaptchaSiteKey}` data-theme="dark" data-size="compact" data-callback="recaptchaCallback")
+		noscript Please enable JavaScript to solve the captcha.
 	when 'text'
 		noscript.no-m-p
 			iframe.captcha(src='/captcha.html' 'width=210' height='80' scrolling='no' loading='lazy')

views/pages/bypass.pug

@@ -7,7 +7,9 @@ block content
 	h1.board-title Block Bypass
 	.form-wrapper.flex-center.mv-10
 		form.form-post(action='/forms/blockbypass' method='POST' data-captcha-preload='true')
-			include ../includes/captcha.pug
+			.row
+				.col
+					include ../includes/captcha.pug
 			if minimal
 				input(type='hidden' name='minimal' value='1')
 			input(type='submit', value='Submit')