🔧 Add icons to the login page

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",

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 (
                     <Panel bluelibClassNames={"color-red"}>
-                        Please enter a valid instance URL before continuing.
+                        <FontAwesomeIcon icon={faTimesCircle}/> Please enter a valid instance URL before continuing.
                     </Panel>
                 )
             }
             if(login.running) {
                 return (
                     <Panel bluelibClassNames={"color-yellow"}>
-                        You cannot browse Sophon while a login is in progress.
+                        <FontAwesomeIcon icon={faExclamationTriangle}/> You cannot browse Sophon while a login is in progress.
                     </Panel>
                 )
             }
             return (
                 <Panel>
-                    Click the button below to access Sophon.
+                    <FontAwesomeIcon icon={faGhost}/> Click the button below to access Sophon as a guest.
                 </Panel>
             )
         },

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 (
                     <Panel bluelibClassNames={"color-yellow"}>
-                        You cannot change Sophon instance while you are logged in. If you need to change instance, <I>logout</I> first!
+                        <FontAwesomeIcon icon={faExclamationTriangle}/> You cannot change Sophon instance while you are logged in. If you need to change instance, <I>logout</I> first!
                     </Panel>
                 )
             }
             if(login.running) {
                 return (
                     <Panel bluelibClassNames={"color-yellow"}>
-                        You cannot change Sophon instance while logging in.
+                        <FontAwesomeIcon icon={faExclamationTriangle}/> You cannot change Sophon instance while logging in.
                     </Panel>
                 )
             }
             if(instance.validity === false) {
                 return (
                     <Panel bluelibClassNames={"color-red"}>
-                        No Sophon instance was detected at the inserted URL.
+                        <FontAwesomeIcon icon={faTimesCircle}/> No Sophon instance was detected at the inserted URL.
                     </Panel>
                 )
             }
             return (
                 <Panel>
-                    Select the Sophon instance you want to connect to by specifying its URL here.
+                    <FontAwesomeIcon icon={faServer}/> Select the Sophon instance you want to connect to by specifying its URL here.
                 </Panel>
             )
         },

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 (
                         <Panel bluelibClassNames={"color-red"}>
-                            <I>{error.response.statusText}</I>: {error.response.data['non_field_errors'][0]}
+                            <FontAwesomeIcon icon={faTimesCircle}/> <I>{error.response.statusText}</I>: {error.response.data['non_field_errors'][0]}
                         </Panel>
                     )
                 }
                 else {
                     return (
                         <Panel bluelibClassNames={"color-red"}>
-                            {error.toString()}
+                            <FontAwesomeIcon icon={faTimesCircle}/> {error.toString()}
                         </Panel>
                     )
                 }
@@ -105,27 +107,27 @@ export function LoginBox(): JSX.Element {
             if(!instance.validity) {
                 return (
                     <Panel bluelibClassNames={"color-red"}>
-                        Please enter a valid instance URL before logging in.
+                        <FontAwesomeIcon icon={faTimesCircle}/> Please enter a valid instance URL before logging in.
                     </Panel>
                 )
             }
             if(!(username.validity && password.validity)) {
                 return (
                     <Panel>
-                        Please enter your login credentials.
+                        <FontAwesomeIcon icon={faKey}/> Please enter your login credentials.
                     </Panel>
                 )
             }
             if(running) {
                 return (
                     <Panel bluelibClassNames={"color-cyan"}>
-                        Logging in, please wait...
+                        <FontAwesomeIcon icon={faSpinner} pulse={true}/> Logging in, please wait...
                     </Panel>
                 )
             }
             return (
                 <Panel>
-                    Click the button below to login.
+                    <FontAwesomeIcon icon={faCheck}/> Click the button below to login.
                 </Panel>
             )
         },

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 {
             <Form>
                 <Form.Row>
                     <Panel>
-                        You are currently logged in as <Variable>{login.userData.username}</Variable>.
+                        <FontAwesomeIcon icon={faUser}/> You are currently logged in as <Variable>{login.userData.username}</Variable>.
                     </Panel>
                 </Form.Row>
                 <Form.Row>

frontend/yarn.lock

@@ -1234,6 +1234,32 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/react-fontawesome@^0.1.15":
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz#1450b838f905981d721bf07e14e3b52c0e9a91ed"
+  integrity sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@gar/promisify@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"