My login page features a nav-justified list that allows users to connect using either a login/password or guest mode. However, I have encountered an issue where clicking on "Login" still displays the option for "Guest," and if I click on "Guest" again, it creates a loop.
HTML Code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/icon" href="{{ app.request.basepath }}/favicon.ico"/>
<link rel="stylesheet" href="{{ app.request.basepath }}/css/main.css">
<link rel="stylesheet" href="{{ app.request.basepath }}/css/templatemo_main.css">
<link rel="stylesheet" href="{{ app.request.basepath }}/css/bootstrap.min.css">
<title>Nautilus - {% block title %}Authentication{% endblock %}</title>
</head>
<body>
<div class="container">
<h2 class="text-center">{{ block('title') }}</h2>
{% if error %}
<div class="alert alert-danger">
<strong>Error during authentication!</strong> {{ error }}
</div>
{% endif %}
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#invite" data-toggle="tab">Guest</a></li>
<li><a href="#connexion" data-toggle="tab">Login</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade in active connexion" id="invite">
<div class="container">
<div id="content">
<div class="well">
<form class="form-signin form-horizontal" role="form" action="{{ path('login_check') }}" method="post">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<input type="text" name="_username" value="Guest" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<input type="password" name="_password" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade connexion" id="connexion">
<div class="container">
<div id="content">
<div class="well">
<form class="form-signin form-horizontal" role="form" action="{{ path('login_check') }}" method="post">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<input type="text" name="_username" placeholder="Enter your username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<input type="password" name="_password" class="form-control" required placeholder="Enter your password">
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="{{ app.request.basepath }}/js/jquery.min.js"></script>
<script src="{{ app.request.basepath }}/bootstrap/dist/bootstrap.min.js"></script>
<script src="{{ app.request.basepath }}/js/Chart.min.js"></script>
<script src="{{ app.request.basepath }}/js/templatemo_script.js"></script>
</body>
</html>Image : Error