How do I update my code to have login and signup on the same page in django?

Question

I want to have the login and sign up form on the same page, I also want to signup and login depending on which button was clicked. Here is my registration page enter image description here enter image description here

and here is my 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">
                {% 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">
                {% 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>

I've tried creating an if-statement, but it just breaks the page. I know it's possible, but the ideas I've tried did not work.

Answer 1

If here your page with the two forms, using poor css animations and buttons(could use another element) to toggle display: block; and display: none;

<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':
    }
  </script>
</div>