From d119b054bec5290dc72ddf6c35750459685a00a0 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sat, 8 Feb 2020 09:51:46 +0800
Subject: [PATCH] tweak OAuth mgmt page

---
 .../src/views/user/OAuth/ModalCreate.tsx      | 54 ++++++++-----------
 .../assets/tests/views/user/OAuth.test.tsx    | 22 ++++----
 2 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/resources/assets/src/views/user/OAuth/ModalCreate.tsx b/resources/assets/src/views/user/OAuth/ModalCreate.tsx
index 31c9c0bd..265aefde 100644
--- a/resources/assets/src/views/user/OAuth/ModalCreate.tsx
+++ b/resources/assets/src/views/user/OAuth/ModalCreate.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
+import { t } from '../../../scripts/i18n'
 import Modal from '../../../components/Modal'
-import { trans } from '../../../scripts/i18n'
 
 interface Props {
   show: boolean
@@ -36,36 +36,28 @@ const ModalCreate: React.FC<Props> = props => {
       onDismiss={handleDismiss}
       onClose={props.onClose}
     >
-      <table className="table">
-        <tbody>
-          <tr>
-            <td className="key">{trans('user.oauth.name')}</td>
-            <td className="value">
-              <input
-                value={name}
-                onChange={handleNameChange}
-                className="form-control"
-                placeholder={trans('user.oauth.name')}
-                type="text"
-                required
-              />
-            </td>
-          </tr>
-          <tr>
-            <td className="key">{trans('user.oauth.redirect')}</td>
-            <td className="value">
-              <input
-                value={url}
-                onChange={handleUrlChange}
-                className="form-control"
-                placeholder={trans('user.oauth.redirect')}
-                type="url"
-                required
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div className="form-group">
+        <label htmlFor="new-app-name">{t('user.oauth.name')}</label>
+        <input
+          value={name}
+          onChange={handleNameChange}
+          className="form-control"
+          id="new-app-name"
+          type="text"
+          required
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="new-app-redirect">{t('user.oauth.redirect')}</label>
+        <input
+          value={url}
+          onChange={handleUrlChange}
+          className="form-control"
+          id="new-app-redirect"
+          type="url"
+          required
+        />
+      </div>
     </Modal>
   )
 }
diff --git a/resources/assets/tests/views/user/OAuth.test.tsx b/resources/assets/tests/views/user/OAuth.test.tsx
index 851f8b7f..055c7ad0 100644
--- a/resources/assets/tests/views/user/OAuth.test.tsx
+++ b/resources/assets/tests/views/user/OAuth.test.tsx
@@ -27,14 +27,14 @@ describe('create app', () => {
 
   it('succeeded', async () => {
     fetch.post.mockResolvedValue(fixture)
-    const { getByPlaceholderText, getByText, queryByText } = render(<OAuth />)
+    const { getByLabelText, getByText, queryByText } = render(<OAuth />)
     await wait()
 
     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' },
     })
-    fireEvent.input(getByPlaceholderText(t('user.oauth.redirect')), {
+    fireEvent.input(getByLabelText(t('user.oauth.redirect')), {
       target: { value: 'http://url.test/' },
     })
     fireEvent.click(getByText(t('general.confirm')))
@@ -52,16 +52,16 @@ describe('create app', () => {
 
   it('failed', async () => {
     fetch.post.mockResolvedValue({ message: 'exception' })
-    const { getByPlaceholderText, getByText, getByRole, queryByText } = render(
+    const { getByLabelText, getByText, getByRole, queryByText } = render(
       <OAuth />,
     )
     await wait()
 
     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' },
     })
-    fireEvent.input(getByPlaceholderText(t('user.oauth.redirect')), {
+    fireEvent.input(getByLabelText(t('user.oauth.redirect')), {
       target: { value: 'http://url.test/' },
     })
     fireEvent.click(getByText(t('general.confirm')))
@@ -78,14 +78,14 @@ describe('create app', () => {
   })
 
   it('cancel dialog', async () => {
-    const { getByPlaceholderText, getByText } = render(<OAuth />)
+    const { getByLabelText, getByText } = render(<OAuth />)
     await wait()
 
     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' },
     })
-    fireEvent.input(getByPlaceholderText(t('user.oauth.redirect')), {
+    fireEvent.input(getByLabelText(t('user.oauth.redirect')), {
       target: { value: 'http://url.test/' },
     })
     fireEvent.click(getByText(t('general.cancel')))
@@ -94,8 +94,8 @@ describe('create app', () => {
     expect(fetch.post).not.toBeCalled()
 
     fireEvent.click(getByText(t('user.oauth.create')))
-    expect(getByPlaceholderText(t('user.oauth.name'))).toHaveValue('')
-    expect(getByPlaceholderText(t('user.oauth.redirect'))).toHaveValue('')
+    expect(getByLabelText(t('user.oauth.name'))).toHaveValue('')
+    expect(getByLabelText(t('user.oauth.redirect'))).toHaveValue('')
   })
 })