mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-22 23:04:21 +00:00
🔧 Add icons to the login page
This commit is contained in:
parent
3854e75a23
commit
f75edfc00d
GPG key ID:
6965406171929D01
6 changed files with 51 additions and 14 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue