From 7777628c8d22456a61af290aec7cbca46b14835c Mon Sep 17 00:00:00 2001
From: FoskyM <i@fosky.top>
Date: Sat, 30 Sep 2023 09:55:35 +0800
Subject: [PATCH] feat(admin): clients page

---
 extend.php                        |   2 +-
 js/dist/admin.js                  | Bin 7015 -> 8327 bytes
 js/dist/admin.js.map              | Bin 20632 -> 25169 bytes
 js/src/admin/pages/ClientsPage.js |  90 ++++++++++++++++++++++++++++--
 less/admin.less                   |  29 ++++++++++
 locale/zh-Hans.yml                |   9 +--
 6 files changed, 121 insertions(+), 9 deletions(-)

diff --git a/extend.php b/extend.php
index c8f1edd..bad30c4 100644
--- a/extend.php
+++ b/extend.php
@@ -28,7 +28,7 @@ return [
     (new Extend\Routes('forum'))
         ->post('/oauth/authorize', 'oauth.authorize.post', Controllers\AuthorizeController::class),
     (new Extend\Routes('api'))
-        ->get('/oauth/clients', 'oauth.clients.list', Api\Controller\ListClientController::class),
+        ->get('/oauth-clients', 'oauth.clients.list', Api\Controller\ListClientController::class),
 
     (new Extend\Middleware('api'))->add(ResourceScopeMiddleware::class),
 ];
