diff --git a/frontend/package.json b/frontend/package.json
index 27441b0..e98220b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^1.2.36",
+ "@fortawesome/free-solid-svg-icons": "^5.15.4",
+ "@fortawesome/react-fontawesome": "^0.1.15",
"@reach/router": "^1.3.4",
"@steffo/bluelib-react": "^3.0.7",
"@testing-library/jest-dom": "^5.11.4",
diff --git a/frontend/src/components/GuestBox.tsx b/frontend/src/components/GuestBox.tsx
index e7fbd74..b546089 100644
--- a/frontend/src/components/GuestBox.tsx
+++ b/frontend/src/components/GuestBox.tsx
@@ -3,6 +3,8 @@ import {Box, Form, Heading, Panel} from "@steffo/bluelib-react";
import {useLogin} from "./LoginContext";
import {useInstance} from "./InstanceContext";
import {navigate} from "@reach/router";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faExclamationTriangle, faTimesCircle, faGhost} from "@fortawesome/free-solid-svg-icons";
export function GuestBox(): JSX.Element {
@@ -27,20 +29,20 @@ export function GuestBox(): JSX.Element {
if(!instance.validity) {
return (
- Please enter a valid instance URL before continuing.
+ Please enter a valid instance URL before continuing.
)
}
if(login.running) {
return (
- You cannot browse Sophon while a login is in progress.
+ You cannot browse Sophon while a login is in progress.
)
}
return (
- Click the button below to access Sophon.
+ Click the button below to access Sophon as a guest.
)
},
diff --git a/frontend/src/components/InstanceBox.tsx b/frontend/src/components/InstanceBox.tsx
index 5d44deb..b6fb75e 100644
--- a/frontend/src/components/InstanceBox.tsx
+++ b/frontend/src/components/InstanceBox.tsx
@@ -2,6 +2,8 @@ import * as React from "react"
import {Box, Form, Heading, Idiomatic as I, Panel} from "@steffo/bluelib-react";
import {useInstance} from "./InstanceContext";
import {useLogin} from "./LoginContext";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faExclamationTriangle, faTimesCircle, faServer} from "@fortawesome/free-solid-svg-icons";
export function InstanceBox(): JSX.Element {
@@ -23,27 +25,27 @@ export function InstanceBox(): JSX.Element {
if(login.userData) {
return (
- You cannot change Sophon instance while you are logged in. If you need to change instance, logout first!
+ You cannot change Sophon instance while you are logged in. If you need to change instance, logout first!
)
}
if(login.running) {
return (
- You cannot change Sophon instance while logging in.
+ You cannot change Sophon instance while logging in.
)
}
if(instance.validity === false) {
return (
- No Sophon instance was detected at the inserted URL.
+ No Sophon instance was detected at the inserted URL.
)
}
return (
- Select the Sophon instance you want to connect to by specifying its URL here.
+ Select the Sophon instance you want to connect to by specifying its URL here.
)
},
diff --git a/frontend/src/components/LoginBox.tsx b/frontend/src/components/LoginBox.tsx
index c4f65e3..628d6d5 100644
--- a/frontend/src/components/LoginBox.tsx
+++ b/frontend/src/components/LoginBox.tsx
@@ -4,6 +4,8 @@ import {Box, Form, Heading, Idiomatic as I, Panel, useFormState} from "@steffo/b
import {useLogin, useUsernameFormState} from "./LoginContext";
import {useInstance} from "./InstanceContext";
import {AxiosError} from "axios-lab";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faExclamationTriangle, faTimesCircle, faKey, faSpinner, faCheck} from "@fortawesome/free-solid-svg-icons";
export function LoginBox(): JSX.Element {
@@ -90,14 +92,14 @@ export function LoginBox(): JSX.Element {
if(error.response) {
return (
- {error.response.statusText}: {error.response.data['non_field_errors'][0]}
+ {error.response.statusText}: {error.response.data['non_field_errors'][0]}
)
}
else {
return (
- {error.toString()}
+ {error.toString()}
)
}
@@ -105,27 +107,27 @@ export function LoginBox(): JSX.Element {
if(!instance.validity) {
return (
- Please enter a valid instance URL before logging in.
+ Please enter a valid instance URL before logging in.
)
}
if(!(username.validity && password.validity)) {
return (
- Please enter your login credentials.
+ Please enter your login credentials.
)
}
if(running) {
return (
- Logging in, please wait...
+ Logging in, please wait...
)
}
return (
- Click the button below to login.
+ Click the button below to login.
)
},
diff --git a/frontend/src/components/LogoutBox.tsx b/frontend/src/components/LogoutBox.tsx
index d25eb3f..2ee558b 100644
--- a/frontend/src/components/LogoutBox.tsx
+++ b/frontend/src/components/LogoutBox.tsx
@@ -1,6 +1,8 @@
import * as React from "react"
import {Box, Form, Heading, Panel, Variable} from "@steffo/bluelib-react";
import {useLogin} from "./LoginContext";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons";
export function LogoutBox(): JSX.Element {
@@ -22,7 +24,7 @@ export function LogoutBox(): JSX.Element {