Merge pull request #331 from isucon/frontend/267_jia-login-style

ShotaKitazawa · web-flow · commit 987990a8c96a · 2021-07-09T23:10:14.000+09:00
[frontend] ログイン画面をましにした
diff --git a/webapp/jiaapi_mock/index.html b/webapp/jiaapi_mock/index.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
 
-<body>
-  <div style="display: flex;flex-direction: column;">
+<body style="padding: 3.5rem;display: flex;justify-content: center;">
+  <div
+    style="display: flex;flex-direction: column;padding: 4rem;max-width: 56rem;gap: 0.5rem;border: 1px solid;border-color: dimgray;border-radius: 0.5rem;align-items: center;">
+    <h2 style="align-self: flex-start;">Sign in with JIA</h2>
     <label>
       ユーザー名
       <input id="user">
@@ -11,7 +13,8 @@
       パスワード
       <input id="password" type="password">
     </label>
-    <button id="login">login</button>
+    <button id="login"
+      style="margin-top: 1.5rem;background-color: transparent;border-color: dimgray;cursor: pointer;outline: none;padding: 0.1rem;width: 5rem;appearance: none;border-radius: 8px;">login</button>
   </div>
 </body>
 <script>
@@ -24,10 +27,14 @@
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ user: userEl.value, password: passwordEl.value })
     }).then(v => {
+      if (!v.ok) {
+        alert('ユーザー名かパスワードが間違っています')
+        throw ''
+      }
       console.log(v)
       v.text().then(jwt => {
         console.log(jwt)
-        location.href = `http://localhost:3000?jwt=${jwt}`
+        location.href = `${document.referrer}?jwt=${jwt}`
       })
     })
   })