diff --git a/js/dist/admin.js b/js/dist/admin.js
index 47a216f0b03a994c05c3c66bcdb4dd3fc1aa9845..589a21ae64ba68aee1b50010ef57e7c5ecd50726 100644
GIT binary patch
delta 1707
zcma)7OK%)S5Z2i1SB!9sABk;*)}sJD@p$3~7_#dj**L_6#19g}Yqc`%ncmqZGu=y1
z?_#rFZIF=Qf{4=MNW__30RI3ua^L_Lj$DzraDX2`&0`;d9N3jg)7>@IUw!pe&F^cU
z6uvppcakD$5~CrAtO=H-wp!|&Qs??Ek0%Gsa*a8Xa+Ve9<G#(u(_M$NP-e0Ed2mX-
zJ2W)C#a-g-rF<QWY-mf1A#9kA`eA5RZBCd^QhO;+*IAw}EEv2<OEwl>Eg(#WMXElZ
zSXE#3pU^_}p#Ln`U;7uqW-<$4mojI--pXXb)-%t5{W25z{21H6V*Av<)1v|rQyL~|
zqEKxQ{BhEYF}OxP0a{OiKB4&FxK=;@Xz(RXy9DqqXyUu!yV@+ZmjR%x(9kMV;=7^c
z6XwZEo~o}$=4NQAWb4biZQH!q<5Z-_zm41((7fZlv7h?2y!vHucFy5Jm9r?fa|Jh`
zY!`bZWk!8JH1~h__+rd*d>VzYizP@(+#7aV2`;;+Cr5kK)y?*ENE|32tOaqYAdcLt
z2?|S3U?%tEVU>ii3LRc0-Io{+dR8t8o$eV0-ny#_56FyOGRw%YLdgXIl9-Ehj%%{A
zsP0bA>`J4-I-sS=+B62Zicnia2)t6EMRnmmv3%~K&WpvRQc;$SreT=s!Q{O9dt|oN
zaC{twIen)9cWnSCL@cJ{#LPC$0O{5hE`mi*@LE+ji?AW_z7NU8j}?M}s%TTdPEYx)
zhrxBbAo8u~ak^@HY`i5c2}FiIjv8TCkTN}3AV!QcaWzT+IeOgZ?qU0q6y?8fF<FO%
z4yH%5)pl&LY~-0FL0PpX<9s(blY;xY*@z09(<M0o3DmJ)BRNuJC1e~O>AK08Q^Cw5
zxlR?h(U4Y%>trJq*;Q8Nh*;D`hRIBBNoY<YtvHa;gkn4v6(mLAsq3e*>a(%onM5Ly
z&FN(vX3Ka{(g1{}?wp>?$+j4*u<BEXAZ9Md!IJW(nWsS;4)?<<X1ViCvva}VzR#W8
zakN%fc%XAE$qnLg(Gg%uv<~8gq!1`3>K$khKmm1gd2mw-$~?5X0z)Y|OgiQf4o$<7
z6~a)DKn<;_z8yQ&ily^kCFt07_x5X2LdzKNE5(1K2~E&@yWQa*x<K0U=xB8%U*-Zu
zGn3d*DF#!Lt;;-vDM=P=y>Myc^2=8?U%C3~wd-5kJFVT<ZrptR)*ElW_4Ye>-*HLV
ztI+pu`vK$C_eCgc^$!jXKU`W~S$*#LwHIDIuUk-fQIKd0%ZgR@Io!3jdNy7qz!0F#
zrwvIWybp__2eC;^Heo=Wx?KyO4U?(+Q`d&m2tsX76}3V#RqqYYACFF7)U>Fcf5L=Z
sKRuc(&K&zQ<J$a=$!flD<dUfr!fcfn0<@9t2I!KyKl>>}dv@;PKjE-JE&u=k

delta 581
zcma)(zi-n(6vuUr6Q>|SOB4i7D2_#|yT+u6Kn#SVfg*L{$HHVq;5rw_m2*bEizU=X
z0ttx@3>9zYAAkjsy<%hl!NkD8iUcDAE0;J(9a%nldhaWJ-}}DjH-21sdrVstSUQaC
zCQObJZV3uatqkkht)*-*?vJ=H!<btkJkz#L%)5Tfg|rg*QYgbi!#I6A?y<=3wo@;$
zJSrO;C&cmLy<x&$$*Bt3Y>R8WE$Vd=yP`|IBp3}Dm%<e=%u(dQo7|e>*W5)#U9T%P
z^$UvkbxSeTR~29BQ_Y7Nf6us_UpXFP=1AhOG4|k2{^w#k^Y4*%wq!70@)X2{B@|4a
z7Oo@kN)`BKtf25+@c@~Ew$yrZ5Q;`WWKmBvBE|zbXbX6~P&q5QU23;%N@?sK5xHXW
zec?$SrIQCIKjz@jsQ%Bbm*7unTN{Tji<e=eXtny7G=z*3rmT4n+p#y2gLOX&r|H<F
zAqR|O{O=2x?82vV4GzqjxtVFKdtSh7LdMes9%DkB9hG~>$Q~L3H(gjYJ4iX!CiO}O
zp%hwYEO=4<Jg@f7{mQDz{&E@BZaRDvMdYe2{P+<Q>TbC)#5?ou5Z{Hv^ZRHMwye%y
D&=b5c

diff --git a/js/dist/admin.js.map b/js/dist/admin.js.map
index 5f1a3e8aa5fe9945fbeb2fba76054b6d0e02efda..a4d7b3a43f1ae87d81a4beabb24a5a2d29bf9065 100644
GIT binary patch
delta 4597
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

delta 1089
zcma)4O;1x%5DkQ+Xh=X&3k3m@AcPyB)dD6+GI#DPeSOrn)B-heK}+cueSEYai3?(k
z3u6okH!-eETpAaeu-27{YkvT7>&o~OoVgF83m0te$K07SXU;v}zc#&j*YxS6z2*Lf
z#G{Vqt=6Oz35W#stB!mY0YD(#WKvjkp0vysMllbZXj2SLDCBMX5s`tyo+60#T{Xo)
z+*e3f0!jlUxDpql`m=9%ByQ?K!~rsO6b^tR$`YU~A9BnQ%YZI!NnN-+TttgN(DDfI
ziv^}J^#fZJCCo4J9j7D_HmobsJExU!P;E(v-!setN{VQBjG(9t4MVY{H24C#*Wd1+
z@j9JmQWDP}j%ewh36$}yN0LOKcIgFbVY@P}U;BrfH!S_d-?K92A@Ic1ilwS}D5qf4
ztksMPv)*^r9qFkxEvrhTxPoT1xh!s^P3)M>s-q5e^)~OIPIN`1H6^kD*(ix;2c?$+
zJc?tnFd4CnfJ-@}?WUI-BTRdP!7Ol@5JFw)A6<dwJ*giB`ev!_LCrL)Nfs8W{LvUx
z4)aQjDuv>~GdBEFafcIJSy4xUYn{ZOCbq?63DyeZE7S+w(HReO`(MoPIWharFzXU9
zmgI5bG`N*B@F_hNu$ybBp9VT_o{!{z0hj**{tAQ+c8y-fw%Hilc9Cbz(!anWdk;^)
zge^zrSf*EuvFeK{eg*G0kj!Fy7YA#-V$N7H1!)=scgzuKzEjt-6O5%UWXV&pAZ{uB
zzGu31TZvVG)!gyVo)12KIMjB0ap*?BK1}-bOH64seo6lxYtwJlGu^ly)G~6_Kat-k
z7u-hu*64VnRB%T|MhEWA4Ls4`BDOvWw_PcP=FrO+NUjzOvlA51lXKUPUnHX)E$d}>
eO@Caib#J<aldlen!Fr)VYk7^A{HCk>bD=*2kunJY

diff --git a/js/src/admin/pages/ClientsPage.js b/js/src/admin/pages/ClientsPage.js
index fd464c3..594f0a1 100644
--- a/js/src/admin/pages/ClientsPage.js
+++ b/js/src/admin/pages/ClientsPage.js
@@ -1,22 +1,104 @@
 import app from 'flarum/admin/app';
 import Page from 'flarum/common/components/Page';
-
+import AdminPage from 'flarum/admin/components/AdminPage';
+import Button from 'flarum/common/components/Button';
+import Client from "../../common/models/Client";
 export default class ClientsPage extends Page {
   settingName = 'collapsible-posts.reasons';
   translationPrefix = 'foskym-oauth-center.admin.clients.';
+  clients = [];
   oninit(vnode) {
     super.oninit(vnode);
 
-    app.store.find('oauth/clients').then(() => {
+    this.fields = [
+      'client_id',
+      'client_secret',
+      'redirect_uri',
+      'grant_types',
+      'scope',
+      'client_name',
+      'client_desc',
+      'client_icon',
+      'client_home'
+    ];
+
+    app.store.find('oauth-clients').then(r => {
+      this.clients = r;
+      this.fields.map(key => console.log(this.clients[0][key]))
       m.redraw();
     });
   }
 
   view() {
     return (
-      <div>
-        <h2>Clients Page</h2>
+      <div class={"OAuthCenter-clientsPage"}>
+        {
+          m('.Form-group', [
+            m('table', [
+              m('thead', m('tr', [
+                this.fields.map(key => m('th', app.translator.trans(this.translationPrefix + key))),
+                m('th'),
+              ])),
+              m('tbody', [
+                this.clients.map((client, index) => m('tr', [
+                  this.fields.map(key =>
+                    m('td', m('input.FormControl', {
+                      type: 'text',
+                      value: client[key]() || '',
+                      onchange: (event) => {
+                        this.saveClientInfo(client.id(), key, event.target.value);
+                      },
+                    }))
+                  ),
+                  m('td', Button.component({
+                    className: 'Button Button--icon',
+                    icon: 'fas fa-times',
+                    onclick: () => {
+                      this.clients.splice(index, 1);
+
+                     // this.setting(settingName)(JSON.stringify(reasons));
+                    },
+                  })),
+                ])),
+                m('tr', m('td', {
+                  colspan: 9,
+                }, Button.component({
+                  className: 'Button Button--block',
+                  onclick: () => {
+                    const client = app.store.createRecord('oauth-clients');
+                    client.save({
+                      client_id: this.randomString(32),
+                      client_secret: this.randomString(32),
+                    }).then(console.log);
+
+                    // this.clients.push(Client.build({
+                    //
+                    // }));
+
+                    // this.setting(settingName)(JSON.stringify(reasons));
+                  },
+                }, app.translator.trans(this.translationPrefix + 'add_button')))),
+              ]),
+            ]),
+          ])
+        }
       </div>
     );
   }
+
+  randomString(len) {
+    len = len || 32;
+    let $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let maxPos = $chars.length;
+    let pwd = '';
+    for (let i = 0; i < len; i++) {
+      //0~32的整数
+      pwd += $chars.charAt(Math.floor(Math.random() * (maxPos + 1)));
+    }
+    return pwd;
+  }
+
+  saveClientInfo(id, key, value) {
+    console.log(id, key, value);
+  }
 }
diff --git a/less/admin.less b/less/admin.less
index 9795d1f..29341b2 100644
--- a/less/admin.less
+++ b/less/admin.less
@@ -24,6 +24,35 @@
       }
     }
   }
+
+  .OAuthCenterPage-container {
+    max-width: 100% !important;
+  }
+
+  .OAuthCenter-clientsPage {
+    table {
+      width: 100%;
+
+      td, th {
+        padding: 3px 5px;
+      }
+
+      th {
+        text-align: left;
+      }
+    }
+
+    .FormControl {
+      background: @body-bg;
+      border-color: @control-bg;
+
+      // We set the same as Flarum default, but with more specificity
+      &:focus,
+      &.focus {
+        border-color: @primary-color;
+      }
+    }
+  }
 }
 @media (min-width: 992px) {
   .OAuthCenter {
diff --git a/locale/zh-Hans.yml b/locale/zh-Hans.yml
index 7bcb0f0..8c7e4f2 100644
--- a/locale/zh-Hans.yml
+++ b/locale/zh-Hans.yml
@@ -15,10 +15,11 @@ foskym-oauth-center:
       redirect_uri: 回调地址（多地址请用空格分割）
       grant_types: 授权类型（可空）
       scope: 权限（可空）
-      name: 应用名称（可空）
-      description: 应用描述（可空）
-      icon: 应用图标地址（可空 可使用fontawesome图标）
-      home: 主页地址（可空）
+      client_name: 应用名称（可空）
+      client_desc: 应用描述（可空）
+      client_icon: 应用图标地址（可空 可使用fontawesome图标）
+      client_home: 主页地址（可空）
+      add_button: 添加应用
 
   forum:
     page: