feat(proposal): add validation to start time (#3991)

* feat(proposal): add validation to start time

* refactor(math): use Math.max instead of condition

* fix(validation): add validation instead of forcing proper time entering

* fix(error): add error message for wrong time

src/components/ModalSelectDate.vue

@@ -11,6 +11,16 @@ const { open } = toRefs(props);
 const step = ref(0);
 const input = ref('');
 const time = ref('12:00');
+const isTimeValid = computed(() => {
+  const isTimeEnteringStep = step.value === 1;
+  if (!isTimeEnteringStep) return true;
+  if (!input.value) return false;
+
+  const startDateString = `${input.value} ${time.value}:59`;
+  const startTimestamp = new Date(startDateString).getTime();
+
+  return startTimestamp >= Date.now();
+});
 
 function formatDate(date) {
   const output = { h: '12', m: '00', dateString: '' };
@@ -28,7 +38,8 @@ function handleSubmit() {
   if (step.value === 0) return (step.value = 1);
   const dateString = `${input.value} ${time.value}:00`;
   const timestamp = new Date(dateString).getTime() / 1000;
-  emit('input', timestamp);
+  const now = parseInt((Date.now() / 1e3).toFixed());
+  emit('input', Math.max(timestamp, now));
   emit('close');
 }
 
@@ -39,6 +50,17 @@ watch(open, () => {
   time.value = `${h}:${m}`;
   input.value = dateString;
 });
+
+watch(step, () => {
+  if (step.value === 0) return;
+  const timestamp = Math.max(
+    props.value,
+    parseInt((Date.now() / 1e3 + 10).toFixed())
+  );
+  const { dateString, h, m } = formatDate(timestamp);
+  time.value = `${h}:${m}`;
+  input.value = dateString;
+});
 </script>
 
 <template>
@@ -56,11 +78,16 @@ watch(open, () => {
         <BaseCalendar v-model="input" class="mx-auto mb-2" />
       </div>
     </div>
-    <div v-else class="m-4 mx-auto max-w-[140px]">
+    <div v-else class="m-4">
       <input
         v-model="time"
         type="time"
-        class="s-input form-input text-center text-lg"
+        class="s-input form-input mx-auto max-w-[140px] text-center text-lg"
+      />
+      <TuneErrorInput
+        v-if="!isTimeValid"
+        class="mx-auto mt-2 text-center"
+        :error="$t('create.errorTimeInPast')"
       />
     </div>
     <template #footer>
@@ -72,7 +99,7 @@ watch(open, () => {
       <div class="float-left w-2/4 pl-2">
         <BaseButton
           type="submit"
-          :disabled="!input"
+          :disabled="!isTimeValid"
           class="w-full"
           primary
           @click="handleSubmit"

src/locales/default.json

@@ -228,7 +228,8 @@
     "uploadImageExplainer": "Attach images by dragging & dropping, selecting or pasting them.",
     "uploading": "Uploading image",
     "markdown": "Styling with Markdown is supported",
-    "errorGettingSnapshot": "We encountered an error while fetching the snapshot block number which is needed to calculate your voting power. Please try again later."
+    "errorGettingSnapshot": "We encountered an error while fetching the snapshot block number which is needed to calculate your voting power. Please try again later.",
+    "errorTimeInPast": "Entered time is in the past. Please select a future time."
   },
   "delegate": {
     "header": "Delegate",

src/views/SpaceCreate.vue

@@ -159,7 +159,8 @@ function getFormattedForm() {
     .map(choice => choice.text)
     .filter(choiceText => choiceText.length > 0);
   updateTime();
-  clonedForm.start = dateStart.value;
+  const thisMomentTimestamp = parseInt((Date.now() / 1e3).toFixed());
+  clonedForm.start = Math.max(thisMomentTimestamp, dateStart.value);
   clonedForm.end = dateEnd.value;
   return clonedForm;
 }