kinda works 🤗

Author: mdamyanova

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example.csproj

@@ -33,6 +33,7 @@
     <None Remove="ClientApp\components\About.tsx" />
     <None Remove="ClientApp\components\Error.tsx" />
     <None Remove="ClientApp\components\Example.tsx" />
+    <None Remove="ClientApp\components\Footer.tsx" />
     <None Remove="ClientApp\components\users\Logout.tsx" />
     <None Remove="ClientApp\css\home.css" />
     <None Remove="ClientApp\css\loading.css" />
@@ -47,6 +48,7 @@
     <TypeScriptCompile Include="ClientApp\components\About.tsx" />
     <TypeScriptCompile Include="ClientApp\components\Error.tsx" />
     <TypeScriptCompile Include="ClientApp\components\Example.tsx" />
+    <TypeScriptCompile Include="ClientApp\components\Footer.tsx" />
     <TypeScriptCompile Include="ClientApp\components\users\Login.tsx" />
     <TypeScriptCompile Include="ClientApp\components\users\Logout.tsx" />
     <TypeScriptCompile Include="ClientApp\components\users\Register.tsx" />

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/About.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
+import { Grid, Row } from 'react-bootstrap';
 
 export class About extends React.Component<any, any> {
     public render() {
         return (
-            <div className="about">
-                <h3>This is our about page.</h3>
-                <p>Ellipsis loading icon by loading.io</p>
-                <p>Baby cow image by neko-kuma.deviantart.com</p>
-            </div>
+            <Grid className="about">
+                <Row className="text-center">
+                    <h3>This is our about page.</h3>
+                    <p>Ellipsis loading icon by loading.io</p>
+                    <p>Baby cow image by neko-kuma.deviantart.com</p>
+                </Row>
+            </Grid>
         );
     }
 }

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/Layout.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { NavMenu } from './NavMenu';
+import { Footer } from './Footer';
 
 export interface LayoutProps {
     children?: React.ReactNode;
@@ -11,6 +12,7 @@ export class Layout extends React.Component<LayoutProps, {}> {
             <div>
                 <NavMenu />
                 {this.props.children}
+                <Footer />
             </div>
         );
     };

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/NavMenu.tsx

@@ -1,46 +1,49 @@
 import * as React from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { Navbar, NavItem, Nav } from 'react-bootstrap';
-import { isLoggedIn, getUser, removeAccessToken } from '../utils/helpers';
+import { isLoggedIn, getUser } from '../utils/helpers';
+import { logout } from './users/Logout';
 
 export class NavMenu extends React.Component<{}, {}> {
     constructor() {
         super();
-
-        this.logout = this.logout.bind(this);
-    }
-
-    logout() {
-        removeAccessToken();
-        window.location.hash = '/';
     }
 
     render() {
-        let content = isLoggedIn()
+        let auth = isLoggedIn()
             ?
             <Nav pullRight>
                 {/*TODO: getUser can go to user profile page :)*/}
                 <NavItem eventKey={1}>{`${getUser()}`}</NavItem>
-                <NavItem eventKey={2} onClick={this.logout}>Logout</NavItem>
+                <NavItem eventKey={2} onClick={logout}>Logout</NavItem>
             </Nav>
             : <Nav pullRight>
                 <NavItem eventKey={1} href="/login">Login</NavItem>
                 <NavItem eventKey={2} href="/register">Register</NavItem>
             </Nav>
+        let example = isLoggedIn()
+            ?
+            <Nav>
+                <NavItem eventKey={1} href="/users">Users</NavItem>
+                <NavItem eventKey={2} href="/example">Example</NavItem>
+                <NavItem eventKey={3} href="/about">About</NavItem>
+            </Nav> 
+            : <Nav>
+                <NavItem eventKey={1} href="/users">Users</NavItem>
+                <NavItem eventKey={2} href="/about">About</NavItem>
+            </Nav>
+
         return (
             <Navbar inverse collapseOnSelect fixedTop>
                 <Navbar.Header>
                     <Navbar.Brand>
-                        <a href="/">ASP.NET Core with ReactJS</a>
+                        <a href="/">ASP.NET Core ReactJS</a>
                     </Navbar.Brand>
                     <Navbar.Toggle />
                 </Navbar.Header>
                 <Navbar.Collapse>
-                    <Nav>
-                        <NavItem eventKey={1} href="/users">Users</NavItem>
-                        <NavItem eventKey={2} href="/about">About</NavItem>
-                    </Nav>
-                    { content }
+                    { example }
+                    { auth }
             </Navbar.Collapse>
             </Navbar>
         );

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/main.css

@@ -2,4 +2,5 @@
 @import 'site.css';
 @import 'error.css';
 @import 'loading.css';
-@import 'home.css';
+@import 'home.css';
+@import 'about.css';

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/site.css

@@ -68,4 +68,17 @@ body {
         overflow: hidden;
         text-overflow: ellipsis;
     }
+}
+
+/*footer stays bottom*/
+footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    text-align: center;
+}
+
+#react-app {
+    padding-bottom: 60px;
 }

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Controllers/HomeController.cs

@@ -1,5 +1,6 @@
 namespace ASPNETCoreReactJS_Example.Controllers
 {
+    using Microsoft.AspNetCore.Authentication.JwtBearer;
     using Microsoft.AspNetCore.Authorization;
     using Microsoft.AspNetCore.Mvc;
 
@@ -11,7 +12,7 @@ public IActionResult Index()
         }
 
         // Test action for authorized users only
-        [Authorize]
+        [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
         public IActionResult Example()
         {
             return this.Ok();

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Extensions/ApplicationBuilderExtensions.cs

@@ -5,7 +5,7 @@
     using Microsoft.EntityFrameworkCore;
     using Microsoft.Extensions.DependencyInjection;
 
-    // Make Database Migation cleaner with this ApplicationBuilder's extension
+    // Make Database Migation cleaner ApplicationBuilder's extension
     public static class ApplicationBuilderExtensions
     {
         public static IApplicationBuilder UseDatabaseMigration(this IApplicationBuilder app)