mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-22 14:22:33 +01:00
Code Issues Projects Releases Wiki Activity

chore: refactor settings styling

Browse source
This commit is contained in:
AP 2020-02-04 08:50:27 +01:00
parent bf5b7d4250
commit 8caefa6066
2 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/auth/NormalLogin.tsx
View file

@ -174,9 +174,7 @@ export const LoginForm = ({
<Line>
<StyledTitle>Admin:</StyledTitle>
<Input
placeholder={
'Base64 Admin macaroon (e.g.: AgEDbG5kAusBAw...)'
}
placeholder={'Base64 or HEX Admin macaroon'}
onChange={e => setAdmin(e.target.value)}
/>
</Line>
@ -184,18 +182,14 @@ export const LoginForm = ({
<Line>
<StyledTitle>Readonly:</StyledTitle>
<Input
placeholder={
'Base64 Readonly macaroon (e.g.: AgEDbG5kApoBAw...)'
}
placeholder={'Base64 or HEX Readonly macaroon'}
onChange={e => setRead(e.target.value)}
/>
</Line>
<Line>
<StyledTitle>Certificate:</StyledTitle>
<Input
placeholder={
'Base64 TLS Certificate (e.g.: LS0tLS1CRUdJTi...)'
}
placeholder={'Base64 or HEX TLS Certificate'}
onChange={e => setCert(e.target.value)}
/>
</Line>

25
src/views/settings/Current.tsx
View file

@ -9,28 +9,35 @@ import styled from 'styled-components';
import { chartLinkColor, colorButtonBackground } from '../../styles/Themes';
import { useAccount } from '../../context/AccountContext';
const CurrentField = styled.div`
const CurrentField = styled.textarea`
width: 100%;
color: ${chartLinkColor};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 10px 0;
font-size: 14px;
padding: 5px 10px;
border-radius: 5px;
background-color: ${colorButtonBackground};
border: none;
word-wrap: break-word;
resize: none;
`;
export const CurrentSettings = () => {
const { name, host, admin, read, cert } = useAccount();
const renderField = (title: string, field: string | null) => {
const renderField = (
title: string,
field: string | null,
rows?: number,
) => {
if (!field) return null;
return (
<>
<Sub4Title>{title}</Sub4Title>
<CurrentField>{field}</CurrentField>
<CurrentField rows={rows ?? 3} readOnly={true}>
{field}
</CurrentField>
</>
);
};
@ -39,9 +46,9 @@ export const CurrentSettings = () => {
<CardWithTitle>
<SubTitle>Current Account:</SubTitle>
<Card>
{renderField('Name:', name)}
{renderField('Host:', host)}
{renderField('AES Encrypted Admin Macaroon:', admin)}
{renderField('Name:', name, 1)}
{renderField('Host:', host, 1)}
{renderField('AES-256 Encrypted Admin Macaroon:', admin)}
{renderField('Read-only Macaroon:', read)}
{renderField('Certificate:', cert)}
</Card>