Merge pull request #22 from FltSv/5-AddLogoutButton

#5 ログアウトボタンの実装、マイページボタンの追加、表示切り替えの実装
FltSv · Nov 11, 2023 · 4c71cac · 4c71cac
2 parents c9c126f + 88627be
commit 4c71cac
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 5 deletions.
diff --git a/Hosting/public/index.html b/Hosting/public/index.html
@@ -21,7 +21,9 @@
 
 <body>
   <header>
-    <a href="/login" class="rounded-button">Creator Login</a>
+    <a id="header-login-button" href="/login" class="rounded-button" style="display: none;">Creator Login</a>
+    <a id="header-mypage-button" href="/mypage" class="rounded-button" style="display: none;">MyPage</a>
+    <a id="header-logout-button" href="/" class="rounded-button" style="display: none;">Logout</a>
   </header>
 
   <div id="contents">

diff --git a/Hosting/public/mypage/index.html b/Hosting/public/mypage/index.html
@@ -17,6 +17,10 @@
 </head>
 
 <body>
+  <header>
+    <a id="header-logout-button" href="/" class="rounded-button" style="display: none;">Logout</a>
+  </header>
+
   <div id="contents">
     <h1><a href="/">Gallery Found</a></h1>
 

diff --git a/Hosting/public/styles.css b/Hosting/public/styles.css
@@ -16,7 +16,8 @@ header {
 
 /* 角丸ボタンのスタイル */
 .rounded-button {
-  padding: 10px 20px;
+  padding: 0.5em 1em;
+  margin: 0 0.2em;
   border: 1px solid black;
   border-radius: 25px;
   color: black;

diff --git a/Hosting/src/index.js b/Hosting/src/index.js
@@ -39,7 +39,24 @@ onAuthStateChanged(auth, user => {
   } else {
     console.log('No User.')
   }
-});
 
-// ログアウト
-// firebase.auth().signOut();
+  // ログインボタン等の表示切り替え
+  const isLogin = user !== null
+
+  // ログイン中のみ表示
+  const logoutButton = document.getElementById('header-logout-button')
+  if (logoutButton) {
+    logoutButton.style.display = isLogin ? "block" : "none";
+  }
+
+  const mypageButton = document.getElementById('header-mypage-button')
+  if (mypageButton) {
+    mypageButton.style.display = isLogin ? "block" : "none";
+  }
+
+  // ログアウト中のみ表示
+  const loginButton = document.getElementById('header-login-button')
+  if (loginButton) {
+    loginButton.style.display = isLogin ? "none" : "block";
+  }
+});
diff --git a/Hosting/src/login.js b/Hosting/src/login.js
@@ -1,6 +1,13 @@
 //@ts-check
 import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, sendEmailVerification } from "firebase/auth";
 
+// イベント
+document.addEventListener('DOMContentLoaded', event => {
+  // ログアウトボタン
+  document.getElementById('header-logout-button')?.addEventListener('click', signout);
+});
+
+
 // パスワードの表示非表示を切替
 export function changePwdVisible() {
   const setType = this.checked ? 'text' : 'password';
@@ -93,6 +100,12 @@ export async function signupMail() {
   window.location.href = "/login/sendverify.html";
 }
 
+// ログアウト
+function signout() {
+  getAuth().signOut();
+  window.location.href = '/';
+}
+
 /**
  * 認証状態により、ページ移動のハンドリングを行う
  * メールアドレス認証が行われていない場合、