<div class="wrapper">
  <form action="" class="form">
    <input type="text" name="login" class="form__input" placeholder="Логин">
    <input type="password" name="password" class="form__input" placeholder="Пароль">
    <button class="button">Отправить</button>
</form>
<a href="#" class="link" data-type="register">Регистрация</a>
</div>

* {
  box-sizing: border-box;
}
body {
  background: #0a0a0a;
}

.wrapper {
  max-width: 450px;
  width: 100%;
  margin: 20px auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  &__input {
    width: 100%;
    margin-bottom: 8px;
  }
}

const form = document.querySelector('.form')
const link = document.querySelector('.link')

const loginForm = 
    `<input type="text" name="login" class="form__input" placeholder="Логин">
    <input type="password" name="password" class="form__input" placeholder="Пароль">
    <button class="button">Отправить</button>`

const registerForm =
      `<input type="text" name="email" class="form__input" placeholder="Email">
      <input type="text" name="login" class="form__input" placeholder="Логин">
      <input type="password" name="password" class="form__input" placeholder="Пароль">
      <input type="password" name="repeatPassword" class="form__input" placeholder="Повторите пароль">
      <button class="button">Отправить</button>`


link.addEventListener('click', e => {
  e.preventDefault()
  if(e.target.dataset.type === 'register') {
    form.innerHTML = registerForm
    e.target.textContent = 'Войти'
    e.target.dataset.type = 'login'
  } else {
    form.innerHTML = loginForm
    e.target.textContent = 'Регистрация'
    e.target.dataset.type = 'register'
  }
})