From 817d3bbb68ab977d58cf548587b45139903f9f14 Mon Sep 17 00:00:00 2001
From: Jon Bergli Heier <snakebite@jvnv.net>
Date: Mon, 23 Nov 2020 17:51:04 +0100
Subject: Add frontend implementation

---
 frontend/src/auth.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'frontend/src/auth.js')

diff --git a/frontend/src/auth.js b/frontend/src/auth.js
index 0ed1e1a..2f32c33 100644
--- a/frontend/src/auth.js
+++ b/frontend/src/auth.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Redirect, generatePath } from 'react-router-dom';
+import { Spinner } from 'react-bootstrap';
 import { isExpired } from 'react-jwt';
 
 const UserContext = React.createContext();
@@ -18,7 +19,9 @@ class Login extends React.Component {
 		if (this.state.url) {
 			return <div>Redirecting to <a href={this.state.url}>{this.state.url}</a></div>;
 		}
-		return <div>Logging in…</div>;
+		return <Spinner animation="border">
+			<span className="sr-only">Logging in…</span>
+		</Spinner>;
 	}
 	async get_oauth_url() {
 		let redirect_uri = window.location.origin + generatePath('/oauth-callback');
@@ -50,7 +53,9 @@ class Logout extends React.Component {
 		if (this.state.done) {
 			return <Redirect to='/' />;
 		}
-		return <div>Logging out…</div>;
+		return <Spinner animation="border">
+			<span className="sr-only">Logging out…</span>
+		</Spinner>;
 	}
 }
 
@@ -88,7 +93,7 @@ class OauthCallback extends React.Component {
 		const user = await this.context.get_user();
 		if (user) {
 			this.setState({error: null, done: true});
-			window.flash({header: 'Logged in', text: 'You are now logged in as ' + user.username + '.'});
+			window.flash({header: 'Logged in', text: `You are now logged in as ${user.username}.`});
 		} else {
 			window.flash({header: 'Login failed', text: 'Something failed during authentication.'});
 		}
@@ -100,7 +105,9 @@ class OauthCallback extends React.Component {
 		if (this.state.done) {
 			return <Redirect to='/' />;
 		}
-		return 'Logging in…';
+		return <Spinner animation="border">
+			<span className="sr-only">Logging in…</span>
+		</Spinner>;
 	}
 }
 
@@ -146,7 +153,7 @@ class AuthenticationProvider extends React.Component {
 		}
 		let response = await fetch('/api/user',{
 			headers: {
-				Authorization: 'Bearer ' + token,
+				Authorization: `Bearer ${token}`,
 			}
 		});
 		if (response.ok) {
-- 
cgit v1.2.3