Apply code formatting and complete OAuth 2.0 implementation

Co-authored-by: yuki-takei <1638767+yuki-takei@users.noreply.github.com>

apps/app/src/client/components/Admin/App/OAuth2Setting.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'next-i18next';
 import type { UseFormRegister } from 'react-hook-form';
 
@@ -17,93 +16,91 @@ const OAuth2Setting = (props: Props): JSX.Element => {
   const { register } = props;
 
   return (
-    <React.Fragment>
-      <div id="mail-oauth2" className="tab-pane active">
-        <div className="row mb-3">
-          <div className="col-md-12">
-            <div className="alert alert-info">
-              <span className="material-symbols-outlined">info</span>{' '}
-              {t('admin:app_setting.oauth2_description')}
-            </div>
+    <div id="mail-oauth2" className="tab-pane active">
+      <div className="row mb-3">
+        <div className="col-md-12">
+          <div className="alert alert-info">
+            <span className="material-symbols-outlined">info</span>{' '}
+            {t('admin:app_setting.oauth2_description')}
           </div>
         </div>
+      </div>
 
-        <div className="row">
-          <label
-            className="text-start text-md-end col-md-3 col-form-label"
-            htmlFor="admin-oauth2-user"
-          >
-            {t('admin:app_setting.oauth2_user')}
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="email"
-              id="admin-oauth2-user"
-              placeholder="user@example.com"
-              {...register('oauth2User')}
-            />
-            <small className="form-text text-muted">
-              {t('admin:app_setting.oauth2_user_help')}
-            </small>
-          </div>
+      <div className="row">
+        <label
+          className="text-start text-md-end col-md-3 col-form-label"
+          htmlFor="admin-oauth2-user"
+        >
+          {t('admin:app_setting.oauth2_user')}
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="email"
+            id="admin-oauth2-user"
+            placeholder="user@example.com"
+            {...register('oauth2User')}
+          />
+          <small className="form-text text-muted">
+            {t('admin:app_setting.oauth2_user_help')}
+          </small>
         </div>
+      </div>
 
-        <div className="row">
-          <label
-            className="text-start text-md-end col-md-3 col-form-label"
-            htmlFor="admin-oauth2-client-id"
-          >
-            {t('admin:app_setting.oauth2_client_id')}
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="text"
-              id="admin-oauth2-client-id"
-              {...register('oauth2ClientId')}
-            />
-          </div>
+      <div className="row">
+        <label
+          className="text-start text-md-end col-md-3 col-form-label"
+          htmlFor="admin-oauth2-client-id"
+        >
+          {t('admin:app_setting.oauth2_client_id')}
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="text"
+            id="admin-oauth2-client-id"
+            {...register('oauth2ClientId')}
+          />
         </div>
+      </div>
 
-        <div className="row">
-          <label
-            className="text-start text-md-end col-md-3 col-form-label"
-            htmlFor="admin-oauth2-client-secret"
-          >
-            {t('admin:app_setting.oauth2_client_secret')}
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="password"
-              id="admin-oauth2-client-secret"
-              {...register('oauth2ClientSecret')}
-            />
-          </div>
+      <div className="row">
+        <label
+          className="text-start text-md-end col-md-3 col-form-label"
+          htmlFor="admin-oauth2-client-secret"
+        >
+          {t('admin:app_setting.oauth2_client_secret')}
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="password"
+            id="admin-oauth2-client-secret"
+            {...register('oauth2ClientSecret')}
+          />
         </div>
+      </div>
 
-        <div className="row">
-          <label
-            className="text-start text-md-end col-md-3 col-form-label"
-            htmlFor="admin-oauth2-refresh-token"
-          >
-            {t('admin:app_setting.oauth2_refresh_token')}
-          </label>
-          <div className="col-md-6">
-            <input
-              className="form-control"
-              type="password"
-              id="admin-oauth2-refresh-token"
-              {...register('oauth2RefreshToken')}
-            />
-            <small className="form-text text-muted">
-              {t('admin:app_setting.oauth2_refresh_token_help')}
-            </small>
-          </div>
+      <div className="row">
+        <label
+          className="text-start text-md-end col-md-3 col-form-label"
+          htmlFor="admin-oauth2-refresh-token"
+        >
+          {t('admin:app_setting.oauth2_refresh_token')}
+        </label>
+        <div className="col-md-6">
+          <input
+            className="form-control"
+            type="password"
+            id="admin-oauth2-refresh-token"
+            {...register('oauth2RefreshToken')}
+          />
+          <small className="form-text text-muted">
+            {t('admin:app_setting.oauth2_refresh_token_help')}
+          </small>
         </div>
       </div>
-    </React.Fragment>
+    </div>
   );
 };