Merge pull request #62 from mCaptcha/fix-help-text

Fix help text
mCaptcha · Oct 27, 2023 · 8bdc897 · 8bdc897
2 parents fcba2ab + e6d9a80
commit 8bdc897
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 31 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -2,7 +2,7 @@
   "author": "Aravinth Manivannan <realaravinth@batsense.net>",
   "name": "@mcaptcha/core-glue",
   "description": "internal library containing shared glue code",
-  "version": "0.1.0-rc2",
+  "version": "0.1.0-rc3",
   "license": "(MIT OR Apache-2.0)",
   "keywords": [
     "mCaptcha",

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -4,10 +4,6 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-License-Identifier: MIT
 
-export const INPUT_NAME = "mcaptcha__token";
-export const INPUT_LABEL_ID = "mcaptcha__token-label";
-export const INSTRUCTIONS_URL="https://mcaptcha.org/docs/user-manual/how-to-mcaptcha-without-js/"
-
 /**
  * Site key configuration
  */

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mcaptcha/react-glue",
-  "version": "0.1.0-rc1",
+  "version": "0.1.0-rc2",
   "description": "glue code to setup mCaptcha on your React website",
   "author": "Aravinth Manivannan <realaravinth@batsense.net>",
   "license": "(MIT OR Apache-2.0)",

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -12,6 +12,9 @@ import * as lib from '@mcaptcha/core-glue'
 
 export const INPUT_NAME = 'mcaptcha__token'
 export const INPUT_LABEL_ID = 'mcaptcha__token-label'
+export const INSTRUCTIONS_URL =
+  'https://mcaptcha.org/docs/user-manual/how-to-mcaptcha-without-js/'
+
 /**
  * @param {URL?}widgetLink: URL of the widget. Use this only when you are using
  * a self-hosted instance of mCaptcha with a non-standard(unofficial) path(i.e,
@@ -42,6 +45,9 @@ export const MCaptchaWidget = (config: WidgetConfig): ReactElement => {
       if (item && item.current) {
         item.current.style.display = 'none'
       }
+      if (input && input.current) {
+        input.current.readOnly = true
+      }
     })
 
     w.listen()
@@ -56,17 +62,17 @@ export const MCaptchaWidget = (config: WidgetConfig): ReactElement => {
         data-mcaptcha_url={w.widgetLink.toString()}
         htmlFor={INPUT_NAME}
       >
-        mCaptcha Access token
+        mCaptcha authorization token.{' '}
+        <a href={INSTRUCTIONS_URL}>Instructions</a>.
+        <input
+          ref={input}
+          id={INPUT_NAME}
+          name={INPUT_NAME}
+          value={token}
+          required
+          type='text'
+        />
       </label>
-      <input
-        ref={input}
-        id={INPUT_NAME}
-        name={INPUT_NAME}
-        value={token}
-        readOnly
-        required
-        type='text'
-      />
       <iframe
         title='mCaptcha'
         src={w.widgetLink.toString()}

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@mcaptcha/svelte-glue",
-	"version": "0.1.0-rc1",
+	"version": "0.1.0-rc2",
 	"description": "glue code to setup mCaptcha on your Svelte website",
 	"author": "Aravinth Manivannan <realaravinth@batsense.net>",
 	"license": "(MIT OR Apache-2.0)",

diff --git a/packages/svelte/src/lib/Widget.svelte b/packages/svelte/src/lib/Widget.svelte
@@ -4,7 +4,6 @@ SPDX-FileCopyrightText: 2023 Aravinth Manivannan <realaravinth@batsense.net>
 SPDX-License-Identifier: Apache-2.0
 SPDX-License-Identifier: MIT
 -->
-
 <script lang="ts">
 	/*
 	 * mCaptcha is a PoW based DoS protection software.
@@ -19,28 +18,49 @@ SPDX-License-Identifier: MIT
 
 	import { onMount, onDestroy } from 'svelte';
 	import { default as CoreWidget } from '@mcaptcha/core-glue';
-	import { WidgetConfig, INPUT_NAME } from '@mcaptcha/core-glue';
+	import { WidgetConfig } from '@mcaptcha/core-glue';
 
 	//export const ssr = false;
 	export let config: WidgetConfig;
 
 	const INPUT_LABEL_ID = 'mcaptcha__token-label';
 	const INPUT_NAME = 'mcaptcha__token';
+	const INSTRUCTIONS_URL = 'https://mcaptcha.org/docs/user-manual/how-to-mcaptcha-without-js/';
 
 	let token = '';
 
 	const setToken = (t: string) => (token = t);
 
 	const w = new CoreWidget(config, setToken);
+	let mcaptchaLabel;
+	let mcaptchaInput;
 
-	onMount(() => w.listen());
+	onMount(() => {
+		mcaptchaLabel.style.display = 'none';
+		mcaptchaInput.style.display = 'none';
+		mcaptchaInput.readonly = true;
+		w.listen();
+	});
 	const cleanup = (): void => w.destroy();
 	onDestroy(() => cleanup);
 </script>
 
 <div class="mcaptcha__widget-container">
-	<label id={INPUT_LABEL_ID} for={INPUT_NAME} data-mcaptcha_url={w.widgetLink.toString()}>
-		<input id={INPUT_NAME} name={INPUT_NAME} value={token} readonly hidden required type="text" />
+	<label
+		id={INPUT_LABEL_ID}
+		for={INPUT_NAME}
+		data-mcaptcha_url={w.widgetLink.toString()}
+		bind:this={mcaptchaLabel}
+	>
+		mCaptcha authorization token. <a href={INSTRUCTIONS_URL}>Instructions</a>
+		<input
+			id={INPUT_NAME}
+			name={INPUT_NAME}
+			value={token}
+			required
+			type="text"
+			bind:this={mcaptchaInput}
+		/>
 	</label>
 	<iframe
 		title="mCaptcha"

diff --git a/packages/svelte/src/routes/index.svelte b/packages/svelte/src/routes/index.svelte
@@ -4,7 +4,6 @@ SPDX-FileCopyrightText: 2023 Aravinth Manivannan <realaravinth@batsense.net>
 SPDX-License-Identifier: Apache-2.0
 SPDX-License-Identifier: MIT
 -->
-
 <script lang="ts">
 	import Widget from '$lib/Widget.svelte';
 

diff --git a/packages/vanilla/static/embeded.html b/packages/vanilla/static/embeded.html
@@ -16,19 +16,19 @@ <h1 class="form__title">Sign in</h1>
         Password
         <input type="password" name="password" id="password" required="" />
       </label>
+
+      <label data-mcaptcha_url="https://demo.mcaptcha.org/widget?sitekey=pHy0AktWyOKuxZDzFfoaewncWecCHo23" for="mcaptcha__token" id="mcaptcha__token-label">
+        mCaptcha authorization token. <a href="https://mcaptcha.org/docs/user-manual/how-to-mcaptcha-without-js/">Instructions</a>.
+        <input type="text" name="mcaptcha__token" id="mcaptcha__token" />
+      </label>
       <div id="mcaptcha__widget-container"></div>
+      <script src="/index.js"></script>
+
       <button type="submit" class="sitekey-form__submit">Sign in</button>
     </form>
   </body>
   <script src="../dist/index.js"></script>
-  <script charset="utf-8">
-    let config = {
-      widgetLink: new URL(
-        "http://localhost:7000/widget/?sitekey=JiL62F7l9hFjhoPIqeMOpMDFuQ1BIz7l"
-      ),
-    };
-    new mcaptchaGlue.default(config);
-  </script>
+
   <style>
     body {
       display: flex;