From dd78f7c12bda172692a634e684ac923c705a732a Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 4 Jan 2021 17:49:45 -0800
Subject: [PATCH 1/6] First pass at access token creation page

---
 web/pages/access-tokens.tsx | 193 ++++++++++++++++++++++++++++++++++++
 web/utils/apis.ts           |   8 ++
 2 files changed, 201 insertions(+)
 create mode 100644 web/pages/access-tokens.tsx

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
new file mode 100644
index 000000000..f38881740
--- /dev/null
+++ b/web/pages/access-tokens.tsx
@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from "react";
+import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography } from 'antd';
+import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
+const { Title, Paragraph, Text } = Typography;
+
+import format from 'date-fns/format'
+
+import {
+    fetchData,
+    ACCESS_TOKENS,
+    DELETE_ACCESS_TOKEN,
+    CREATE_ACCESS_TOKEN,
+} from "../utils/apis";
+
+export default function Logs() {
+    const columns = [
+        {
+            title: '',
+            key: 'delete',
+            render: (text, record) => (
+                <Space size="middle">
+                    <Button onClick={() => handleDeleteToken(record.token)} icon={<DeleteOutlined />} />
+                </Space>
+            )
+        },
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Token',
+            dataIndex: 'token',
+            key: 'token',
+            render: (text, record) => (
+               <Input.Password size="small" bordered={false} value={text}/>
+            )
+        },
+        {
+            title: 'Scopes',
+            dataIndex: 'scopes',
+            key: 'scopes',
+            render: scopes => (
+                <>
+                    {scopes.map(scope => {
+                        const color = 'purple';
+
+                        return (
+                            <Tag color={color} key={scope}>
+                                {convertScopeStringToRenderString(scope)}
+                            </Tag>
+                        );
+                    })}
+                </>
+            ),
+        },
+        {
+            title: 'Last Used',
+            dataIndex: 'lastUsed',
+            key: 'lastUsed',
+            render: (timestamp) => {
+                const dateObject = new Date(timestamp);
+                return format(dateObject, 'P p');
+            },
+        },
+    ];
+
+    const [tokens, setTokens] = useState([]);
+
+    const getAccessTokens = async () => {
+        try {
+            const result = await fetchData(ACCESS_TOKENS);
+            setTokens(result);
+        } catch (error) {
+            handleError(error);
+        }
+    };
+
+    useEffect(() => {
+        getAccessTokens();
+
+        // returned function will be called on component unmount
+        return () => {
+        };
+    }, []);
+
+    async function handleDeleteToken(token) {
+        try {
+            const result = await fetchData(DELETE_ACCESS_TOKEN, { method: 'POST', data: { token: token } });
+            getAccessTokens();
+        } catch (error) {
+            handleError(error);
+        }
+    }
+
+    async function handleSaveToken(name: string, scopes: string[]) {
+        try {
+            const result = await fetchData(CREATE_ACCESS_TOKEN, { method: 'POST', data: { name: name, scopes: scopes } });
+            getAccessTokens();
+        } catch (error) {
+            handleError(error);
+        }
+    }
+
+    function handleError(error) {
+        console.error("error", error);
+        alert(error);
+    }
+
+    const [isTokenModalVisible, setIsTokenModalVisible] = useState(false);
+
+    const showCreateTokenModal = () => {
+        setIsTokenModalVisible(true);
+    };
+
+    const handleTokenModalSaveButton = (name, scopes) => {
+        setIsTokenModalVisible(false);
+        handleSaveToken(name, scopes);
+    };
+
+    const handleTokenModalCancel = () => {
+        setIsTokenModalVisible(false);
+    };
+
+
+    return (
+        <div>
+            <Title>Access Tokens</Title>
+            <Paragraph>
+                Access tokens are used to allow external, 3rd party tools to perform specific actions on your Owncast server.
+                They should be kept secure and never included in client code, instead they should be kept on a server that you control.
+            </Paragraph>
+            <Paragraph>
+                Read more about how to use these tokens at _some documentation here_.
+            </Paragraph>
+
+            <Table rowKey="token" columns={columns} dataSource={tokens} pagination={false} />
+            <Button onClick={showCreateTokenModal}>Create Access Token</Button>
+            <NewTokenModal visible={isTokenModalVisible} onOk={handleTokenModalSaveButton} onCancel={handleTokenModalCancel} />
+        </div>
+    );
+}
+
+const scopeMapping = {
+    'CAN_SEND_SYSTEM_MESSAGES': 'system chat',
+    'CAN_SEND_MESSAGES': 'user chat',
+};
+
+function convertScopeStringToRenderString(scope) {
+    if (!scopeMapping[scope]) {
+        return "unknown";
+    }
+
+    return scopeMapping[scope].toUpperCase();
+}
+
+function NewTokenModal(props) {
+    var selectedScopes = [];
+
+    const scopes = [
+        {
+            value: 'CAN_SEND_SYSTEM_MESSAGES',
+            label: 'Can send system chat messages',
+            description: 'Can send chat messages as the offical system user.'
+        },
+        {
+            value: 'CAN_SEND_MESSAGES',
+            label: 'Can send user chat messages',
+            description: 'Can send chat messages as any user name.'
+        },
+    ]
+
+    function onChange(checkedValues) {
+        selectedScopes = checkedValues
+    }
+
+    function saveToken() {
+        props.onOk(name, selectedScopes)
+    }
+
+    const [name, setName] = useState([]);
+
+    return (
+        <Modal title="Create New Access token" visible={props.visible} onOk={saveToken} onCancel={props.onCancel}>
+            <p><Input value={name} placeholder="Access token name/description" onChange={(input) => setName(input.currentTarget.value)} /></p>
+
+            <p>
+                Select the permissions this access token will have.  It cannot be edited after it's created.
+            </p>
+            <Checkbox.Group options={scopes} onChange={onChange} />
+        </Modal>
+    )
+}
\ No newline at end of file
diff --git a/web/utils/apis.ts b/web/utils/apis.ts
index 0c60790c1..d8c084841 100644
--- a/web/utils/apis.ts
+++ b/web/utils/apis.ts
@@ -40,6 +40,14 @@ export const CHAT_HISTORY = `${API_LOCATION}chat/messages`;
 // Get chat history
 export const UPDATE_CHAT_MESSGAE_VIZ = `${NEXT_PUBLIC_API_HOST}api/admin/chat/updatemessagevisibility`;
 
+// Get all access tokens
+export const ACCESS_TOKENS = `${API_LOCATION}accesstokens`;
+
+// Delete a single access token
+export const DELETE_ACCESS_TOKEN = `${API_LOCATION}deleteaccesstoken`;
+
+// Create a new access token
+export const CREATE_ACCESS_TOKEN = `${API_LOCATION}createaccesstoken`;
 
 const GITHUB_RELEASE_URL = "https://api.github.com/repos/owncast/owncast/releases/latest";
 

From a6cd3a1a5f40f06ed9a06ca7cbfdc91bac2b5a99 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 4 Jan 2021 20:46:27 -0800
Subject: [PATCH 2/6] Fix build error

---
 web/pages/access-tokens.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
index f38881740..13f5f6d83 100644
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -178,7 +178,7 @@ function NewTokenModal(props) {
         props.onOk(name, selectedScopes)
     }
 
-    const [name, setName] = useState([]);
+    const [name, setName] = useState('');
 
     return (
         <Modal title="Create New Access token" visible={props.visible} onOk={saveToken} onCancel={props.onCancel}>

From 45337d0bea357b48359c10a8cbe5aa0451edb4e3 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 5 Jan 2021 11:29:45 -0800
Subject: [PATCH 3/6] Cleanup

---
 web/pages/access-tokens.tsx | 116 +++++++++++++++++-------------------
 1 file changed, 55 insertions(+), 61 deletions(-)

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
index 13f5f6d83..549a2d84d 100644
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -12,7 +12,61 @@ import {
     CREATE_ACCESS_TOKEN,
 } from "../utils/apis";
 
-export default function Logs() {
+const scopeMapping = {
+    'CAN_SEND_SYSTEM_MESSAGES': 'system chat',
+    'CAN_SEND_MESSAGES': 'user chat',
+};
+
+function convertScopeStringToRenderString(scope) {
+    if (!scope || !scopeMapping[scope]) {
+        return "unknown";
+    }
+
+    return scopeMapping[scope].toUpperCase();
+}
+
+function NewTokenModal(props) {
+    var selectedScopes = [];
+
+    const scopes = [
+        {
+            value: 'CAN_SEND_SYSTEM_MESSAGES',
+            label: 'Can send system chat messages',
+            description: 'Can send chat messages as the offical system user.'
+        },
+        {
+            value: 'CAN_SEND_MESSAGES',
+            label: 'Can send user chat messages',
+            description: 'Can send chat messages as any user name.'
+        },
+    ]
+
+    function onChange(checkedValues) {
+        selectedScopes = checkedValues
+    }
+
+    function saveToken() {
+        props.onOk(name, selectedScopes)
+    }
+
+    const [name, setName] = useState('');
+
+    return (
+        <Modal title="Create New Access token" visible={props.visible} onOk={saveToken} onCancel={props.onCancel}>
+            <p><Input value={name} placeholder="Access token name/description" onChange={(input) => setName(input.currentTarget.value)} /></p>
+
+            <p>
+                Select the permissions this access token will have.  It cannot be edited after it's created.
+            </p>
+            <Checkbox.Group options={scopes} onChange={onChange} />
+        </Modal>
+    )
+}
+
+export default function AccessTokens() {
+    const [tokens, setTokens] = useState([]);
+    const [isTokenModalVisible, setIsTokenModalVisible] = useState(false);
+
     const columns = [
         {
             title: '',
@@ -65,8 +119,6 @@ export default function Logs() {
         },
     ];
 
-    const [tokens, setTokens] = useState([]);
-
     const getAccessTokens = async () => {
         try {
             const result = await fetchData(ACCESS_TOKENS);
@@ -78,10 +130,6 @@ export default function Logs() {
 
     useEffect(() => {
         getAccessTokens();
-
-        // returned function will be called on component unmount
-        return () => {
-        };
     }, []);
 
     async function handleDeleteToken(token) {
@@ -107,8 +155,6 @@ export default function Logs() {
         alert(error);
     }
 
-    const [isTokenModalVisible, setIsTokenModalVisible] = useState(false);
-
     const showCreateTokenModal = () => {
         setIsTokenModalVisible(true);
     };
@@ -122,7 +168,6 @@ export default function Logs() {
         setIsTokenModalVisible(false);
     };
 
-
     return (
         <div>
             <Title>Access Tokens</Title>
@@ -140,54 +185,3 @@ export default function Logs() {
         </div>
     );
 }
-
-const scopeMapping = {
-    'CAN_SEND_SYSTEM_MESSAGES': 'system chat',
-    'CAN_SEND_MESSAGES': 'user chat',
-};
-
-function convertScopeStringToRenderString(scope) {
-    if (!scopeMapping[scope]) {
-        return "unknown";
-    }
-
-    return scopeMapping[scope].toUpperCase();
-}
-
-function NewTokenModal(props) {
-    var selectedScopes = [];
-
-    const scopes = [
-        {
-            value: 'CAN_SEND_SYSTEM_MESSAGES',
-            label: 'Can send system chat messages',
-            description: 'Can send chat messages as the offical system user.'
-        },
-        {
-            value: 'CAN_SEND_MESSAGES',
-            label: 'Can send user chat messages',
-            description: 'Can send chat messages as any user name.'
-        },
-    ]
-
-    function onChange(checkedValues) {
-        selectedScopes = checkedValues
-    }
-
-    function saveToken() {
-        props.onOk(name, selectedScopes)
-    }
-
-    const [name, setName] = useState('');
-
-    return (
-        <Modal title="Create New Access token" visible={props.visible} onOk={saveToken} onCancel={props.onCancel}>
-            <p><Input value={name} placeholder="Access token name/description" onChange={(input) => setName(input.currentTarget.value)} /></p>
-
-            <p>
-                Select the permissions this access token will have.  It cannot be edited after it's created.
-            </p>
-            <Checkbox.Group options={scopes} onChange={onChange} />
-        </Modal>
-    )
-}
\ No newline at end of file

From cd9fead87a219fc871b4d99796a2ffc30c4a4856 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 5 Jan 2021 12:49:19 -0800
Subject: [PATCH 4/6] Add single new token to list on save

---
 web/pages/access-tokens.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
index 549a2d84d..705e4a25d 100644
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -112,8 +112,11 @@ export default function AccessTokens() {
             title: 'Last Used',
             dataIndex: 'lastUsed',
             key: 'lastUsed',
-            render: (timestamp) => {
-                const dateObject = new Date(timestamp);
+            render: (lastUsed) => {
+                if (!lastUsed) {
+                    return 'Never';
+                }
+                const dateObject = new Date(lastUsed);
                 return format(dateObject, 'P p');
             },
         },
@@ -130,7 +133,7 @@ export default function AccessTokens() {
 
     useEffect(() => {
         getAccessTokens();
-    }, []);
+    }, [tokens]);
 
     async function handleDeleteToken(token) {
         try {
@@ -143,8 +146,9 @@ export default function AccessTokens() {
 
     async function handleSaveToken(name: string, scopes: string[]) {
         try {
-            const result = await fetchData(CREATE_ACCESS_TOKEN, { method: 'POST', data: { name: name, scopes: scopes } });
-            getAccessTokens();
+            const newToken = await fetchData(CREATE_ACCESS_TOKEN, { method: 'POST', data: { name: name, scopes: scopes } });
+            tokens.push(newToken);
+            setTokens(tokens);
         } catch (error) {
             handleError(error);
         }

From 0012fbb4d1d5cd53880075b9d7cf8d6de3255fcc Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 5 Jan 2021 16:43:33 -0800
Subject: [PATCH 5/6] push -> concat

---
 web/pages/access-tokens.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
index 705e4a25d..58288665f 100644
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -133,7 +133,7 @@ export default function AccessTokens() {
 
     useEffect(() => {
         getAccessTokens();
-    }, [tokens]);
+    }, []);
 
     async function handleDeleteToken(token) {
         try {
@@ -147,8 +147,7 @@ export default function AccessTokens() {
     async function handleSaveToken(name: string, scopes: string[]) {
         try {
             const newToken = await fetchData(CREATE_ACCESS_TOKEN, { method: 'POST', data: { name: name, scopes: scopes } });
-            tokens.push(newToken);
-            setTokens(tokens);
+            setTokens(tokens.concat(newToken));
         } catch (error) {
             handleError(error);
         }

From a74dc31dd4389cfb1ce0854338584e0cd4d742cc Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 5 Jan 2021 16:51:57 -0800
Subject: [PATCH 6/6] Centralize available scopes

---
 web/pages/access-tokens.tsx | 48 ++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
index 58288665f..79e096f47 100644
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography } from 'antd';
+import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
 import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
 const { Title, Paragraph, Text } = Typography;
 
@@ -12,34 +12,34 @@ import {
     CREATE_ACCESS_TOKEN,
 } from "../utils/apis";
 
-const scopeMapping = {
-    'CAN_SEND_SYSTEM_MESSAGES': 'system chat',
-    'CAN_SEND_MESSAGES': 'user chat',
+const availableScopes = {
+    'CAN_SEND_SYSTEM_MESSAGES': { name: 'System messages', description: 'You can send official messages on behalf of the system', color: 'purple' },
+    'CAN_SEND_MESSAGES': { name: 'User chat messages', description: 'You can send messages on behalf of a username', color: 'green' },
 };
 
-function convertScopeStringToRenderString(scope) {
-    if (!scope || !scopeMapping[scope]) {
-        return "unknown";
+function convertScopeStringToTag(scopeString) {
+    if (!scopeString || !availableScopes[scopeString]) {
+        return null;
     }
 
-    return scopeMapping[scope].toUpperCase();
+    const scope = availableScopes[scopeString];
+
+    return (
+        <Tooltip key={scopeString} title={scope.description}>
+            <Tag color={scope.color} >
+                {scope.name}
+            </Tag>
+        </Tooltip>
+    );
 }
 
 function NewTokenModal(props) {
     var selectedScopes = [];
 
-    const scopes = [
-        {
-            value: 'CAN_SEND_SYSTEM_MESSAGES',
-            label: 'Can send system chat messages',
-            description: 'Can send chat messages as the offical system user.'
-        },
-        {
-            value: 'CAN_SEND_MESSAGES',
-            label: 'Can send user chat messages',
-            description: 'Can send chat messages as any user name.'
-        },
-    ]
+
+    const scopes = Object.keys(availableScopes).map(function (key) {
+        return { value: key, label: availableScopes[key].description }
+    });
 
     function onChange(checkedValues) {
         selectedScopes = checkedValues
@@ -97,13 +97,7 @@ export default function AccessTokens() {
             render: scopes => (
                 <>
                     {scopes.map(scope => {
-                        const color = 'purple';
-
-                        return (
-                            <Tag color={color} key={scope}>
-                                {convertScopeStringToRenderString(scope)}
-                            </Tag>
-                        );
+                        return convertScopeStringToTag(scope);
                     })}
                 </>
             ),