steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-23 07:14:21 +00:00
Code Activity

🔧 Add icons to the login page

Browse source
This commit is contained in:
Steffo 2021-09-19 16:24:27 +02:00
parent 3854e75a23
commit f75edfc00d
Signed by: steffo
GPG key ID: 6965406171929D01
6 changed files with 51 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/package.json
View file

@ -3,6 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "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", "@reach/router": "^1.3.4",
"@steffo/bluelib-react": "^3.0.7", "@steffo/bluelib-react": "^3.0.7",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",

8
frontend/src/components/GuestBox.tsx
View file

@ -3,6 +3,8 @@ import {Box, Form, Heading, Panel} from "@steffo/bluelib-react";
import {useLogin} from "./LoginContext"; import {useLogin} from "./LoginContext";
import {useInstance} from "./InstanceContext"; import {useInstance} from "./InstanceContext";
import {navigate} from "@reach/router"; 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 { export function GuestBox(): JSX.Element {
@ -27,20 +29,20 @@ export function GuestBox(): JSX.Element {
if(!instance.validity) { if(!instance.validity) {
return ( return (
<Panel bluelibClassNames={"color-red"}> <Panel bluelibClassNames={"color-red"}>
Please enter a valid instance URL before continuing. <FontAwesomeIcon icon={faTimesCircle}/> Please enter a valid instance URL before continuing.
</Panel> </Panel>
) )
} }
if(login.running) { if(login.running) {
return ( return (
<Panel bluelibClassNames={"color-yellow"}> <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> </Panel>
) )
} }
return ( return (
<Panel> <Panel>
Click the button below to access Sophon. <FontAwesomeIcon icon={faGhost}/> Click the button below to access Sophon as a guest.
</Panel> </Panel>
) )
}, },

10
frontend/src/components/InstanceBox.tsx
View file

@ -2,6 +2,8 @@ import * as React from "react"
import {Box, Form, Heading, Idiomatic as I, Panel} from "@steffo/bluelib-react"; import {Box, Form, Heading, Idiomatic as I, Panel} from "@steffo/bluelib-react";
import {useInstance} from "./InstanceContext"; import {useInstance} from "./InstanceContext";
import {useLogin} from "./LoginContext"; 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 { export function InstanceBox(): JSX.Element {
@ -23,27 +25,27 @@ export function InstanceBox(): JSX.Element {
if(login.userData) { if(login.userData) {
return ( return (
<Panel bluelibClassNames={"color-yellow"}> <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> </Panel>
) )
} }
if(login.running) { if(login.running) {
return ( return (
<Panel bluelibClassNames={"color-yellow"}> <Panel bluelibClassNames={"color-yellow"}>
You cannot change Sophon instance while logging in. <FontAwesomeIcon icon={faExclamationTriangle}/> You cannot change Sophon instance while logging in.
</Panel> </Panel>
) )
} }
if(instance.validity === false) { if(instance.validity === false) {
return ( return (
<Panel bluelibClassNames={"color-red"}> <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> </Panel>
) )
} }
return ( return (
<Panel> <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> </Panel>
) )
}, },

14
frontend/src/components/LoginBox.tsx
View file

@ -4,6 +4,8 @@ import {Box, Form, Heading, Idiomatic as I, Panel, useFormState} from "@steffo/b
import {useLogin, useUsernameFormState} from "./LoginContext"; import {useLogin, useUsernameFormState} from "./LoginContext";
import {useInstance} from "./InstanceContext"; import {useInstance} from "./InstanceContext";
import {AxiosError} from "axios-lab"; 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 { export function LoginBox(): JSX.Element {
@ -90,14 +92,14 @@ export function LoginBox(): JSX.Element {
if(error.response) { if(error.response) {
return ( return (
<Panel bluelibClassNames={"color-red"}> <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> </Panel>
) )
} }
else { else {
return ( return (
<Panel bluelibClassNames={"color-red"}> <Panel bluelibClassNames={"color-red"}>
{error.toString()} <FontAwesomeIcon icon={faTimesCircle}/> {error.toString()}
</Panel> </Panel>
) )
} }
@ -105,27 +107,27 @@ export function LoginBox(): JSX.Element {
if(!instance.validity) { if(!instance.validity) {
return ( return (
<Panel bluelibClassNames={"color-red"}> <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> </Panel>
) )
} }
if(!(username.validity && password.validity)) { if(!(username.validity && password.validity)) {
return ( return (
<Panel> <Panel>
Please enter your login credentials. <FontAwesomeIcon icon={faKey}/> Please enter your login credentials.
</Panel> </Panel>
) )
} }
if(running) { if(running) {
return ( return (
<Panel bluelibClassNames={"color-cyan"}> <Panel bluelibClassNames={"color-cyan"}>
Logging in, please wait... <FontAwesomeIcon icon={faSpinner} pulse={true}/> Logging in, please wait...
</Panel> </Panel>
) )
} }
return ( return (
<Panel> <Panel>
Click the button below to login. <FontAwesomeIcon icon={faCheck}/> Click the button below to login.
</Panel> </Panel>
) )
}, },

4
frontend/src/components/LogoutBox.tsx
View file

@ -1,6 +1,8 @@
import * as React from "react" import * as React from "react"
import {Box, Form, Heading, Panel, Variable} from "@steffo/bluelib-react"; import {Box, Form, Heading, Panel, Variable} from "@steffo/bluelib-react";
import {useLogin} from "./LoginContext"; import {useLogin} from "./LoginContext";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons";
export function LogoutBox(): JSX.Element { export function LogoutBox(): JSX.Element {
@ -22,7 +24,7 @@ export function LogoutBox(): JSX.Element {
<Form> <Form>
<Form.Row> <Form.Row>
<Panel> <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> </Panel>
</Form.Row> </Form.Row>
<Form.Row> <Form.Row>

26
frontend/yarn.lock
View file

@ -1234,6 +1234,32 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" 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": "@gar/promisify@^1.0.1":
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"