sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-11-24 06:54:27 +07:00
Code Issues Releases Wiki Activity

fix: type lint for login

Browse Source
This commit is contained in:
Griffithtp 2019-06-23 22:44:53 +01:00
parent 116055c5d1
commit 91e603ef21
7 changed files with 77 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Footer/Footer.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
import { goToVerdaccioWebsite } from '../../utils/windows';
const renderTooltip = () => (
const renderTooltip = (): JSX.Element => (
<ToolTip>
<Earth name="earth" size="md" />
<Flags>
@ -22,7 +22,7 @@ const ON_LABEL = 'on';
const HEARTH_EMOJI = '♥';
// @ts-ignore
const renderRight = (version = window.VERDACCIO_VERSION) => {
const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
return (
<Right>
{POWERED_LABEL}
@ -32,7 +32,7 @@ const renderRight = (version = window.VERDACCIO_VERSION) => {
);
};
const renderLeft = () => (
const renderLeft = (): JSX.Element => (
<Left>
{MADEWITH_LABEL}
<Love>{HEARTH_EMOJI}</Love>

2
src/components/Icon/Icon.tsx
View File

@ -67,7 +67,7 @@ const Icon: React.FC<Props> = ({ className, name, size = 'sm', img = false, poin
// @ts-ignore
const title = capitalize(name);
return img ? (
<ImgWrapper className={className} name={name} pointer={pointer} size={size} title={title} {...props}>
<ImgWrapper className={className} pointer={pointer} size={size} title={title} {...props}>
<Img alt={title} src={Icons[name]} />
</ImgWrapper>
) : (

4
src/components/Icon/styles.ts
View File

@ -1,6 +1,6 @@
import styled, { css } from 'react-emotion';
const getSize = (size?: 'md' | 'sm') => {
const getSize = (size: 'md' | 'sm' | string): string => {
switch (size) {
case 'md':
return `
@ -15,7 +15,7 @@ const getSize = (size?: 'md' | 'sm') => {
}
};
const commonStyle = ({ size = 'sm', pointer, modifiers }: any) => css`
const commonStyle = ({ size = 'sm' as 'md' | 'sm' | string, pointer, modifiers = null }): string => css`
&& {
display: inline-block;
cursor: ${pointer ? 'pointer' : 'default'};

8
src/components/Install/Install.tsx
View File

@ -3,7 +3,7 @@ import ListItemText from '@material-ui/core/ListItemText';
import React, { Component } from 'react';
// @ts-ignore
import { DetailContextConsumer } from '../../pages/version/Version';
import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
import CopyToClipBoard from '../CopyToClipBoard';
// logos of package managers
@ -14,17 +14,17 @@ import yarn from './img/yarn.svg';
import { Heading, InstallItem, PackageMangerAvatar } from './styles';
class Install extends Component {
public render() {
public render(): JSX.Element {
return (
<DetailContextConsumer>
{(context: any) => {
{(context: Partial<VersionPageConsumerProps>) => {
return context && context.packageName && this.renderCopyCLI(context);
}}
</DetailContextConsumer>
);
}
public renderCopyCLI = ({ packageName }: { packageName: string }) => {
public renderCopyCLI = ({ packageName = '' }: Partial<VersionPageConsumerProps>) => {
return (
<>
<List subheader={<Heading variant={'subheading'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>

4
src/components/Login/Login.test.tsx
View File

@ -89,7 +89,7 @@ describe('<LoginModal />', () => {
const instance = wrapper.instance();
instance.submitCredentials = jest.fn();
const { validateCredentials, setCredentials, submitCredentials } = instance;
const { handleValidateCredentials, setCredentials, submitCredentials } = instance;
expect(setCredentials('username', eventUsername)).toBeUndefined();
expect(wrapper.state('form').username.value).toEqual('xyz');
@ -97,7 +97,7 @@ describe('<LoginModal />', () => {
expect(setCredentials('password', eventPassword)).toBeUndefined();
expect(wrapper.state('form').password.value).toEqual('1234');
validateCredentials(event);
handleValidateCredentials(event);
expect(event.preventDefault).toHaveBeenCalled();
expect(wrapper.state('form').username.pristine).toEqual(false);
expect(wrapper.state('form').password.pristine).toEqual(false);

110
src/components/Login/Login.tsx
View File

@ -1,5 +1,4 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';
@ -15,21 +14,34 @@ import FormHelperText from '@material-ui/core/FormHelperText';
// @ts-ignore
import classes from './login.scss';
export default class LoginModal extends Component<any, any> {
static propTypes = {
visibility: PropTypes.bool,
error: PropTypes.object,
onCancel: PropTypes.func,
onSubmit: PropTypes.func,
};
interface FormFields {
required: boolean;
pristine: boolean;
helperText: string;
value: string;
}
interface FormError {
type: string;
title: string;
description: string;
}
static defaultProps = {
error: {},
onCancel: () => {},
onSubmit: () => {},
visibility: true,
};
interface LoginModalProps {
visibility: boolean;
error: Partial<FormError>;
onCancel: () => void;
onSubmit: (username: string, password: string) => void;
}
interface LoginModalState {
form: {
username: Partial<FormFields>;
password: Partial<FormFields>;
};
error: FormError;
}
export default class LoginModal extends Component<Partial<LoginModalProps>, LoginModalState> {
constructor(props) {
super(props);
this.state = {
@ -51,11 +63,28 @@ export default class LoginModal extends Component<any, any> {
};
}
public render(): JSX.Element {
const { visibility, onCancel, error } = this.props as LoginModalProps;
return (
<Dialog fullWidth={true} id={'login--form-container'} maxWidth={'xs'} onClose={onCancel} open={visibility}>
<form noValidate={true} onSubmit={this.handleValidateCredentials}>
<DialogTitle>{'Login'}</DialogTitle>
<DialogContent>
{this.renderLoginError(error)}
{this.renderNameField()}
{this.renderPasswordField()}
</DialogContent>
{this.renderActions()}
</form>
</Dialog>
);
}
/**
* set login modal's username and password to current state
* Required to login
*/
setCredentials = (name, e) => {
public setCredentials = (name, e) => {
const { form } = this.state;
this.setState({
form: {
@ -69,15 +98,15 @@ export default class LoginModal extends Component<any, any> {
});
};
setUsername = event => {
public handleUsernameChange = event => {
this.setCredentials('username', event);
};
setPassword = event => {
public handlePasswordChange = event => {
this.setCredentials('password', event);
};
validateCredentials = event => {
public handleValidateCredentials = event => {
const { form } = this.state;
// prevents default submit behavior
event.preventDefault();
@ -89,7 +118,7 @@ export default class LoginModal extends Component<any, any> {
...acc,
...{ [key]: { ...form[key], pristine: false } },
}),
{}
{ username: {}, password: {} }
),
},
() => {
@ -100,10 +129,14 @@ export default class LoginModal extends Component<any, any> {
);
};
submitCredentials = async () => {
public submitCredentials = async () => {
const { form } = this.state;
const username = (form.username && form.username.value) || '';
const password = (form.password && form.password.value) || '';
const { onSubmit } = this.props;
await onSubmit(form.username.value, form.password.value);
if (onSubmit) {
await onSubmit(username, password);
}
// let's wait for API response and then set
// username and password filed to empty state
this.setState({
@ -112,12 +145,12 @@ export default class LoginModal extends Component<any, any> {
...acc,
...{ [key]: { ...form[key], value: '', pristine: true } },
}),
{}
{ username: {}, password: {} }
),
});
};
renderErrorMessage(title, description) {
private renderErrorMessage(title, description): JSX.Element {
return (
<span>
<div>
@ -128,7 +161,7 @@ export default class LoginModal extends Component<any, any> {
);
}
renderMessage(title, description) {
private renderMessage(title, description): JSX.Element {
return (
<div className={classes.loginErrorMsg} id={'client-snackbar'}>
<ErrorIcon className={classes.loginIcon} />
@ -137,37 +170,37 @@ export default class LoginModal extends Component<any, any> {
);
}
renderLoginError({ type, title, description }) {
private renderLoginError({ type, title, description }: Partial<FormError>): JSX.Element | false {
return type === 'error' && <SnackbarContent className={classes.loginError} message={this.renderMessage(title, description)} />;
}
renderNameField = () => {
private renderNameField = () => {
const {
form: { username },
} = this.state;
return (
<FormControl error={!username.value && !username.pristine} fullWidth={true} required={username.required}>
<InputLabel htmlFor={'username'}>{'Username'}</InputLabel>
<Input id={'login--form-username'} onChange={this.setUsername} placeholder={'Your username'} value={username.value} />
<Input id={'login--form-username'} onChange={this.handleUsernameChange} placeholder={'Your username'} value={username.value} />
{!username.value && !username.pristine && <FormHelperText id={'username-error'}>{username.helperText}</FormHelperText>}
</FormControl>
);
};
renderPasswordField = () => {
private renderPasswordField = () => {
const {
form: { password },
} = this.state;
return (
<FormControl error={!password.value && !password.pristine} fullWidth={true} required={password.required} style={{ marginTop: '8px' }}>
<InputLabel htmlFor={'password'}>{'Password'}</InputLabel>
<Input id={'login--form-password'} onChange={this.setPassword} placeholder={'Your strong password'} type={'password'} value={password.value} />
<Input id={'login--form-password'} onChange={this.handlePasswordChange} placeholder={'Your strong password'} type={'password'} value={password.value} />
{!password.value && !password.pristine && <FormHelperText id={'password-error'}>{password.helperText}</FormHelperText>}
</FormControl>
);
};
renderActions = () => {
private renderActions = () => {
const {
form: { username, password },
} = this.state;
@ -183,21 +216,4 @@ export default class LoginModal extends Component<any, any> {
</DialogActions>
);
};
render() {
const { visibility, onCancel, error } = this.props;
return (
<Dialog fullWidth={true} id={'login--form-container'} maxWidth={'xs'} onClose={onCancel} open={visibility}>
<form noValidate={true} onSubmit={this.validateCredentials}>
<DialogTitle>{'Login'}</DialogTitle>
<DialogContent>
{this.renderLoginError(error)}
{this.renderNameField()}
{this.renderPasswordField()}
</DialogContent>
{this.renderActions()}
</form>
</Dialog>
);
}
}

4
src/components/Spinner/styles.ts
View File

@ -1,5 +1,5 @@
import CircularProgress from '@material-ui/core/CircularProgress';
import styled, { css, Themed } from 'react-emotion';
import styled, { css } from 'react-emotion';
import colors from '../../utils/styles/colors';
@ -8,7 +8,7 @@ export const Wrapper = styled('div')`
display: flex;
align-items: center;
justify-content: center;
${(props): Themed<any, object> =>
${props =>
// @ts-ignore
props.centered &&
css`