From 01fe74cfdb7f2fcb276c5a67b13d899cc1a124bc Mon Sep 17 00:00:00 2001
From: Samuel Weirich <4281791+SamuelWei@users.noreply.github.com>
Date: Fri, 14 Jun 2024 11:01:07 +0200
Subject: [PATCH] Join by phone

---
 .../js/components/RoomJoinByPhoneButton.vue   | 89 +++++++++++++++++++
 resources/js/views/RoomsView.vue              |  5 ++
 2 files changed, 94 insertions(+)
 create mode 100644 resources/js/components/RoomJoinByPhoneButton.vue

diff --git a/resources/js/components/RoomJoinByPhoneButton.vue b/resources/js/components/RoomJoinByPhoneButton.vue
new file mode 100644
index 000000000..db3f6b514
--- /dev/null
+++ b/resources/js/components/RoomJoinByPhoneButton.vue
@@ -0,0 +1,89 @@
+<template>
+  <!-- If room is running, show join button -->
+  <Button
+    label="Mit Telefon beitreten"
+    icon="fa-solid fa-phone"
+    severity="secondary"
+    @click="toggle"
+    class="flex-shrink-0"
+  />
+  <OverlayPanel ref="op" aria-labelledby="room-invitation-title">
+    <div class="flex flex-column align-items-start gap-3 min-w-min p-2">
+      <fieldset class="flex w-full flex-column gap-2">
+        <legend id="room-invitation-title" class="font-bold block white-space-nowrap">Telefonnummer und PIN</legend>
+        <div class="flex-grow-1">
+          <IconField iconPosition="left">
+            <InputIcon>
+              <i
+                class="fa-solid fa-phone"
+                v-tooltip="$t('rooms.invitation.link')"
+              />
+            </InputIcon>
+            <InputText
+              class="border-0 shadow-none w-full text-overflow-ellipsis"
+              id="invitationLink"
+              :aria-label="$t('rooms.invitation.link')"
+              readonly
+              :value="number"
+            />
+          </IconField>
+
+          <IconField iconPosition="left">
+            <InputIcon>
+              <i
+                class="fa-solid fa-lock"
+                v-tooltip="$t('rooms.invitation.code')"
+              />
+            </InputIcon>
+            <InputText
+              class="border-0 shadow-none w-full"
+              id="invitationCode"
+              :aria-label="$t('rooms.invitation.code')"
+              readonly
+              :value="pin"
+            />
+          </IconField>
+        </div>
+      </fieldset>
+
+      <div>
+      <span class="font-bold block white-space-nowrap">Mit Smartphone anrufen</span>
+      <img :src="qrcode" alt="QR Code" />
+      </div>
+
+      <a :href="link" class="p-button p-button-secondary">
+        <span class="p-button-icon p-button-icon-left fa-solid fa-phone" />
+        <span class="p-button-label">Anrufen</span>
+      </a>
+    </div>
+  </OverlayPanel>
+
+</template>
+<script setup>
+import {computed, ref} from 'vue';
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+
+const op = ref();
+const toggle = (event) => {
+  op.value.toggle(event);
+};
+
+const props = defineProps({
+  number: {
+    type: String,
+    required: true
+  },
+  pin: {
+    type: Number,
+    required: true
+  }
+});
+
+const link = computed(() => {
+  // Remove all chars that are not digits or '+'
+  const cleanNumber = props.number.replace(/[^0-9+]/g, '');
+  return `tel:${cleanNumber},${props.pin}#`;
+});
+const qrcode = useQRCode(link);
+
+</script>
diff --git a/resources/js/views/RoomsView.vue b/resources/js/views/RoomsView.vue
index 24eb4af41..daac82ecc 100644
--- a/resources/js/views/RoomsView.vue
+++ b/resources/js/views/RoomsView.vue
@@ -202,6 +202,11 @@
                     @guests-not-allowed="handleGuestsNotAllowed"
                     @changed="reload"
                   />
+                  <RoomJoinByPhoneButton
+                    v-if="running && room.last_meeting.dial_in"
+                    :number="room.last_meeting.dial_in.number"
+                    :pin="room.last_meeting.dial_in.pin"
+                  />
                   <RoomBrowserNotification
                     :room-name="room.name"
                     :running="running"