tweak OAuth mgmt page

This commit is contained in:
Pig Fang 2020-02-08 09:51:46 +08:00
parent 55f9ba1cff
commit d119b054be
2 changed files with 34 additions and 42 deletions

View File

@ -1,6 +1,6 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { t } from '../../../scripts/i18n'
import Modal from '../../../components/Modal' import Modal from '../../../components/Modal'
import { trans } from '../../../scripts/i18n'
interface Props { interface Props {
show: boolean show: boolean
@ -36,36 +36,28 @@ const ModalCreate: React.FC<Props> = props => {
onDismiss={handleDismiss} onDismiss={handleDismiss}
onClose={props.onClose} onClose={props.onClose}
> >
<table className="table"> <div className="form-group">
<tbody> <label htmlFor="new-app-name">{t('user.oauth.name')}</label>
<tr> <input
<td className="key">{trans('user.oauth.name')}</td> value={name}
<td className="value"> onChange={handleNameChange}
<input className="form-control"
value={name} id="new-app-name"
onChange={handleNameChange} type="text"
className="form-control" required
placeholder={trans('user.oauth.name')} />
type="text" </div>
required <div className="form-group">
/> <label htmlFor="new-app-redirect">{t('user.oauth.redirect')}</label>
</td> <input
</tr> value={url}
<tr> onChange={handleUrlChange}
<td className="key">{trans('user.oauth.redirect')}</td> className="form-control"
<td className="value"> id="new-app-redirect"
<input type="url"
value={url} required
onChange={handleUrlChange} />
className="form-control" </div>
placeholder={trans('user.oauth.redirect')}
type="url"
required
/>
</td>
</tr>
</tbody>
</table>
</Modal> </Modal>
) )
} }

View File

@ -27,14 +27,14 @@ describe('create app', () => {
it('succeeded', async () => { it('succeeded', async () => {
fetch.post.mockResolvedValue(fixture) fetch.post.mockResolvedValue(fixture)
const { getByPlaceholderText, getByText, queryByText } = render(<OAuth />) const { getByLabelText, getByText, queryByText } = render(<OAuth />)
await wait() await wait()
fireEvent.click(getByText(t('user.oauth.create'))) fireEvent.click(getByText(t('user.oauth.create')))
fireEvent.input(getByPlaceholderText(t('user.oauth.name')), { fireEvent.input(getByLabelText(t('user.oauth.name')), {
target: { value: 'My App' }, target: { value: 'My App' },
}) })
fireEvent.input(getByPlaceholderText(t('user.oauth.redirect')), { fireEvent.input(getByLabelText(t('user.oauth.redirect')), {
target: { value: 'http://url.test/' }, target: { value: 'http://url.test/' },
}) })
fireEvent.click(getByText(t('general.confirm'))) fireEvent.click(getByText(t('general.confirm')))
@ -52,16 +52,16 @@ describe('create app', () => {
it('failed', async () => { it('failed', async () => {
fetch.post.mockResolvedValue({ message: 'exception' }) fetch.post.mockResolvedValue({ message: 'exception' })
const { getByPlaceholderText, getByText, getByRole, queryByText } = render( const { getByLabelText, getByText, getByRole, queryByText } = render(
<OAuth />, <OAuth />,
) )
await wait() await wait()
fireEvent.click(getByText(t('user.oauth.create'))) fireEvent.click(getByText(t('user.oauth.create')))
fireEvent.input(getByPlaceholderText(t('user.oauth.name')), { fireEvent.input(getByLabelText(t('user.oauth.name')), {
target: { value: 'My App' }, target: { value: 'My App' },
}) })
fireEvent.input(getByPlaceholderText(t('user.oauth.redirect')), { fireEvent.input(getByLabelText(t('user.oauth.redirect')), {
target: { value: 'http://url.test/' }, target: { value: 'http://url.test/' },
}) })
fireEvent.click(getByText(t('general.confirm'))) fireEvent.click(getByText(t('general.confirm')))
@ -78,14 +78,14 @@ describe('create app', () => {
}) })
it('cancel dialog', async () => { it('cancel dialog', async () => {
const { getByPlaceholderText, getByText } = render(<OAuth />) const { getByLabelText, getByText } = render(<OAuth />)
await wait() await wait()
fireEvent.click(getByText(t('user.oauth.create'))) fireEvent.click(getByText(t('user.oauth.create')))
fireEvent.input(getByPlaceholderText(t('user.oauth.name')), { fireEvent.input(getByLabelText(t('user.oauth.name')), {
target: { value: 'My App' }, target: { value: 'My App' },
}) })
fireEvent.input(getByPlaceholderText(t('user.oauth.redirect')), { fireEvent.input(getByLabelText(t('user.oauth.redirect')), {
target: { value: 'http://url.test/' }, target: { value: 'http://url.test/' },
}) })
fireEvent.click(getByText(t('general.cancel'))) fireEvent.click(getByText(t('general.cancel')))
@ -94,8 +94,8 @@ describe('create app', () => {
expect(fetch.post).not.toBeCalled() expect(fetch.post).not.toBeCalled()
fireEvent.click(getByText(t('user.oauth.create'))) fireEvent.click(getByText(t('user.oauth.create')))
expect(getByPlaceholderText(t('user.oauth.name'))).toHaveValue('') expect(getByLabelText(t('user.oauth.name'))).toHaveValue('')
expect(getByPlaceholderText(t('user.oauth.redirect'))).toHaveValue('') expect(getByLabelText(t('user.oauth.redirect'))).toHaveValue('')
}) })
}) })