working on slack login

client/package.json

@@ -19,7 +19,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "NODE_ENV=development webpack -c ./config/webpack.dev.js --mode development",
+    "start": "NODE_ENV=development webpack serve -c ./config/webpack.dev.js --mode development",
     "build": "NODE_ENV=production webpack --config ./config/webpack.prod.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

client/src/components/groups/groupPanel.tsx

@@ -29,6 +29,7 @@ export default function GroupPanel({
                     <TableBody>
                         {groups ? groups.map((group) => (
                             <GroupRow
+                                key = {group.id}
                                 name={group.name}
                                 id={group.id}
                                 invite_token={group.invite_token}

client/src/components/join/joinForm.tsx

@@ -0,0 +1,25 @@
+import Typography from "@mui/material/Typography";
+
+import {Group} from "../../types/group";
+import {JoinPlatform} from "./joinPlatform";
+import {useState} from "react";
+
+
+export interface JoinFormProps {
+    group: Group
+}
+
+export const JoinForm = ({group}: JoinFormProps) => {
+    const [platform, setPlatform] = useState();
+
+    return (
+        <>
+            <header className={'section-header'}>
+                Joining group: <code>{group.name}</code>
+            </header>
+        <JoinPlatform
+            platformSetter = {setPlatform}
+        ></JoinPlatform>
+        </>
+    )
+}

client/src/components/join/joinPlatform.tsx

@@ -0,0 +1,44 @@
+/*
+Select which platform you're joining from!
+ */
+
+import React, {useState} from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
+import {JoinSlack} from "../panels/joinSlack";
+
+const PLATFORMS = {
+    'Slack': JoinSlack
+}
+
+export const JoinPlatform = ({
+    platformSetter
+ }) => {
+    const [platform, setPlatform] = useState()
+
+    const handleSelect = (event) => {
+        setPlatform(event.target.value);
+        platformSetter(event.target.value);
+    }
+
+    return(
+        <div className={"list-row"}>
+            <FormControl fullWidth>
+                <InputLabel>Select Platform</InputLabel>
+                <Select
+                    value={platform}
+                    onChange={handleSelect}
+                    label={"Select Platform"}
+                    >
+                    <MenuItem value={'slack'}>Slack</MenuItem>
+                    
+            </Select>
+            </FormControl>
+
+        </div>
+    )
+}

client/src/components/panels/joinPanel.tsx

@@ -1,9 +1,79 @@
+import React from 'react';
+import {useState, useEffect} from "react";
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
 
+import {JoinForm} from "../join/joinForm";
+import {Group} from "../../types/group";
 
 export default function JoinPanel(){
+    const [text, setText] = useState('');
+    const [authError, setAuthError] = useState(false);
+    const [errorText, setErrorText] = useState('');
+    const [group, setGroup] = useState<Group>(undefined);
+
+    const getGroup = () => {
+        fetch('api/groups/invite', {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                token: text
+            })
+        })
+            .then(result => result.json())
+            .then(
+                response => {
+                    if (response.status !== "success"){
+                        setAuthError(true);
+                        setErrorText(response.message);
+                        setGroup(undefined);
+                    } else if (response.status === "success"){
+                        setAuthError(false);
+                        setErrorText('');
+                        setGroup(response.data)
+                        console.log(response)
+                    }
+
+            }
+        )
+    }
+
+    const handleClick = () => {
+        getGroup()
+    }
+
+    const textChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setText(event.target.value)
+    }
     return(
         <div className={"JoinPanel"}>
-
+            <div className={"InputGroup"}>
+                <TextField
+                    error={authError}
+                    helperText={errorText}
+                    className={"Input"}
+                    label={"Join with invite token"}
+                    onChange={textChanged}
+                    // disabled={loggedIn}
+                    // color={loggedIn ? "success" : undefined}
+                    // type={loggedIn ? "password" : undefined}
+                />
+                <Button
+                    variant="contained"
+                    onClick={handleClick}
+                    color={authError ? "error" : undefined}
+                    // disabled={loggedIn}
+                >
+                    Submit
+                </Button>
+            </div>
+            { group ?
+            <JoinForm
+                group = {group}
+            /> : undefined
+            }
         </div>
     )
 }

client/src/components/panels/joinSlack.tsx

@@ -0,0 +1,7 @@
+
+
+export const JoinSlack = () => {
+    return(
+        <></>
+    )
+}

client/src/sass/index.scss

@@ -3,5 +3,6 @@
 @import './variables.scss';
 @import './base.scss';
 @import './App.scss';
+@import './typography.scss';
 @import './tabs.scss';
 @import './input.scss';

client/src/sass/typography.scss

@@ -0,0 +1,17 @@
+.section-header {
+  color: $color-text;
+  font-size: 2rem;
+  margin: {
+    top: 1rem;
+  }
+}
+
+code {
+  font: {
+    family: 'Courier', 'Courier New', monospace;
+  }
+  background-color: $color-primary-background;
+  padding: 0 0.2em;
+  border-radius: 0.1em;
+  border: 1px solid $color-primary-border;
+}

client/src/sass/variables.scss

@@ -1,4 +1,7 @@
 $color-primary: #DED03A;
 $color-primary-darker: scale-color($color-primary, $lightness: -10%);
+$color-primary-background: adjust-color($color-primary, $alpha: -0.9, $saturation: -50%);
+$color-primary-border: adjust-color($color-primary, $alpha: -0.9, $lightness: 50%, $saturation: -50%);
 $color-secondary: #A167A5;
-$color-background: #1C1B22;
+$color-background: #1C1B22;
+$color-text: white;

client/src/types/group.tsx

@@ -0,0 +1,8 @@
+export interface Group {
+    created_at: string;
+    enable: boolean;
+    id: string;
+    invite_token: string;
+    name: string;
+    updated_at: string;
+}

server/src/app.ts

@@ -50,9 +50,9 @@ AppDataSource.initialize()
 
     console.log(`Server started on port: ${port}`)
 
-    await MatterbridgeManager.spawnAll();
-    console.log('Spawned group processes:');
-    let proclist = await MatterbridgeManager.processes;
-    console.log(proclist);
+    // await MatterbridgeManager.spawnAll();
+    // console.log('Spawned group processes:');
+    // let proclist = await MatterbridgeManager.processes;
+    // console.log(proclist);
 
   })

