improve classics and hide hcaptcha token code

radio4000 · May 17, 2024 · 8e9c628 · 8e9c628
1 parent d5203a1
commit 8e9c628
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 11 deletions.
diff --git a/public/themes/classic.css b/public/themes/classic.css
@@ -151,6 +151,7 @@ r4-app {
 		box-shadow: var(--c-shadow-input);
 		font-size: 1rem;
 		flex-grow: 1;
+		width: 100%;
 	}
 }
 
@@ -176,7 +177,8 @@ r4-layout [slot='main'] {
 }
 r4-layout header[slot='menu'] {
 	z-index: 1;
-	justify-content: center;
+	justify-content: flex-start;
+	width: 100%;
 }
 
 r4-layout::part(playback-summary) {
@@ -504,6 +506,12 @@ radio4000-player .PlayerControl-group .Btn {
 r4-channel-slug::before {
 	content: '@';
 }
+r4-channel-slug {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: clamp(calc(var(--s) * 10), calc(var(--s) * 30), 50vmin);
+	overflow: hidden;
+}
 
 r4-page-home {
 	justify-content: center;
@@ -630,6 +638,10 @@ r4-page-channel-update {
 }
 
 h-captcha {
-	padding: var(--s);
+	padding-top: var(--s);
+	padding-bottom: var(--s);
 	display: inline-flex;
 }
+label[for='token'] input[name='token'] {
+	display: none;
+}
diff --git a/src/components/r4-app-user-menu.js b/src/components/r4-app-user-menu.js
@@ -55,7 +55,13 @@ export default class R4AppUserMenu extends LitElement {
 				</a>
 			`
 		} else {
-			return html`<a aria-current=${this.isCurrent('/new')} href=${this.href + '/new'}>New radio</a>`
+			return html`<a
+				aria-current=${this.isCurrent('/new')}
+				href=${this.href + '/new'}
+				title="Sign in a user account to create a new radio"
+			>
+				<r4-channel-slug>new</r4-channel-slug>
+			</a>`
 		}
 	}
 	renderChannelSelect() {

diff --git a/src/components/r4-password-reset.js b/src/components/r4-password-reset.js
@@ -16,8 +16,8 @@ const captchaFieldTemplate = document.createElement('template')
 captchaFieldTemplate.innerHTML = `
 	<fieldset>
 		<legend>To prevent spam, please solve this captcha.</legend>
-		<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 		<label for="token">
+			<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 			<h-captcha
 				site-key="R4_SET_BY_INIT_CAPTCHA"
 				size="normal"
@@ -68,7 +68,6 @@ export default class R4PasswordReset extends R4Form {
 		this.querySelector('slot[name="fields"]').append($signupCaptchaField)
 	}
 
-
 	async handleSubmit(event) {
 		event.preventDefault()
 		event.stopPropagation()
@@ -88,7 +87,7 @@ export default class R4PasswordReset extends R4Form {
 		try {
 			res = await sdk.supabase.auth.signInWithOtp({
 				email: this.state.email,
-				options
+				options,
 			})
 			if (res.error) {
 				throw res.error

diff --git a/src/components/r4-sign-in.js b/src/components/r4-sign-in.js
@@ -19,8 +19,8 @@ const captchaFieldTemplate = document.createElement('template')
 captchaFieldTemplate.innerHTML = `
 	<fieldset>
 		<legend>To prevent spam, please solve this captcha.</legend>
-		<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 		<label for="token">
+			<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 			<h-captcha
 				site-key="R4_SET_BY_INIT_CAPTCHA"
 				size="normal"

diff --git a/src/components/r4-sign-up.js b/src/components/r4-sign-up.js
@@ -21,8 +21,8 @@ const captchaFieldTemplate = document.createElement('template')
 captchaFieldTemplate.innerHTML = `
 	<fieldset>
 		<legend>To prevent spam, please solve this captcha.</legend>
-			<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 		<label for="token">
+			<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 			<h-captcha
 				site-key="R4_SET_BY_INIT_CAPTCHA"
 				size="normal"

diff --git a/src/index.css b/src/index.css
@@ -86,8 +86,8 @@ r4-app a {
 	}
 }
 r4-app section {
-	margin-top: var(--s);
-	margin-bottom: var(--s);
+	padding-top: var(--s);
+	padding-bottom: var(--s);
 }
 r4-app summary {
 	/* Don't want to select <summaries> text when toggling */
@@ -725,3 +725,9 @@ r4-supabase-filters {
 r4-channel-create slot[name='fields'] fieldset:last-of-type {
 	display: none;
 }
+
+h-captcha {
+	& iframe {
+		width: 100% !important;
+	}
+}
diff --git a/src/pages/r4-page-sign.js b/src/pages/r4-page-sign.js
@@ -119,7 +119,7 @@ export default class R4PageSign extends R4Page {
 					</li>
 					<li>
 						Sign up first, to <a href="${this.config.hrefMigrate}">import/migrate</a> an existing radio (from the
-						<a href="https://v1.radio4000.com">version 1</a> of <r4-title></r4-title>).
+						<a href="https://v1.radio4000.com" target="_blank">version 1</a> of <r4-title></r4-title>).
 					</li>
 				</ul>
 				<p>Need help? See chat and email support on the <a href=${this.config.href + `/settings`}>settings</a> page.</p>