Как при авторизации профиля менять элементы меню шапки?

171
14 апреля 2022, 12:40

С помощью базы данных на firebase создала авторизацию .Как при входе или выходе из аккаунта менять элементы меню? Надо чтобы стандартно стояло Вход и Регистрация ,при входе в аккаунт менялось на Личный кабинет и Выйти .Делаю с помощью hide и js,но все эти элементы меню пропадают

  const txtLogin = document.getElementById("txtLogin");
  const txtPass = document.getElementById("txtPassword");
  const txtValidPass = document.getElementById("txtValidPassword");
  const btnReg = document.getElementById("btnReg");
  const headauth = document.getElementById("headauth");
  const headprofile = document.getElementById("headprof");
  
  ;
  
  btnReg.addEventListener("click", (event) => {
    const Login = txtLogin.value;
    const Pass = txtPass.value;
    const ValidPass = txtValidPass.value;
    const auth = firebase.auth();
    if (Pass === ValidPass) {
      const promise = auth.createUserWithEmailAndPassword(Login, Pass);
      promise.catch((event) => alert(event.message));
    } else {
      alert("Пароли не совпадают");
    }
  });
  firebase.auth().onAuthStateChanged((firebaseUser) => {
   
    if (firebaseUser) {
      console.log(firebaseUser);
      alert("Вы  вошли в аккаунт");
      headprofile.classList.add('hide') ;         
    } else {
      alert("Вы не вошли в аккаунт");
      headauth.classList.add('hide') ; 
    }
  });
}();
.hide{
  display: none;
} 
.hide2{
  display: none;
} 
  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
    integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;469;500;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="styles/authorization.css" />

  <title>GameLand.by</title>
</head>

<body>
  <div class="sticky-top">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="row">
        <div class="col-md-3 text-center ">
          <svg width="35px" height="35px" viewBox="0 0 16 16" class="bi bi-controller contriller mb-1 "
            fill="currentColor" style="color:#63ADD0" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
              d="M11.119 2.693c.904.19 1.75.495 2.235.98.407.408.779 1.05 1.094 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.815-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773a11.307 11.307 0 0 1-.739-.809c-.126-.147-.25-.291-.368-.422-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.422-.243.283-.494.576-.739.81-.398.378-.877.705-1.513.772a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772.486-.485 1.331-.79 2.235-.98.932-.196 2.03-.292 3.119-.292 1.089 0 2.187.096 3.119.292zm-6.032.979c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 0 0-.748 2.295 12.351 12.351 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.505C4.861 9.97 5.978 9.026 8 9.026s3.139.943 3.965 1.855c.164.182.307.35.44.505.214.25.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 0 0-.339-2.406 13.753 13.753 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z" />
            <path
              d="M11.5 6.026a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1 1a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1 1a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-7-2.5h1v3h-1v-3z" />
            <path
              d="M3.5 6.526h3v1h-3v-1zM3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .258.966l-1.932.518a.5.5 0 0 1-.612-.354zm9.976 0a.5.5 0 0 0-.353-.613l-1.932-.518a.5.5 0 1 0-.259.966l1.932.518a.5.5 0 0 0 .612-.354z" />
          </svg>
          <a class="navbar-brand" href="main.html">
            <h4>GameLand</h4>
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <div class="col-md-9 text-center ">
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav col-6 mr-auto text-center">
              <li class="nav-item mr-4 ml-4">
                <a class="nav-link" href="news.html">Новости</a>
              </li>
              <li class="nav-item mr-4 ml-4">
                <a class="nav-link " href="#">Игры</a>
              </li>
              <li class="nav-item mr-4 ml-4">
                <a class="nav-link " href="calendar.html">Календарь</a>
              </li>
              <li class="nav-item mr-4 ml-4">
                <a class="nav-link " href="contacts.html">Контакты</a>
              </li>
            </ul>
            <ul class="navbar-nav col-6 mr-auto">
              <li class="nav-item mr-1 ml-2 hide" id="headauth">
                <a class="nav-link font-weight-bold" href="authorization.html">Вход</a>
              </li>
              <li class="nav-item mr-1 ml-2 hide" id="headauth">
                <a class="nav-link font-weight-bold " href="registration.html">Регистрация</a>
              </li>
              <li class="nav-item mr-1 ml-2 hide2" id="headprof">
             <a class="nav-link font-weight-bold">Выйти</a>
              </li>
              <li class="nav-item mr-1 ml-2 hide2" id="headprof">
                <a class="nav-link font-weight-bold " href="#">Личный кабинет</a>
              </li>
              <li class="nav-item mr-3 ml-3">
                <div class="container h-100">
                  <div class="d-flex justify-content-center h-100">
                    <div class="searchbar">
                      <input class="search_input" type="text" name="" placeholder="Search...">
                      <a href="#" class="search_icon">
                        <svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-search  search  mt-2 mr-2   "
                          fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd"
                            d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
                          <path fill-rule="evenodd"
                            d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
                        </svg>
                        </i>
                      </a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
    <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-storage.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/firebase/7.24.0/firebase-auth.min.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a38862ad2c.js" crossorigin="anonymous"></script>
  <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