server/src/controllers/group.controller.ts

@@ -73,6 +73,30 @@ export const getGroupHandler = async(
     }
 };
 
+export const getGroupWithInviteHandler = async(
+    req: Request,
+    res:Response,
+    next: NextFunction
+) => {
+    let group = await groupRepository.findOneBy({invite_token: req.body.token})
+    if (!group) {
+        return res.status(404).json({
+            status: 'failed',
+            message: `No group with matching invite code exists.`
+        })
+    } else {
+        req.session.groups = req.session.groups || [];
+        if (!req.session.groups.includes(req.body.token)) {
+            req.session.groups.push(req.body.token);
+        }
+        return res.status(200).json({
+            status: 'success',
+            data: group
+        })
+    }
+
+}
+
 export const getGroupsHandler = async(
     req: Request,
     res: Response

server/src/controllers/slack.controller.ts

@@ -5,6 +5,7 @@ import {AppDataSource} from "../db/data-source";
 import {Bridge} from "../entities/bridge.entity";
 import {Group} from "../entities/group.entity";
 import { randomUUID } from "crypto";
+import {log} from "util";
 
 const scopes = ['bot', 'channels:write', 'chat:write:bot', 'chat:write:user', 'users.profile:read'];
 const bridgeRepository = AppDataSource.getRepository(Bridge)
@@ -40,6 +41,29 @@ export const SlackInstallHandler = async(
     });
 }
 
+export const SlackInstallLinkHandler = async(
+    req: Request,
+    res: Response
+) => {
+    let login_token = randomUUID()
+
+    const url = await installer.generateInstallUrl({
+        scopes,
+        metadata: {token: login_token, group: req.query.group}
+    });
+
+    res.status(200).json({
+        status: 'success',
+        data: {
+            url,
+            login_token
+        }
+    })
+
+}
+
+
+
 
 export const SlackCallbackHandler = async(
     req: Request,

server/src/matterbridge/config.ts

@@ -153,7 +153,6 @@ export const GatewayToTOML = (gateway: Gateway) => {
     protocols[bridge.protocol][bridge.name] = TOML.Section(bridgeEntry)
 
   })
-  console.log('protocols', protocols)
 
   return {
     ...protocols,

server/src/routes/group.routes.ts

@@ -2,7 +2,8 @@ import express from 'express';
 
 import {
     createGroupHandler,
-    getGroupHandler
+    getGroupHandler,
+    getGroupWithInviteHandler
 } from "../controllers/group.controller";
 
 import {
@@ -19,4 +20,8 @@ router
     .post(validate(createGroupSchema), requireAdmin, createGroupHandler)
     .get(requireAdmin, getGroupHandler)
 
+router
+    .route('/invite')
+    .post(getGroupWithInviteHandler)
+
 export default router