Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Whitelabel logo and login title for administration #572

Merged
merged 5 commits into from
Oct 8, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed administration/public/icon.png
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 0 additions & 21 deletions administration/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Verwaltung der Ehrenamtskarte"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Ehrenamtskarte Verwaltung</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
67 changes: 35 additions & 32 deletions administration/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import KeepAliveToken from "./KeepAliveToken";
import ApplicationsController from "./components/applications/ApplicationsController";
import {Button, H3} from '@blueprintjs/core';
import {ProjectConfigProvider} from './project-configs/ProjectConfigContext';
import {MetaTagsManager} from "./components/MetaTagsManager";

if (!process.env.REACT_APP_API_BASE_URL) {
throw new Error('REACT_APP_API_BASE_URL is not set!')
Expand Down Expand Up @@ -44,38 +45,40 @@ const Main = styled.div`
`

const App = () => <ProjectConfigProvider>
<AuthProvider>
<AuthContext.Consumer>{([authData, onSignIn, onSignOut]) => (
<ApolloProvider client={createClient(authData?.token)}>{
authData !== null && authData.expiry > new Date()
? <KeepAliveToken authData={authData} onSignIn={onSignIn} onSignOut={onSignOut}>
<RegionProvider>
<HashRouter>
<Navigation onSignOut={onSignOut}/>
<Main>
<Routes>
<Route path={"/"} element={<div
style={{display: 'flex', alignItems: 'center', flexDirection: 'column'}}>
<H3>Wählen Sie eine Aktion aus:</H3>
<NavLink to={"/applications"}><Button style={{marginBottom: '10px'}}
icon="form"
text="Eingehende Anträge"/></NavLink>
<NavLink to={"/eak-generation"}><Button icon="people"
text="Karten erstellen"/></NavLink>
</div>}/>
<Route path={"/applications"}
element={<ApplicationsController token={authData.token}/>}/>
<Route path={"/eak-generation"} element={<GenerationController/>}/>
</Routes>
</Main>
</HashRouter>
</RegionProvider>
</KeepAliveToken>
: <Login onSignIn={onSignIn}/>
}</ApolloProvider>
)}
</AuthContext.Consumer>
</AuthProvider>
<MetaTagsManager>
<AuthProvider>
<AuthContext.Consumer>{([authData, onSignIn, onSignOut]) => (
<ApolloProvider client={createClient(authData?.token)}>{
authData !== null && authData.expiry > new Date()
? <KeepAliveToken authData={authData} onSignIn={onSignIn} onSignOut={onSignOut}>
<RegionProvider>
<HashRouter>
<Navigation onSignOut={onSignOut}/>
<Main>
<Routes>
<Route path={"/"} element={<div
style={{display: 'flex', alignItems: 'center', flexDirection: 'column'}}>
<H3>Wählen Sie eine Aktion aus:</H3>
<NavLink to={"/applications"}><Button style={{marginBottom: '10px'}}
icon="form"
text="Eingehende Anträge"/></NavLink>
<NavLink to={"/eak-generation"}><Button icon="people"
text="Karten erstellen"/></NavLink>
</div>}/>
<Route path={"/applications"}
element={<ApplicationsController token={authData.token}/>}/>
<Route path={"/eak-generation"} element={<GenerationController/>}/>
</Routes>
</Main>
</HashRouter>
</RegionProvider>
</KeepAliveToken>
: <Login onSignIn={onSignIn}/>
}</ApolloProvider>
)}
</AuthContext.Consumer>
</AuthProvider>
</MetaTagsManager>
michael-markl marked this conversation as resolved.
Show resolved Hide resolved
</ProjectConfigProvider>

export default App;
21 changes: 21 additions & 0 deletions administration/src/components/MetaTagsManager.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import {ReactElement, useContext, useEffect} from "react";
import {ProjectConfigContext} from "../project-configs/ProjectConfigContext";

export const MetaTagsManager = (props: { children: ReactElement }) => {
michael-markl marked this conversation as resolved.
Show resolved Hide resolved
const config = useContext(ProjectConfigContext)
useEffect(
michael-markl marked this conversation as resolved.
Show resolved Hide resolved
() => {
document.title = config.name + " Verwaltung"
const links = Array.from(document.head.getElementsByTagName("link"))
let iconLink = links.find(link => link.rel === "icon")
if (iconLink == null) {
iconLink = document.createElement("link")
iconLink.rel = "icon"
document.head.append(iconLink)
}
iconLink.href = "/icons/" + config.projectId + ".png"
},
[config]
)
return props.children
}
6 changes: 4 additions & 2 deletions administration/src/components/Navigation.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import React from "react";
import React, {useContext} from "react";
import {Button, Navbar} from "@blueprintjs/core";
import {NavLink} from "react-router-dom";
import {Alignment} from "@blueprintjs/core/lib/esm/common/alignment";
import RegionSelector from "./RegionSelector";
import {ProjectConfigContext} from "../project-configs/ProjectConfigContext";

interface Props {
onSignOut: () => void
}

const Navigation = (props: Props) => {
const config = useContext(ProjectConfigContext)
return (
<Navbar>
<Navbar.Group>
<Navbar.Heading>Ehrenamtskarte Administration</Navbar.Heading>
<Navbar.Heading>{config.name} Verwaltung</Navbar.Heading>
<Navbar.Divider/>
<RegionSelector/>
<Navbar.Divider/>
Expand Down
6 changes: 4 additions & 2 deletions administration/src/components/auth/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, {useContext} from "react";
import styled from "styled-components";
import LoginForm from "./LoginForm";
import {getAppToaster} from "../AppToaster";
import {Card, H2} from "@blueprintjs/core";
import {Card, H2, H3, H4} from "@blueprintjs/core";
import {SignInDocument, SignInMutation, SignInMutationVariables, SignInPayload} from "../../generated/graphql";
import {ProjectConfigContext} from "../../project-configs/ProjectConfigContext";

Expand Down Expand Up @@ -40,7 +40,9 @@ const Login = (props: Props) => {

return <Center>
<Card>
<H2>Ehrenamtskarte Verwaltung</H2>
<H2>{config.name}</H2>
<H3>Verwaltung</H3>
<H4>Login</H4>
<LoginForm password={state.password} email={state.email} setEmail={email => setState({...state, email})}
setPassword={password => setState({...state, password})}
onSubmit={onSubmit} loading={mutationState.loading}/>
Expand Down