Merge pull request #519 from im45so/add-qrcode-scanner

Add qrcode scanner

Author: AchoArnold

android/app/build.gradle

@@ -52,6 +52,7 @@ android {
 
 dependencies {
     implementation platform('com.google.firebase:firebase-bom:32.7.4')
+    implementation 'com.journeyapps:zxing-android-embedded:4.3.0'
     implementation 'com.google.firebase:firebase-analytics-ktx'
     implementation 'com.google.firebase:firebase-messaging-ktx'
     implementation 'com.squareup.okhttp3:okhttp:4.10.0'

android/app/src/main/AndroidManifest.xml

@@ -45,6 +45,11 @@
             tools:ignore="LockedOrientationActivity" />
         <activity android:name=".SettingsActivity" android:screenOrientation="portrait"
             tools:ignore="LockedOrientationActivity" />
+        <activity
+        android:name="com.journeyapps.barcodescanner.CaptureActivity"
+        android:screenOrientation="portrait"
+        tools:replace="screenOrientation"
+        tools:ignore="DiscouragedApi" />
 
         <service
             android:name=".services.StickyNotificationService"

android/app/src/main/java/com/httpsms/LoginActivity.kt

@@ -23,6 +23,8 @@ import com.google.android.material.button.MaterialButton
 import com.google.android.material.progressindicator.LinearProgressIndicator
 import com.google.android.material.textfield.TextInputEditText
 import com.google.android.material.textfield.TextInputLayout
+import com.journeyapps.barcodescanner.ScanContract
+import com.journeyapps.barcodescanner.ScanOptions
 import timber.log.Timber
 import java.net.URI
 
@@ -36,6 +38,39 @@ class LoginActivity : AppCompatActivity() {
         setPhoneNumber()
         disableSim2()
         setServerURL()
+        setupApiKeyInput()
+    }
+
+    private fun setupApiKeyInput() {
+        val apiKeyInputLayout = findViewById<TextInputLayout>(R.id.loginApiKeyTextInputLayout)
+        val apiKeyInput = findViewById<TextInputEditText>(R.id.loginApiKeyTextInput)
+
+        apiKeyInput.setOnClickListener {
+            startQrCodeScan()
+        }
+
+        apiKeyInputLayout.setEndIconOnClickListener {
+            startQrCodeScan()
+        }
+    }
+
+    private val barcodeLauncher = registerForActivityResult(ScanContract()) { result ->
+        if (result.contents != null) {
+            val apiKeyInput = findViewById<TextInputEditText>(R.id.loginApiKeyTextInput)
+            apiKeyInput.setText(result.contents)
+            Toast.makeText(this, "Scanned: ${result.contents}", Toast.LENGTH_LONG).show()
+        } else {
+            Toast.makeText(this, "Scan cancelled", Toast.LENGTH_SHORT).show()
+        }
+    }
+
+    private fun startQrCodeScan() {
+        val options = ScanOptions()
+        options.setPrompt("Scan a QR code")
+        options.setBeepEnabled(true)
+        options.setOrientationLocked(false)
+        options.setCameraId(0)
+        barcodeLauncher.launch(options)
     }
 
     override fun onStart() {

android/app/src/main/res/layout/activity_login.xml

@@ -41,10 +41,13 @@
         style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        app:errorEnabled="true"
         android:hint="@string/text_area_api_key"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
+        app:errorEnabled="true"
+        app:endIconMode="custom"
+        app:endIconDrawable="@android:drawable/ic_menu_camera"
+        app:endIconContentDescription="cameraButton"
+        app:layout_constraintBottom_toTopOf="@+id/loginPhoneNumberLayoutSIM1"
+        app:layout_constraintTop_toBottomOf="@+id/textView"
         tools:layout_editor_absoluteX="16dp">
 
         <com.google.android.material.textfield.TextInputEditText
@@ -131,7 +134,6 @@
         android:id="@+id/linearLayout"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_weight="50"
         android:orientation="vertical"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"

web/package.json

@@ -38,6 +38,7 @@
     "moment": "^2.30.1",
     "nuxt": "^2.18.1",
     "nuxt-highlightjs": "^1.0.3",
+    "qrcode": "^1.5.0",
     "ufo": "^1.5.4",
     "vue": "^2.7.16",
     "vue-chartjs": "^5.3.1",

web/pages/settings/index.vue

@@ -82,6 +82,26 @@
                 copy-text="Copy API Key"
                 notification-text="API Key copied successfully"
               ></copy-button>
+              <v-btn 
+                color="primary" 
+                @click="showQrCodeDialog = true" 
+                class="ml-4"
+              >
+              <v-icon left>{{ mdiQrcode }}</v-icon>
+                  Show QR Code
+              </v-btn>
+              <v-dialog v-model="showQrCodeDialog" max-width="400px">
+                <v-card>
+                  <v-card-title>API Key QR Code</v-card-title>
+                  <v-card-text>
+                    <canvas ref="qrCodeCanvas"></canvas>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" text @click="showQrCodeDialog = false">Close</v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
               <v-btn
                 v-if="$vuetify.breakpoint.lgAndUp"
                 class="ml-4"
@@ -714,7 +734,9 @@ import {
   mdiLinkVariant,
   mdiEyeOff,
   mdiSquareEditOutline,
+  mdiQrcode,
 } from '@mdi/js'
+import QRCode from 'qrcode'
 import { ErrorMessages } from '~/plugins/errors'
 import LoadingButton from '~/components/LoadingButton.vue'
 
@@ -731,6 +753,7 @@ export default Vue.extend({
       mdiAccountCircle,
       mdiShieldCheck,
       mdiDelete,
+      mdiQrcode,
       mdiLinkVariant,
       mdiContentSave,
       mdiSquareEditOutline,
@@ -741,6 +764,7 @@ export default Vue.extend({
       showDiscordEdit: false,
       showRotateApiKey: false,
       rotatingApiKey: false,
+      showQrCodeDialog: false,
       activeWebhook: {
         id: null,
         url: '',
@@ -803,6 +827,15 @@ export default Vue.extend({
       })
     },
   },
+  watch: {
+    showQrCodeDialog(newVal) {
+      if (newVal && this.apiKey) {
+        this.$nextTick(() => {
+          this.generateQrCode(this.apiKey);
+        });
+      }
+    },
+  },
   async mounted() {
     await Promise.all([
       this.$store.dispatch('clearAxiosError'),
@@ -818,6 +851,16 @@ export default Vue.extend({
   },
 
   methods: {
+    generateQrCode(text) {
+      const canvas = this.$refs.qrCodeCanvas;
+      if (canvas) {
+        QRCode.toCanvas(canvas, text, { errorCorrectionLevel: 'H' }, (err) => {
+          if (err) {
+            console.error(err);
+          }
+        });
+      }
+    },
     updateEmailNotifications() {
       this.notificationSettings = {
         webhook_enabled: