Add Email provider.

2025-07-03 12:30:19 +08:00 · 2021-05-14 23:45:20 +08:00
parent b7cbc0e015
commit fb9f18af2c
8 changed files with 101 additions and 25 deletions
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@ -121,7 +121,7 @@ class OrganizationEditPage extends React.Component {
            {i18next.t("organization:Website URL")}:
          </Col>
          <Col span={22} >
-            <Input value={this.state.organization.websiteUrl} onChange={e => {
+            <Input prefix={<LinkOutlined/>} value={this.state.organization.websiteUrl} onChange={e => {
              this.updateOrganizationField('websiteUrl', e.target.value);
            }} />
          </Col>
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@ -13,7 +13,8 @@
 // limitations under the License.

 import React from "react";
-import {Button, Card, Col, Input, Row, Select} from 'antd';
+import {Button, Card, Col, Input, InputNumber, Row, Select} from 'antd';
+import {LinkOutlined} from "@ant-design/icons";
 import * as ProviderBackend from "./backend/ProviderBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
@ -44,9 +45,9 @@ class ProviderEditPage extends React.Component {
  }

  parseProviderField(key, value) {
-    // if ([].includes(key)) {
-    //   value = Setting.myParseInt(value);
-    // }
+    if (["port"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
    return value;
  }

@ -60,6 +61,29 @@ class ProviderEditPage extends React.Component {
    });
  }

+  getProviderTypeOptions(provider) {
+    if (provider.category === "OAuth") {
+      return (
+        [
+          {id: 'Google', name: 'Google'},
+          {id: 'GitHub', name: 'GitHub'},
+          {id: 'QQ', name: 'QQ'},
+          {id: 'WeChat', name: 'WeChat'},
+        ]
+      );
+    } else if (provider.category === "Email") {
+      return (
+        [
+          {id: 'Default', name: 'Default'},
+        ]
+      );
+    } else {
+      return (
+        []
+      );
+    }
+  }
+
  renderProvider() {
    return (
      <Card size="small" title={
@ -90,24 +114,35 @@ class ProviderEditPage extends React.Component {
        </Row>
        <Row style={{marginTop: '20px'}} >
          <Col style={{marginTop: '5px'}} span={2}>
-            {i18next.t("provider:Type")}:
+            {i18next.t("provider:Category")}:
          </Col>
          <Col span={22} >
-            <Select virtual={false} style={{width: '100%'}} value={this.state.provider.type} onChange={(value => {this.updateProviderField('type', value);})}>
+            <Select virtual={false} style={{width: '100%'}} value={this.state.provider.category} onChange={(value => {this.updateProviderField('category', value);})}>
              {
                [
-                  {id: 'Google', name: 'Google'},
-                  {id: 'GitHub', name: 'GitHub'},
-                  {id: 'QQ', name: 'QQ'},
-                  {id: 'WeChat', name: 'WeChat'},
-                ].map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>)
+                  {id: 'OAuth', name: 'OAuth'},
+                  {id: 'Email', name: 'Email'},
+                  {id: 'Phone', name: 'Phone'},
+                ].map((providerCategory, index) => <Option key={index} value={providerCategory.id}>{providerCategory.name}</Option>)
              }
            </Select>
          </Col>
        </Row>
        <Row style={{marginTop: '20px'}} >
          <Col style={{marginTop: '5px'}} span={2}>
-            {i18next.t("provider:Client ID")}:
+            {i18next.t("provider:Type")}:
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: '100%'}} value={this.state.provider.type} onChange={(value => {this.updateProviderField('type', value);})}>
+              {
+                this.getProviderTypeOptions(this.state.provider).map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            {this.state.provider.category === "Email" ? i18next.t("signup:Username") : i18next.t("provider:Client ID")}:
          </Col>
          <Col span={22} >
            <Input value={this.state.provider.clientId} onChange={e => {
@ -117,7 +152,7 @@ class ProviderEditPage extends React.Component {
        </Row>
        <Row style={{marginTop: '20px'}} >
          <Col style={{marginTop: '5px'}} span={2}>
-            {i18next.t("provider:Client secret")}:
+            {this.state.provider.category === "Email" ? i18next.t("login:Password") : i18next.t("provider:Client secret")}:
          </Col>
          <Col span={22} >
            <Input value={this.state.provider.clientSecret} onChange={e => {
@ -125,12 +160,32 @@ class ProviderEditPage extends React.Component {
            }} />
          </Col>
        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            {i18next.t("provider:Host")}:
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined/>} value={this.state.provider.host} onChange={e => {
+              this.updateProviderField('host', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={2}>
+            {i18next.t("provider:Port")}:
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.provider.port} onChange={value => {
+              this.updateProviderField('port', value);
+            }} />
+          </Col>
+        </Row>
        <Row style={{marginTop: '20px'}} >
          <Col style={{marginTop: '5px'}} span={2}>
            {i18next.t("provider:Provider URL")}:
          </Col>
          <Col span={22} >
-            <Input value={this.state.provider.providerUrl} onChange={e => {
+            <Input prefix={<LinkOutlined/>} value={this.state.provider.providerUrl} onChange={e => {
              this.updateProviderField('providerUrl', e.target.value);
            }} />
          </Col>
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@ -49,9 +49,12 @@ class ProviderListPage extends React.Component {
      name: `provider_${this.state.providers.length}`,
      createdTime: moment().format(),
      displayName: `New Provider - ${this.state.providers.length}`,
+      category: "OAuth",
      type: "GitHub",
      clientId: "",
      clientSecret: "",
+      host: "",
+      port: 0,
      providerUrl: "https://github.com/organizations/xxx/settings/applications/1234567",
    }
  }
@ -118,6 +121,13 @@ class ProviderListPage extends React.Component {
        // width: '100px',
        sorter: (a, b) => a.displayName.localeCompare(b.displayName),
      },
+      {
+        title: i18next.t("provider:Category"),
+        dataIndex: 'category',
+        key: 'category',
+        width: '100px',
+        sorter: (a, b) => a.category.localeCompare(b.category),
+      },
      {
        title: i18next.t("provider:Type"),
        dataIndex: 'type',
@ -125,9 +135,13 @@ class ProviderListPage extends React.Component {
        width: '80px',
        sorter: (a, b) => a.type.localeCompare(b.type),
        render: (text, record, index) => {
-          return (
-            <img width={30} height={30} src={Provider.getAuthLogo(record)} alt={record.displayName} />
-          )
+          if (record.category !== "OAuth") {
+            return text;
+          } else {
+            return (
+              <img width={30} height={30} src={Provider.getAuthLogo(record)} alt={record.displayName} />
+            )
+          }
        }
      },
      {
--- a/web/src/UrlTable.js
+++ b/web/src/UrlTable.js
@ -13,7 +13,7 @@
 // limitations under the License.

 import React from "react";
-import {DownOutlined, DeleteOutlined, UpOutlined} from '@ant-design/icons';
+import {DownOutlined, DeleteOutlined, UpOutlined, LinkOutlined} from '@ant-design/icons';
 import {Button, Col, Input, Row, Table, Tooltip} from 'antd';
 import * as Setting from "./Setting";

@ -66,7 +66,7 @@ class UrlTable extends React.Component {
        key: 'id',
        render: (text, record, index) => {
          return (
-            <Input value={text} onChange={e => {
+            <Input prefix={<LinkOutlined/>} value={text} onChange={e => {
              this.updateField(table, index, e.target.value);
            }} />
          )
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@ -184,7 +184,7 @@ class LoginPage extends React.Component {
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
-              placeholder={i18next.t("login:password")}
+              placeholder={i18next.t("login:Password")}
              disabled={!application.enablePassword}
            />
          </Form.Item>
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@ -55,7 +55,7 @@
    "Please input your username, Email or phone number!": "Please input your username, Email or phone number!",
    "username, Email or phone number": "username, Email or phone number",
    "Please input your password!": "Please input your password!",
-    "password": "password",
+    "Password": "Password",
    "Auto login": "Auto login",
    "Forgot password?": "Forgot password?",
    "Sign In": "Sign In",
@ -77,6 +77,9 @@
  },
  "provider":
  {
+    "Name": "Name",
+    "Display name": "Display name",
+    "Category": "Category",
    "Type": "Type",
    "Client ID": "Client ID",
    "Client secret": "Client secret",
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@ -30,7 +30,7 @@
    "OAuth providers": "OAuth提供方",
    "Applications that requires authentication": "需要鉴权的应用",
    "Swagger": "API总览",
-    "Phone Prefix": "电话前缀"
+    "Phone Prefix": "手机号前缀"
  },
  "signup":
  {
@ -55,7 +55,7 @@
    "Please input your username, Email or phone number!": "请输入您的用户名、Email或手机号！",
    "username, Email or phone number": "用户名、Email或手机号",
    "Please input your password!": "请输入您的密码！",
-    "password": "密码",
+    "Password": "密码",
    "Auto login": "下次自动登录",
    "Forgot password?": "忘记密码？",
    "Sign In": "登录",
@ -79,6 +79,7 @@
  {
    "Name": "名称",
    "Display name": "显示名称",
+    "Category": "分类",
    "Type": "类型",
    "Client ID": "Client ID",
    "Client secret": "Client secret",
@ -123,7 +124,7 @@
    "Reset Phone": "重置手机号",
    "Send Code": "发送验证码",
    "Empty email": "邮箱为空",
-    "Empty phone": "电话为空",
+    "Empty phone": "手机号为空",
    "Empty Code": "验证码为空",
    "phone reset": "手机号已设置",
    "email reset": "邮箱已设置",