Add Capacitor App plugin

Got17 · Oct 18, 2024 · 082d511 · 082d511
1 parent 30cfad4
commit 082d511
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/FingerAuth/package-lock.json b/FingerAuth/package-lock.json
diff --git a/FingerAuth/package.json b/FingerAuth/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@aparajita/capacitor-biometric-auth": "^8.0.2",
     "@capacitor/android": "^6.1.2",
+    "@capacitor/app": "^6.0.1",
     "@capacitor/camera": "^6.0.2",
     "@capacitor/core": "^6.1.2",
     "@capacitor/dialog": "^6.0.1",

diff --git a/FingerAuth/wwwroot/index.html b/FingerAuth/wwwroot/index.html
@@ -21,8 +21,12 @@
         <p class="authenticate-text">Please authenticate</p>
         <input id="username" placeholder="Username" ws-var="Username" /><br />
         <input id="password" type="password" placeholder="Password" ws-var="Password" />
-        <button role="button" ws-onclick="LogIn" href="${ToPicDrawPage}" class="login-button">Log in</button>
-        <button role="button" ws-onclick="BiometricAuthenticate" href="${ToPicDrawPage}" class="authenticate-button">Authorize with Biometric</button>
+        <div class="login-button-container">
+            <button role="button" ws-onclick="LogIn" href="${ToPicDrawPage}" class="login-button">Log in</button>
+        </div>
+        <div class="login-button-container">
+            <button role="button" ws-onclick="BiometricAuthenticate" href="${ToPicDrawPage}" class="authenticate-button">Authorize with Biometric</button>
+        </div>
     </div>
     <!--PicDraw Page-->
     <div id="main" ws-children-template="PicDraw">
@@ -39,7 +43,7 @@
         </div>
         <br />
         <div class="canvas-container">
-            <canvas id="annotationCanvas" width="300" height="300" ws-hole="canvas"
+            <canvas id="annotationCanvas" width="300" height="400" ws-hole="canvas"
                     ws-onmouseDown="canvasMouseDown" ws-onmouseup="canvasMouseUp"
                     ws-onmouseout="canvasMouseOut" ws-onmousemove="canvasMouseMove"
                     ws-onafterrender="canvasInit"></canvas>

diff --git a/FingerAuth/wwwroot/styles.css b/FingerAuth/wwwroot/styles.css
@@ -5,6 +5,16 @@ body {
     background-color: #f4f4f4;
     min-height: 100vh;
     padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+}
+
+* {
+    box-sizing: border-box;
 }
 
 a {
@@ -22,10 +32,9 @@ a {
 
 #text {
     background: transparent;
-    padding: 20px;
+    padding: 15px;
     border-radius: 10px;
     width: 100%;
-    max-width: 400px;
 }
 
 .authenticate-text,
@@ -35,6 +44,13 @@ a {
     margin-bottom: 20px;
     color: #333;
 }
+.login-button-container {
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    align-items:center;
+    width: 100%
+}
 
 input {
     width: 100%;
@@ -43,6 +59,7 @@ input {
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 1rem;
+    box-sizing: border-box;
 }
 
 .login-button, .authenticate-button {
@@ -54,7 +71,7 @@ input {
     border-radius: 5px;
     font-size: 1rem;
     cursor: pointer;
-    margin: 10px 0;
+    margin: 10px 0px;
 }
 
 #captureBtn,
@@ -75,10 +92,9 @@ input {
 
 #main {
     background: transparent;
-    padding: 20px;
+    padding: 15px;
     border-radius: 10px;
     width: 100%;
-    max-width: 400px;
 }
 
 .choose-color-text {