refactor: signup customisations

frontend/package.json

@@ -19,6 +19,7 @@
     "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.6.0",
     "chart.js": "^4.4.1",
+    "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
     "frappe-ui": "^0.1.69",

frontend/src/components/Controls/HTMLEditor.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="p-5 max-w-3xl mx-auto">
+		<!-- Content Editable Area -->
+		<div
+			ref="editor"
+			class="border border-gray-300 p-3 rounded-md min-h-[200px] bg-white"
+			contenteditable="true"
+			@input="onInput"
+		></div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const editor = ref(null)
+const htmlContent = ref('')
+
+// Function to execute formatting commands
+const execCommand = (command) => {
+	document.execCommand(command, false, null)
+}
+
+// Watch for input changes
+const onInput = () => {
+	htmlContent.value = editor.value.innerHTML
+}
+</script>
+
+<style scoped>
+/* You can add custom styles here if needed */
+</style>

frontend/src/components/Modals/Settings.vue

@@ -208,47 +208,16 @@ const tabs = computed(() => {
 				{
 					label: 'Signup',
 					icon: 'LogIn',
-					description:
-						'Customize the signup page to inform users about your terms and policies',
 					fields: [
 						{
-							label: 'Show terms of use on signup',
-							name: 'terms_of_use',
-							type: 'checkbox',
+							label: 'Custom Content',
+							name: 'custom_signup_content',
+							type: 'Code',
+							mode: 'htmlmixed',
+							rows: 10,
 						},
 						{
-							label: 'Terms of Use Page',
-							name: 'terms_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							label: 'Show privacy policy on signup',
-							name: 'privacy_policy',
-							type: 'checkbox',
-						},
-						{
-							label: 'Privacy Policy Page',
-							name: 'privacy_policy_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							type: 'Column Break',
-						},
-						{
-							label: 'Show cookie policy on signup',
-							name: 'cookie_policy',
-							type: 'checkbox',
-						},
-						{
-							label: 'Cookie Policy Page',
-							name: 'cookie_policy_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							label: 'Ask user category during signup',
+							label: 'Ask user category',
 							name: 'user_category',
 							type: 'checkbox',
 						},

frontend/src/components/SettingDetails.vue

@@ -8,9 +8,15 @@
 				{{ __(description) }}
 			</div>
 		</div>
-		<div class="flex justify-between my-5">
+		<div
+			class="my-5"
+			:class="{ 'flex justify-between w-full': columns.length > 1 }"
+		>
 			<div v-for="(column, index) in columns" :key="index">
-				<div class="flex flex-col space-y-5 w-72">
+				<div
+					class="flex flex-col space-y-5"
+					:class="columns.length > 1 ? 'w-72' : 'w-full'"
+				>
 					<div v-for="field in column">
 						<Link
 							v-if="field.type == 'Link'"
@@ -18,12 +24,25 @@
 							:doctype="field.doctype"
 							:label="field.label"
 						/>
+
+						<Codemirror
+							v-else-if="field.type == 'Code'"
+							v-model:value="field.value"
+							:label="field.label"
+							:height="200"
+							:options="{
+								mode: field.mode,
+								theme: 'seti',
+							}"
+						/>
+
 						<FormControl
 							v-else
 							:key="field.name"
 							v-model="field.value"
 							:label="field.label"
 							:type="field.type"
+							:rows="field.rows"
 						/>
 					</div>
 				</div>
@@ -41,6 +60,9 @@
 import { FormControl, Button } from 'frappe-ui'
 import { computed } from 'vue'
 import Link from '@/components/Controls/Link.vue'
+import Codemirror from 'codemirror-editor-vue3'
+import 'codemirror/theme/seti.css'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
 
 const props = defineProps({
 	fields: {
@@ -94,3 +116,13 @@ const update = () => {
 	props.data.save.submit()
 }
 </script>
+<style>
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+	font-family: revert;
+}
+
+.CodeMirror {
+	border-radius: 12px;
+}
+</style>