Initial load and display of public form

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

src/components/Questions/Question.vue

@@ -28,7 +28,8 @@
 		@click="enableEdit">
 		<!-- Drag handle -->
 		<!-- TODO: implement arrow key mapping to reorder question -->
-		<div class="question__drag-handle icon-drag-handle"
+		<div v-if="!readOnly"
+			class="question__drag-handle icon-drag-handle"
 			:aria-label="t('forms', 'Drag to reorder the questions')" />
 
 		<!-- Header -->
@@ -45,7 +46,7 @@
 				@input="onInput"
 				@keyup="onTitleChange">
 			<h3 v-else class="question__header-title" v-text="text" />
-			<Actions class="question__header-menu" :force-menu="true">
+			<Actions v-if="!readOnly" class="question__header-menu" :force-menu="true">
 				<ActionButton icon="icon-delete" @click="onDelete">
 					{{ t('forms', 'Delete question') }}
 				</ActionButton>
@@ -96,6 +97,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	methods: {
@@ -107,14 +112,18 @@ export default {
 		 * Enable the edit mode
 		 */
 		enableEdit() {
-			this.$emit('update:edit', true)
+			if (!this.readOnly) {
+				this.$emit('update:edit', true)
+			}
 		},
 
 		/**
 		 * Disable the edit mode
 		 */
 		disableEdit() {
-			this.$emit('update:edit', false)
+			if (!this.readOnly) {
+				this.$emit('update:edit', false)
+			}
 		},
 
 		/**

src/components/Questions/QuestionLong.vue

@@ -32,7 +32,7 @@
 			<textarea ref="textarea"
 				:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
 				:placeholder="t('forms', 'Long answer text')"
-				:readonly="edit"
+				:required="true /* TODO: implement required option */"
 				:value="values[0]"
 				class="question__text"
 				maxlength="1024"

src/components/Questions/QuestionMultiple.vue

@@ -28,7 +28,7 @@
 		:edit.sync="edit"
 		@delete="onDelete"
 		@update:text="onTitleChange">
-		<ul class="question__content" :role="isUnique ? 'radiogroup' : ''">
+		<ul class="question__content">
 			<template v-for="(answer, index) in options">
 				<li v-if="!edit" :key="answer.id" class="question__item">
 					<!-- Answer radio/checkbox + label -->
@@ -42,7 +42,7 @@
 							'checkbox question__checkbox': !isUnique,
 						}"
 						:name="`${id}-answer`"
-						:readonly="true"
+						:required="true /* TODO: implement required option */"
 						:type="isUnique ? 'radio' : 'checkbox'">
 					<label v-if="!edit"
 						ref="label"
@@ -230,13 +230,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .question__content {
 	display: flex;
 	flex-direction: column;
 }
 
 .question__item {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	height: 44px;
@@ -247,11 +248,6 @@ export default {
 			margin: 14px !important;
 		}
 	}
-
-	// make sure to respect readonly on radio/checkbox
-	input[readonly] {
-		pointer-events: none;
-	}
 }
 
 // Using type to have a higher order than the input styling of server
@@ -265,4 +261,12 @@ export default {
 	border-radius: 0;
 }
 
+input.question__radio,
+input.question__checkbox {
+	z-index: -1;
+	// make sure browser warnings are properly
+	// displayed at the correct location
+	left: 22px;
+}
+
 </style>

src/components/Questions/QuestionShort.vue

@@ -32,7 +32,7 @@
 			<input ref="input"
 				:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
 				:placeholder="t('forms', 'Short answer text')"
-				:readonly="edit"
+				:required="true /* TODO: implement required option */"
 				:value="values[0]"
 				class="question__input"
 				maxlength="256"