Feature/#276/qrcodes (#289)

* bugfix: wrong format when on 12h format

* update: website link in placeholder

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>

apps/client/src/features/modals/EventSettingsModal.jsx

@@ -27,8 +27,9 @@ export default function SettingsModal() {
 
     setFormData({
       title: data.title,
-      url: data.url,
+      publicUrl: data.publicUrl,
       publicInfo: data.publicInfo,
+      backstageUrl: data.backstageUrl,
       backstageInfo: data.backstageInfo,
       endMessage: data.endMessage,
     });
@@ -45,7 +46,7 @@ export default function SettingsModal() {
       try {
         await postEvent(formData);
       } catch (error) {
-        emitError(`Error saving event settings: ${error}`)
+        emitError(`Error saving event settings: ${error}`);
       } finally {
         await refetch();
         setChanged(false);
@@ -53,7 +54,7 @@ export default function SettingsModal() {
 
       setSubmitting(false);
     },
-    [emitError, formData, refetch]
+    [emitError, formData, refetch],
   );
 
   /**
@@ -69,12 +70,15 @@ export default function SettingsModal() {
    * @param {string} field - object parameter to update
    * @param {string} value - new object parameter value
    */
-  const handleChange = useCallback((field, value) => {
-    const temp = { ...formData };
-    temp[field] = value;
-    setFormData(temp);
-    setChanged(true);
-  },[formData]);
+  const handleChange = useCallback(
+    (field, value) => {
+      const temp = { ...formData };
+      temp[field] = value;
+      setFormData(temp);
+      setChanged(true);
+    },
+    [formData],
+  );
 
   return (
     <ModalBody className={style.modalBody}>
@@ -99,19 +103,19 @@ export default function SettingsModal() {
           </div>
           <div className={style.hSeparator}>Additional Screen Info</div>
           <div className={style.spacedEntry}>
-            <FormLabel htmlFor='url'>
-              Event URL
+            <FormLabel htmlFor='publicUrl'>
+              Public URL
               <span className={style.labelNote}>
                 <br />
-                Shown as a QR code in some views
+                QR code to be shown on public screens
               </span>
             </FormLabel>
             <Input
               {...inputProps}
-              name='url'
-              placeholder='www.onsite.no'
-              value={formData.url}
-              onChange={(event) => handleChange('url', event.target.value)}
+              name='publicUrl'
+              placeholder='www.getontime.no'
+              value={formData.publicUrl}
+              onChange={(event) => handleChange('publicUrl', event.target.value)}
             />
           </div>
           <div className={style.spacedEntry}>
@@ -130,6 +134,22 @@ export default function SettingsModal() {
               onChange={(event) => handleChange('publicInfo', event.target.value)}
             />
           </div>
+          <div className={style.spacedEntry}>
+            <FormLabel htmlFor='backstageUrl'>
+              Backstage URL
+              <span className={style.labelNote}>
+                <br />
+                QR to be shown on backstage screens
+              </span>
+            </FormLabel>
+            <Input
+              {...inputProps}
+              name='backstageUrl'
+              placeholder='www.getontime.no'
+              value={formData.backstageUrl}
+              onChange={(event) => handleChange('backstageUrl', event.target.value)}
+            />
+          </div>
           <div className={style.spacedEntry}>
             <FormLabel htmlFor='backstageInfo'>
               Backstage Info
@@ -165,12 +185,7 @@ export default function SettingsModal() {
             />
           </div>
         </div>
-        <SubmitContainer
-          revert={revert}
-          submitting={submitting}
-          changed={changed}
-          status={status}
-        />
+        <SubmitContainer revert={revert} submitting={submitting} changed={changed} status={status} />
       </form>
     </ModalBody>
   );