From dae6f74f73201ca5dbd96c7f5efb2babb6038a81 Mon Sep 17 00:00:00 2001
From: dhao2001 <dhao2001@outlook.com>
Date: Sat, 30 Apr 2022 20:50:20 +0800
Subject: [PATCH] Add Login Modal and pop up

---
 src/App.vue                   |  9 ++++--
 src/components/ImageForm.vue  |  8 ++---
 src/components/LoginModal.vue | 59 +++++++++++++++++++++++++++++++++++
 src/components/NavBar.vue     | 34 +++++++++++++-------
 4 files changed, 90 insertions(+), 20 deletions(-)
 create mode 100644 src/components/LoginModal.vue

diff --git a/src/App.vue b/src/App.vue
index 0e8ed7b..e603f62 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,12 @@
 <template>
+  <login-modal id="loginModal"></login-modal>
   <header>
     <nav-bar></nav-bar>
   </header>
   <main class="container">
     <image-form @detect-responsed="onDetectResponsed"></image-form>
     <detect-result
-      v-show="detectResultShow"
+      v-show="showDetectResult"
       :diseaseName="detectResult.diseaseName"
       :imageUrl="detectResult.imageUrl"
       :trustworthiness="detectResult.trustworthiness"
@@ -17,6 +18,7 @@
 <script>
 import DetectResult from "./components/DetectResult.vue";
 import ImageForm from "./components/ImageForm.vue";
+import LoginModal from "./components/LoginModal.vue";
 import NavBar from "./components/NavBar.vue";
 import NewsAlbum from "./components/NewsAlbum.vue";
 
@@ -25,6 +27,7 @@ export default {
   components: {
     DetectResult,
     ImageForm,
+    LoginModal,
     NavBar,
     NewsAlbum,
   },
@@ -35,13 +38,13 @@ export default {
         imageUrl: "",
         trustworthiness: 0.0,
       },
-      detectResultShow: false,
+      showDetectResult: false,
     };
   },
   methods: {
     onDetectResponsed(res) {
       this.detectResult = res.data;
-      this.detectResultShow = true;
+      this.showDetectResult = true;
     },
   },
 };
diff --git a/src/components/ImageForm.vue b/src/components/ImageForm.vue
index ab601b6..b52b582 100644
--- a/src/components/ImageForm.vue
+++ b/src/components/ImageForm.vue
@@ -2,10 +2,8 @@
   <section class="py-5 text-center container">
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
-        <h1 class="fw-light">Skin Disease Detection</h1>
-        <p class="lead text-muted">
-          Know more about your skin, before it's too late!
-        </p>
+        <h1 class="fw-light">皮肤病在线诊断</h1>
+        <p class="lead text-muted">未雨绸缪，自求多福</p>
         <form enctype="multipart/form-data" style="display: none">
           <input
             ref="skinImgInput"
@@ -19,7 +17,7 @@
           class="btn btn-primary my-2"
           @click="onPickClicked"
         >
-          Pick a Image
+          上传图片
         </button>
       </div>
     </div>
diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
new file mode 100644
index 0000000..11d426d
--- /dev/null
+++ b/src/components/LoginModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="modal fade" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog modal-dialog-centered">
+      <div class="modal-content rounded-5 shadow">
+        <div class="modal-header p-5 pb-4 border-bottom-0">
+          <!-- <h5 class="modal-title">Modal title</h5> -->
+          <h2 class="fw-bold mb-0">登 录</h2>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+
+        <div class="modal-body p-5 pt-0">
+          <form class="">
+            <div class="form-floating mb-3">
+              <input
+                type="email"
+                class="form-control rounded-4"
+                id="floatingInput"
+                placeholder="name@example.com"
+              />
+              <label for="floatingInput">手机号</label>
+            </div>
+            <div class="form-floating mb-3">
+              <input
+                type="password"
+                class="form-control rounded-4"
+                id="floatingPassword"
+                placeholder="Password"
+              />
+              <label for="floatingPassword">密码</label>
+            </div>
+            <button
+              class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"
+              type="submit"
+            >
+              登录
+            </button>
+            <button
+              class="w-100 mb-2 btn btn-lg rounded-4 btn-success"
+              type="submit"
+            >
+              注册
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0798944..1692be2 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -47,19 +47,29 @@
           />
           <circle cx="12" cy="13" r="4" />
         </svg>
-        <strong>EasySkin</strong>
+        <strong>自求多肤</strong>
       </a>
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navbarHeader"
-        aria-controls="navbarHeader"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
+      <div>
+        <button
+          type="button"
+          class="btn btn-outline-light mx-3"
+          data-bs-toggle="modal"
+          data-bs-target="#loginModal"
+        >
+          Login
+        </button>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarHeader"
+          aria-controls="navbarHeader"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+      </div>
     </div>
   </div>
 </template>