Я хочу, чтобы форма входа и регистрации находилась на одной странице, я также хочу зарегистрироваться и войти в систему в зависимости от того, какая кнопка была нажата. Вот моя страница регистрации введите сюда описание изображениявведите сюда описание изображения
и вот мои представления.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)
регистр.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>
Я пытался создать оператор if, но он просто разрывает страницу. Я знаю, что это возможно, но идеи, которые я пробовал, не сработали.
Если здесь ваша страница с двумя формами, используя плохое
CSS-анимация и кнопки (можно использовать другой элемент) для переключения display: block;
и 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>
@ken-morel Мне нужна одна страница с двумя разными формами. Пользователь может переключаться между входом в систему и регистрацией с помощью функции скрытия JavaScript.