Commit 0292219d authored by David Haynes's avatar David Haynes 🙆

Dynamic AuthButton

- django plops data into an object on the window that React reads and reacts to
- nice
parent 9214318d
Pipeline #2980 passed with stage
in 56 seconds
import React from "react";
import { Button } from "reactstrap";
class AuthButton extends React.Component {
constructor(props) {
super(props);
this.state = { is_auth: false };
}
componentDidMount() {
this.setState(() => {
return { is_auth: window.django.user.is_authenticated == "True" };
});
}
render() {
return (
<div>
{this.state.is_auth ? (
<Button color="info" href="/auth/logout">
Logout
</Button>
) : (
<Button color="info" href="/auth/login">
Login
</Button>
)}
</div>
);
}
}
export default AuthButton;
// Apply Global Masonstrap styling
import "masonstrap/build/css/masonstrap.min.css";
import "masonstrap/build/js/masonstrap.min.js";
import React from "react";
import ReactDOM from "react-dom";
import AuthButton from "./AuthButton.jsx";
ReactDOM.render(
<div>
<p>Hello Go 3 with React!</p>
</div>,
document.getElementById("root")
);
ReactDOM.render(<AuthButton />, document.getElementById("root"));
{% load static %}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#006633" />
<meta name="description" content="University-branded URL shortening" />
<title>Welcome &bull; SRCT Go</title>
</head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#006633" />
<meta name="description" content="University-branded URL shortening" />
<title>Welcome &bull; SRCT Go</title>
</head>
<body>
<!-- React injects itself here -->
<div id="root"></div>
</body>
<body>
<!-- React injects itself here -->
<div id="root"></div>
</body>
<script>
window.django = {
logout: "{% url "cas_logout" %}",
user: {
username: "{{ request.user.username }}",
full_name: "{{ request.user.get_full_name }}",
last_login: "{{ request.user.last_login }}",
is_authenticated: "{{ request.user.is_authenticated }}"
}
};
</script>
<script src="static/main.js"></script>
<script src="static/main.js"></script>
</html>
</html>
\ No newline at end of file
......@@ -29,7 +29,7 @@ urlpatterns = [
# Authentication URLs
path('auth/login/', cas_views.login, name='cas_login'),
path('auth/logout/', cas_views.logout, {'next_page': '/'}, name='cas_logout'),
path('auth/logout/', cas_views.logout, name='cas_logout'),
# /admin - Administrator interface.
path('admin/', admin.site.urls, name='go_admin'),
......
module.exports = {
module: {
rules: [{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
}
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
}
]
}
};
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment