I created a route and named it login. So when I created the navbar. I added href="{{ path('login') }}" for the link that leads to the login page. But when I click on the link, it doesn't lead me to the login page. I stay on the home page.
Where can be the problem ? Thank you for your help. :)
Code in SecurityController.php file
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;
class SecurityController extends AbstractController
{
#[Route(path: '/login', name: 'login')]
public function login(AuthenticationUtils $authenticationUtils): Response
{
// if ($this->getUser()) {
// return $this->redirectToRoute('target_path');
// }
// get the login error if there is one
$error = $authenticationUtils->getLastAuthenticationError();
// last username entered by the user
$lastUsername = $authenticationUtils->getLastUsername();
return $this->render('security/login.html.twig', ['last_username' => $lastUsername, 'error' => $error]);
}
#[Route(path: '/logout', name: 'logout')]
public function logout(): void
{
throw new \LogicException('This method can be blank - it will be intercepted by the logout key on your firewall.');
}
}
Code in base.html.twig file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Bootstrap #}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
{# Google fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</head>
<body>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg bg-light">
<!-- Home page -->
<a class="navbar-brand" href="{{ path('home') }}">
<img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
</a>
<!-- Bouton de déploiement -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto px-4">
<!-- Connexion -->
<li class="nav-item">
<a class="nav-link" href="{{ path('login') }}">Se connecter</a>
</li>
<!-- Inscription -->
<li class="nav-item">
<a class="nav-link" href="#">S'inscrire</a>
</li>
</ul>
</div>
</nav>
</header>
{% block main %}{% endblock %}
</body>
</html>
You are generating path for homepage. Change href="{{ path('home') }}" to href="{{ path('login') }}".
Your 'home' path is targeting the homepage, you should replace it by 'login' path.
If you need to protect the 'home' route by authentication, you can creates some access control rules: https://symfony.com/doc/current/security/access_control.html
Related
I'm trying to color the background of readonly input text in my Django templates. I'm being brief in code because the only thing is not working is the color background.
I'm using the field 'rua' as the example. Maybe the problem is with the link of 'my own css' inside the base.html. This file is inside the same folder of the 'style.css':
My forms.py:
'rua': forms.TextInput(attrs={'readonly': 'readonly', 'id': 'rua', 'class': 'readonly'}),
My template:
{% extends "base.html" %}
{% load static %}
{% block content %}
<script src="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<!-- customer login start -->
<div class="customer_login">
<div class="container">
<div class="row">
<!--register area start-->
<div class="col-lg-6 col-md-6 mx-auto">
<div class="account_form register">
{% if register_edit == 'register' %}
<p>{{ msg }}</p>
<h2>Não tem conta? Registre-se!</h2>
<form method="post" action="{% url 'account:register' %}">
{% else %}
<h2>Altere os dados da sua conta</h2>
<form method="post" action="{% url 'account:edit' %}">
{% endif %}
{% csrf_token %}
<div>{{ user_form.as_p }}</div>
<div>{{ profile_form.as_p }}</div>
<p><button type="submit">Enviar</button></p>
</form>
</div>
</div>
<!--register area end-->
</div>
</div>
</div>
<!-- customer login end -->
<script src="{% static 'js/cadastro.js' %}" type="text/javascript"></script>
{% endblock %}
My base.html
{% load static %}
<!doctype html>
<html class="no-js" lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Denise Andrade - Store</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
<!-- CSS
========================= -->
<!-- Plugins CSS -->
<link rel="stylesheet" href="{% static 'css/plugins.css' %}">
<!-- Main Style CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- My Own Style CSS -->
<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">
<!-- Os dados dentro do link 'https://code.jquery.com/jquery-1.11.3.min.js'
do JQUERY do CardJS foram substituídos dentro do arquivo abaixo 'js/plugins.js'
O arquivo 'js/plugins.js' é responsável por rodar o 'cart' na lateral
-->
<script src="{% static 'js/plugins.js' %}"></script>
</head>
My mystyle.css
// Backgroud color in disabled fields (rua, cidade, uf, etc) # register page
.readonly{
background-color: #f6f6f6;
}
The funny thing is: if I insert the CSS code above inside the template, the code works perfectly. But trying to call 'mystyle.css' it does not work.
Any help?
Thank you
I am trying to customize the look of the login page for my laravel application.
Here is the file content structure that I have:
In the layouts/app.blade.php file I am trying to add a "app.min.1.css" css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
so it's the app.min.css, but when I go and run my application I get a parsing error as follows:
The file is there and I did verify it, by creating an stan alone view to see if all the css file and js file were loaded correctly:
All I am trying to do is to use the existing Auth pages provided by laravel, but give them my own look and feel. Is it possible to add you own css and js files ?
Here is the code for the app.blade:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
here is the code for the auth/login/blade:
#extends('layouts.app')
#section('content')
<div class="login" data-lbg="teal">
<!-- Login -->
<div class="l-block toggled" id="l-login">
<div class="lb-header palette-Teal bg">
<i class="zmdi zmdi-account-circle"></i>
Salve! Per favore effettui il login
</div>
<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="lb-body">
<div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input">
<label class="fg-label">Indirizzo Email</label>
</div>
</div>
<div class="form-group fg-float ">
<div class="fg-line">
<input type="password" class="input-sm form-control fg-input">
<label class="fg-label">Password</label>
</div>
</div>
<button class="btn palette-Teal bg">Entra</button>
<div class="m-t-20">
<a data-block="#l-register" data-bg="blue" class="palette-Teal text d-block m-b-5" href="">Crea un Account</a>
<a data-block="#l-forget-password" data-bg="purple" href="" class="palette-Teal text">Password Dimenticata?</a>
</div>
</div>
</form>
</div>
</div>
#endsection
You have an error here.
Remove the space between = and > for 'csrfToken' = > csrf_token(),
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
You've got an extra space here:
'csrfToken' = > csrf_token(),
Fix so that it is:
'csrfToken' => csrf_token(),
Basically I am trying to have an fixed on top nav-bar and using only vanilla bootstrap. This required me to have a modification as the content needs to be padded in order for the page to render correctly.
Below is the form page it renders the Nav Bar on top but the content renders underneath the navbar instead of below it.
NOTE, that the base page itself works for other templates. What gives??
works(list Page):
{% extends 'expirations/index.html' %}
{% block content %}
<div class="container-fluid">
{% for drug in drugs %}
<div class = '.col-sm-12'>
<ul class = 'list-group'>
<li class = "list-group-item" >
<span class = "badge">First Expiration: {{ drug.early_exp|date:"l M d Y" }}</span>
{{ drug.name }}
{% regroup drug.expiration_dates.all by facility as facility_list %}
{% for x in facility_list %}
<span class="label label-info">{{ x.grouper }}</span>
{% endfor %}
</li>
</ul>
</div>
{% endfor %}
</div>
{% endblock %}
doesn't work (form Page):
{% extends "expirations/index.html" %}
{% block content %}
<div class = "container">
<h1>Add Expiration for:</h1>
<h4>{{drug_name.name}}</h4>
<form method="POST" class="post-form">
{% csrf_token %}
{{form.as_p}}
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
{% endblock %}
index.html:
<html>
<head>
<title>Expirations Tracker</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
{# Fonts#}
<link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">
<!---DatePicker-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>>
body {
padding-top: 100px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Expirations</a>
</div>
<div class="collapse navbar-collapse" id="navBar">
<ul class="nav navbar-nav">
<li class="nav-item"><span class ="glyphicon glyphicon-home"></span> Home</li>
<li class="nav-item"><span class = "glyphicon glyphicon-plus"></span> Add Drugs</li>
<li class="nav-item"><span class = "glyphicon glyphicon-calendar"></span> List By Expirations</li>
<li class="nav-item"><span class = "glyphicon glyphicon-map-marker"></span> Facilities Serviced</li>
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script>
$('#id_expirationDate').datepicker({
changeMonth: true,
changeYear: true,
startView: 2,
autoclose: true
});
</script>
</body>
</html>
For me, both of them, the form and the list page, are rendering content underneath the nav bar.
However, there is a typo in your index.html:
<style>>
body {
padding-top: 100px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
</style>
Remove the extra '>' after the <style> tag and it should work fine.
I made authentication example page with php artisan make:auth.
example page If i make changes in css stylesheet nothing is happening. Page is looking same all time. Css stylesheet is located in \public\css folder.
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>
app.css is blank
app.scss
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
_variables.scss
// Body
$body-bg: #f5f8fa;
// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border: $laravel-border-color;
$navbar-default-border: $laravel-border-color;
$panel-default-border: $laravel-border-color;
$panel-inner-border: $laravel-border-color;
// Brands
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;
// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 14px;
$line-height-base: 1.6;
$text-color: #636b6f;
// Navbar
$navbar-default-bg: #fff;
// Buttons
$btn-default-color: $text-color;
// Inputs
$input-border: lighten($text-color, 40%);
$input-border-focus: lighten($brand-primary, 25%);
$input-color-placeholder: lighten($text-color, 30%);
// Panels
$panel-default-heading-bg: #fff;
From https://laravel.com/docs/5.8/frontend#writing-css:
You can compile your SASS files to plain CSS using Laravel Mix. The
npm run dev command will process the instructions in your
webpack.mix.js file.
So execute:
npm install
npm run dev
I'm not sure if you are talking about editing the app.css file or a new custom one.
If app.css gets overwritten by the pre-processor (normally shoudn't), you can always create a new css file in public/css/my-styles.css and load it in your view:
<!-- Styles -->
<link rel="stylesheet" href="{{ URL::asset('/css/app.css') }}">
<link rel="stylesheet" href="{{ URL::asset('/css/my-styles.css') }}">
Make sure to use greater specificity on your css rules to overwrite any predefined settings or use !important when you have too.
Also clearing your browser's cache (or using private mode, like Chrome's Incognito) will make sure that your are seeing your current css settings and not some cached content.
The question title describes my problem. I'm currently trying to make it work with static files, but I also tried using Bootstrap's CDN and tried using hard coded path to the Bootstrap CSS. Additional infos:
settings.py:
STATIC_PATH = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
base.html:
<!DOCTYPE html>
<html lang="en" ng-app="IA">
<head>
{% load staticfiles %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionic.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}"/>
</head>
<body ng-controller="LFSTD">
<div class="container">
<div class="jumbotron">
<div class="bar bar-header">
<button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></button>
<div class="h1 title">
<b>
{% block header_title_block %}{% endblock %}
</b>
</div>
</div>
<div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="LFSTD">
<ion-content class="has-header">
<div>
{% block body_block %}{% endblock %}
</div>
</ion-content>
</ion-side-menu-content>
<!--Left menu -->
<ion-side-menu side="left">
<ion-content class="has-header">
<div class="list">
<a class="item item-icon-left" href="{% url 'profile' %}">
<i class="icon ion-person"></i>
Profile
</a>
<a class="item item-icon-left" href="{% url 'lfstd' %}">
<i class="icon ion-person-stalker"></i>
LFSTD
<span class="badge badge-assertive">10</span>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/ionic.bundle.min.js' %}"></script>
<script src="{% static 'js/ia.js' %}"></script>
</body>
</html>
Anyone has an idea of why Bootstrap ain't loading? The container and the jumbotron divs simply don't modify the look of the page.
The network monitor gives me 304 on both the bootstrap CSS and JS files:
Edit:
Here is my BASEDIR:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Working hardcoded URL:
/static/css/bootstrap.min.css
How I call it with static files:
{% static 'css/bootstrap.min.css' %}
URL from view source:
href="/static/css/bootstrap.min.css"
Edit #2, lead to solution:
After playing around with the static files and the templates, I realized that it is AngularJS messing up my CSS. When I remove
ng-app="IA"
From my < html > tag, all formatting (except from angularJS of course) works.