From f75edfc00da594bd9f3b8212c7685b022c05acbf Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Sun, 19 Sep 2021 16:24:27 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Add=20icons=20to=20the=20login?= =?UTF-8?q?=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 3 +++ frontend/src/components/GuestBox.tsx | 8 +++++--- frontend/src/components/InstanceBox.tsx | 10 ++++++---- frontend/src/components/LoginBox.tsx | 14 +++++++------ frontend/src/components/LogoutBox.tsx | 4 +++- frontend/yarn.lock | 26 +++++++++++++++++++++++++ 6 files changed, 51 insertions(+), 14 deletions(-) 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 {
- You are currently logged in as {login.userData.username}. + You are currently logged in as {login.userData.username}. diff --git a/frontend/yarn.lock b/frontend/yarn.lock index b3679be..fb5dd06 100644 --- a/frontend/yarn.lock +++ b/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"