<script src="js/registrationforms.js"></script>
</body>
</html>

Answer 1

Для конкретного решения:

const menu = document.querySelector('.navbar-nav')
const controlButtons = [...document.querySelectorAll('.headauth'), ...document.querySelectorAll('.headprof')]
// авторизация или регистрация
// ...
let isAuth = false
document.querySelector('button').addEventListener('click', function () {
  menu.classList.toggle('hide')
  for (let i = 0; i < controlButtons.length; i++) {
    controlButtons[i].classList.toggle('hide')
  }
  isAuth = !isAuth
  if (isAuth) {
    this.innerHTML = 'Выйти'
  } else {
    this.innerHTML = 'Войти'
  }
  
})
.hide {
  display: none;
}
<div class="col-md-9 text-center ">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav col-6 mr-auto text-center hide">
      <li class="nav-item mr-4 ml-4">
        <a class="nav-link" href="news.html">Новости</a>
      </li>
      <li class="nav-item mr-4 ml-4">
        <a class="nav-link " href="#">Игры</a>
      </li>
      <li class="nav-item mr-4 ml-4">
        <a class="nav-link " href="calendar.html">Календарь</a>
      </li>
      <li class="nav-item mr-4 ml-4">
        <a class="nav-link " href="contacts.html">Контакты</a>
      </li>
    </ul>
    <ul class="navbar-nav col-6 mr-auto">
      <li class="nav-item mr-1 ml-2 headauth">
        <a class="nav-link font-weight-bold" href="authorization.html">Вход</a>
      </li>
      <li class="nav-item mr-1 ml-2 headauth">
        <a class="nav-link font-weight-bold " href="registration.html">Регистрация</a>
      </li>
      <li class="nav-item mr-1 ml-2 headprof hide">
        <a class="nav-link font-weight-bold">Выйти</a>
      </li>
      <li class="nav-item mr-1 ml-2 headprof hide">
        <a class="nav-link font-weight-bold " href="#">Личный кабинет</a>
      </li>
      <li class="nav-item mr-3 ml-3">
        <div class="container h-100">
          <div class="d-flex justify-content-center h-100">
            <div class="searchbar">
              <input class="search_input" type="text" name="" placeholder="Search...">
              <a href="#" class="search_icon">
                <svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-search  search  mt-2 mr-2   " fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd"
                            d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
                          <path fill-rule="evenodd"
                            d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
                        </svg>
                </i>
              </a>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<button>Войти</button>

Убрал id="headprof" и id="headauth", но добавил их в классы

<li class="nav-item mr-1 ml-2 headauth">, <li class="nav-item mr-1 ml-2 headprof hide">.

Не давайте, пожалуйста, одинаковые id разным элементам, используйте для этого классы.

READ ALSO
Обводка текста на чистом СSS
CSS

Обводка текста на чистом СSS

Хочу сделать обводку текста как на макете, но никак не выходитВот как должно быть:

 236
На мобильном устройстве код не работает
CSS

На мобильном устройстве код не работает

почему этот кусок кода не работает на мобильных устройствахДаже когда захожу через консоль в мобильный режим всё срабатывает, а на телефоне...

 180
Cпособы закрытия окна [закрыт]
CSS

Cпособы закрытия окна [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

 247
Фильтр SVG: шириной 100% высотой 100% не полностью обрабатывает изображение
CSS

Фильтр SVG: шириной 100% высотой 100% не полностью обрабатывает изображение

У меня есть простой фильтр SVGЕсли вы щелкните на примере ниже, этот фильтр появится / исчезнет:

 101