chore: disabled strong password and link fixes

This commit is contained in:
AP 2020-04-13 18:37:03 +02:00
parent a607ab57bb
commit 115266b264
5 changed files with 73 additions and 39 deletions

6
.gitignore vendored
View file

@ -29,3 +29,9 @@ yarn-error.log*
.env.development.local
.env.test.local
.env.production.local
# Elastic Beanstalk Files
.elasticbeanstalk/*
.ebextensions/*
!.elasticbeanstalk/*.cfg.yml
!.elasticbeanstalk/*.global.yml

View file

@ -1,10 +1,11 @@
import React from 'react';
import React, { useState } from 'react';
import { Sub4Title, SubTitle } from '../../generic/Styled';
import zxcvbn from 'zxcvbn';
import { ColorButton } from '../../buttons/colorButton/ColorButton';
import { Input } from '../../input/Input';
import { Line } from '../Auth.styled';
import { Line, CheckboxText } from '../Auth.styled';
import { LoadingBar } from '../../loadingBar/LoadingBar';
import { Checkbox } from '../../checkbox/Checkbox';
interface PasswordProps {
isPass?: string;
@ -19,8 +20,10 @@ const PasswordInput = ({
callback,
loading = false,
}: PasswordProps) => {
const [checked, setChecked] = useState(false);
const strength = (100 * Math.min(zxcvbn(isPass).guesses_log10, 40)) / 40;
const needed = process.env.NODE_ENV === 'development' ? 1 : 20;
const needed = process.env.NODE_ENV !== 'development' ? 1 : checked ? 10 : 20;
return (
<>
<SubTitle>Please Input a Password</SubTitle>
@ -32,6 +35,13 @@ const PasswordInput = ({
<Sub4Title>Strength:</Sub4Title>
<LoadingBar percent={strength} />
</Line>
<Line>
<Checkbox checked={checked} onChange={setChecked}>
<CheckboxText>
{'Disable Strong Password Check (Not Recommended)'}
</CheckboxText>
</Checkbox>
</Line>
<ColorButton
disabled={strength < needed}
onClick={callback}

View file

@ -34,6 +34,10 @@ const StyledALink = styled.a`
}
`;
const NoStyling = styled.a`
text-decoration: none;
`;
interface LinkProps {
children: any;
href?: string;
@ -42,6 +46,7 @@ interface LinkProps {
underline?: string | ThemeSet;
inheritColor?: boolean;
fullWidth?: boolean;
noStyling?: boolean;
}
export const Link = ({
@ -52,22 +57,25 @@ export const Link = ({
underline,
inheritColor,
fullWidth,
noStyling,
}: LinkProps) => {
const props = { fontColor: color, underline, inheritColor, fullWidth };
if (!href && !to) return null;
const CorrectLink = noStyling ? NoStyling : StyledALink;
if (href) {
return (
<StyledALink href={href} {...props}>
<CorrectLink href={href} {...props}>
{children}
</StyledALink>
</CorrectLink>
);
}
return (
<RouterLink href={to}>
<StyledALink {...props}>{children}</StyledALink>
<CorrectLink {...props}>{children}</CorrectLink>
</RouterLink>
);
// }

View file

@ -120,12 +120,15 @@ export const Footer = () => {
FAQ
</Link>
<Link
href={'github.com/apotdevin/thunderhub'}
href={'https://github.com/apotdevin/thunderhub'}
color={fontColors.blue}
>
Github
</Link>
<Link href={'twitter.com/thunderhubio'} color={fontColors.blue}>
<Link
href={'https://twitter.com/thunderhubio'}
color={fontColors.blue}
>
Twitter
</Link>
<Link to={'/terms'} color={fontColors.blue}>

View file

@ -12,6 +12,7 @@ import {
IconMargin,
IconTitle,
} from '../../../components/typography/Styled';
import { Link } from '../../../components/link/Link';
export const ContactSection = () => (
<Section color={homeBackgroundColor} padding={'24px 0 80px'}>
@ -22,41 +23,47 @@ export const ContactSection = () => (
</Center>
<DetailLine>
<DetailCard>
<Question>
<IconTitle>
<IconMargin>
<Send size={'24px'} />
</IconMargin>
Telegram
</IconTitle>
</Question>
<SmallText>
Write to me on Telegram @apotdevin. Usually a quick response.
</SmallText>
<Link noStyling={true} href={'https://t.me/thunderhub'}>
<Question>
<IconTitle>
<IconMargin>
<Send size={'24px'} />
</IconMargin>
Telegram
</IconTitle>
</Question>
<SmallText>
Join the chat on Telegram. Usually the quickest reponse.
</SmallText>
</Link>
</DetailCard>
<DetailCard>
<Question>
<IconTitle>
<IconMargin>
<GithubIcon size={'24px'} />
</IconMargin>
Github
</IconTitle>
</Question>
<SmallText>
See the code, open issues or contribute on github.
</SmallText>
<Link noStyling={true} href={'https://github.com/apotdevin/thunderhub'}>
<Question>
<IconTitle>
<IconMargin>
<GithubIcon size={'24px'} />
</IconMargin>
Github
</IconTitle>
</Question>
<SmallText>
See the code, open issues or contribute on github.
</SmallText>
</Link>
</DetailCard>
<DetailCard>
<Question>
<IconTitle>
<IconMargin>
<MailIcon size={'24px'} />
</IconMargin>
Email
</IconTitle>
</Question>
<SmallText>Write us an email at thunderhub@protonmail.com</SmallText>
<Link noStyling={true} href={'mailto:thunderhub@protonmail.com'}>
<Question>
<IconTitle>
<IconMargin>
<MailIcon size={'24px'} />
</IconMargin>
Email
</IconTitle>
</Question>
<SmallText>Write us an email at thunderhub@protonmail.com</SmallText>
</Link>
</DetailCard>
</DetailLine>
</Section>