Как обновить код, чтобы логин и регистрация были на одной странице в django?

Я хочу иметь форму регистрации и входа на одной странице, я также хочу, чтобы регистрация и вход в систему зависели от того, какая кнопка была нажата. Вот моя страница регистрации введите описание изображения здесь введите описание изображения здесь

и вот мой views.py

def register_view(request):

    if request.method == "POST":
        form = UserRegisterForm(request.POST or None)
        if form.is_valid():
            new_user = form.save()
            username = form.cleaned_data.get("username")
            messages.success(request, f"Hey {username}, Your account was created successfuly")
            new_user = authenticate(username=form.cleaned_data['email'], 
                                    password = form.cleaned_data['password1'])
            login(request, new_user)
            return redirect("core:index")
    else:
        print("User cannot be registered")
        form = UserRegisterForm()

    context = {
        'form': form,
    }
    return render(request, "userauths/sign-up.html", context)

def login_view(request):
    if request.user.is_authenticated:
        return redirect("core:index")
    if request.method == "POST":
        email = request.POST.get("email")
        password = request.POST.get("password")
        
        try:
            user = User.object.get(email=email)
        except:
            messages.warning(request, f"User with {email} does not exist")
            
        user = authenticate(request, email=email, password=password)
        
        if user is not None:
            login(request, user)
            messages.succes(request, "You are logged in")
            return redirect("core:index")
        else:
            messages.warning(request, "User does not exist. Create an account!!")
    
    context = {
        
    }
    return render(request, "userauths/sign-in.html", context)

register.html

<div class="login-form">
              <form class="sign-in-htm" method="post" method="POST">
                {% csrf_token%}
                <div class="group">
                  <label for="user" class="label">Email</label>
                  <input id="user" type="text" class="input" required name="email">
                </div>
                <div class="group">
                  <label for="pass" class="label">Password</label>
                  <input id="pass" type="password" class="input" name="password" required data-type="password">
                </div>
                <div class="group">
                  <input id="check" type="checkbox" class="check" checked>
                  <label for="check"><span class="icon"></span> Keep me Signed in</label>
                </div>
                <div class="group">
                  <input type="submit" class="button" value="sign-in">
                </div>
                <div class="hr"></div>
                <div class="foot-lnk">
                  <a href="#forgot">Forgot Password?</a>
                </div>
              </form>
              <form class="sign-up-htm" method="post" method="POST">
                {% csrf_token %}
                <div class="group">
                    {{form.username}}
                  </div>
                  <div class="group">
                    {{form.password1}}
                  </div>
                  <div class="group">
                      {{form.password2}}
                    </div>
                  <div class="group">
                    {{form.email}}
                  </div>
 
                <div class="group">
                  <input type="submit" class="button" value="sign-up">
                </div>
                <div class="hr"></div>
                <div class="foot-lnk">
                  <label for="tab-1">Already Member?</a>
                </div>
              </form>
            </div>

Я пробовал создать if-статью, но она просто ломает страницу. Я знаю, что это возможно, но те идеи, которые я пробовал, не сработали.

<div form-container>
  <div toggle-login-buttons-or-links>
    <button onclick="switchToLogin()">
      login
    </button>
    or
    <button onclick="switchToRegister()">
      register
    </button>
  </div>
  <div forms> <!-- default to login -->
    <form login    style="transition: 0.5s;">...</form>
    <form register style="transition: 0.5s; display: none;">...</form>
  </div>
  <script>
    function switchToLogin() {
      let
        login = document.querySelector("form[login]"),
        register = document.querySelector("form[register]");
      login.style.display = 'block':
      register.style.display = 'none':
    }
    function switchToRegister() {
      let
        login = document.querySelector("form[login]"),
        register = document.querySelector("form[register]");
      login.style.display = 'none':
      register.style.display = 'block':
    }
</div>