Merge branch 'master' of https://github.com/apocas/restai

frontend/public/index.html

@@ -9,7 +9,7 @@
  name="description"
  content="Web site created using create-react-app"
  />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
  <!--
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

frontend/src/components/common/Navigation.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { Container, Navbar, Button, Nav } from 'react-bootstrap';
 import { NavLink } from "react-router-dom";
 import { AuthContext } from './AuthProvider.js';
+import restaiLogo from '../../assets/img/restai-logo.png';
 
 function Navigation() {
  const { logout, getBasicAuth } = useContext(AuthContext);
@@ -10,6 +11,13 @@ function Navigation() {
  <Navbar expand="lg" className="bg-body-tertiary">
  <Container>
  <Navbar.Brand href="/admin">
+ <img
+ alt=""
+ src={restaiLogo}
+ width="30"
+ height="30"
+ className="d-inline-block align-top"
+ />{' '}
  RestAI
  </Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
@@ -42,13 +50,19 @@ function Navigation() {
  {user.username && (
  <Nav>
  <Navbar.Text>
- Signed in as: <NavLink
+ Signed in as: {' '}
+ <NavLink
  to={"/users/" + user.username}
  >
- {user.username}{' '}
+ 👤{user.username}{' | '}
+ </NavLink>
+ <NavLink
+ to={"/users/" + user.username + "/edit"}
+ >
+ ⚙️Edit{' |'}
  </NavLink>
- <Button variant="link" onClick={logout}>
- Logout
+ <Button style={{ textDecoration: "none", color: "black", padding: "0px", verticalAlign: "0px" }} variant="link" onClick={logout}>
+ 🚪Logout
  </Button>
  </Navbar.Text>
  </Nav>

frontend/src/components/pages/Login/Login.js

@@ -2,6 +2,7 @@ import { Form, Button, Alert } from "react-bootstrap";
 import React, { useState, useContext } from "react";
 import { Navigate } from 'react-router-dom';
 import "./login.css";
+import restaiLogo from '../../../assets/img/restai-logo.png';
 import { AuthContext } from '../../common/AuthProvider.js';
 
 function Login() {
@@ -34,7 +35,7 @@ function Login() {
  <Form className="shadow p-4 bg-white rounded" onSubmit={handleSubmit}>
  <img
  className="img-thumbnail mx-auto d-block mb-2"
- src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png"
+ src={restaiLogo}
  alt="logo"
  />
  <div className="h4 mb-2 text-center">LOGIN</div>

frontend/src/components/pages/Login/login.css

@@ -25,7 +25,7 @@
 }
 
 .sign-in__wrapper form img {
- width: 4rem;
+ width: 60%;
 }
 
 @keyframes showSignInForm {

frontend/src/components/pages/Projects/Projects.js

@@ -7,6 +7,7 @@ function Projects() {
 
  const url = process.env.REACT_APP_RESTAI_API_URL || "";
  const [data, setData] = useState([]);
+ const [users, setUsers] = useState({ "teste": [] });
  const [info, setInfo] = useState({ "version": "", "embeddings": [], "llms": [], "loaders": [] });
  const [error, setError] = useState([]);
  const projectNameForm = useRef(null)
@@ -28,7 +29,11 @@ function Projects() {
  const fetchProjects = () => {
  return fetch(url + "/projects", { headers: new Headers({ 'Authorization': 'Basic ' + user.basicAuth }) })
  .then((res) => res.json())
- .then((d) => setData(d)
+ .then((d) => {
+ setData(d)
+ if (user.admin)
+ fetchUsers(d);
+ }
  ).catch(err => {
  setError([...error, { "functionName": "fetchProjects", "error": err.toString() }]);
  });
@@ -43,6 +48,27 @@ function Projects() {
  });
  }
 
+ const fetchUsers = (data) => {
+ return fetch(url + "/users", { headers: new Headers({ 'Authorization': 'Basic ' + user.basicAuth }) })
+ .then((res) => res.json())
+ .then((d) => {
+ var arr = {};
+ for (let i = 0; i < data.length; i++) {
+ arr[data[i].name] = []
+ for (let j = 0; j < d.length; j++) {
+ for (let z = 0; z < d[j].projects.length; z++) {
+ if (data[i].name === d[j].projects[z].name)
+ arr[data[i].name].push(d[j].username);
+ }
+ }
+ }
+ setUsers(arr)
+ }
+ ).catch(err => {
+ setError([...error, { "functionName": "fetchUsers", "error": err.toString() }]);
+ });
+ }
+
  // TODO: response handling
  const onSubmitHandler = (event) => {
  event.preventDefault();
@@ -86,6 +112,9 @@ function Projects() {
  <th>#</th>
  <th>Project Name</th>
  <th>Actions</th>
+ {user.admin &&
+ <th>Used by</th>
+ }
  </tr>
  </thead>
  <tbody>
@@ -124,6 +153,19 @@ function Projects() {
  </NavLink>
  <Button onClick={() => handleDeleteClick(project.name)} variant="danger">Delete</Button>
  </td>
+ {
+ user.admin &&
+ <td>
+ {typeof users[project.name] !== "undefined" && (
+ users[project.name].map((user, index) => {
+ if (users[project.name].length - 1 === index)
+ return <NavLink key={index} to={"/users/" + user}>{user}</NavLink>
+ return <NavLink key={index} to={"/users/" + user}>{user + ", "}</NavLink>
+ })
+ )
+ }
+ </td>
+ }
  </tr>
  )
  })

frontend/src/components/pages/Users/Edit.js

@@ -17,15 +17,19 @@ function Edit() {
  const onSubmitHandler = (event) => {
  event.preventDefault();
  var body = "";
- if (passwordForm.current.value === "") {
+ if (passwordForm.current.value === "" && user.admin) {
  body = JSON.stringify({
  "is_admin": isadminForm.current.checked
  })
- } else {
+ } else if (passwordForm.current.value !== "" && user.admin) {
  body = JSON.stringify({
  "password": passwordForm.current.value,
  "is_admin": isadminForm.current.checked
  })
+ } else {
+ body = JSON.stringify({
+ "password": passwordForm.current.value
+ })
  }
 
  fetch(url + "/users/" + username, {
@@ -60,10 +64,12 @@ function Edit() {
  <Form.Label>Password</Form.Label>
  <Form.Control ref={passwordForm} />
  </Form.Group>
- <Form.Group as={Col} controlId="formGridAdmin">
- <Form.Label>Admin</Form.Label>
- <Form.Check ref={isadminForm} type="checkbox" label="Check me" />
- </Form.Group>
+ {user.admin &&
+ <Form.Group as={Col} controlId="formGridAdmin">
+ <Form.Label>Admin</Form.Label>
+ <Form.Check ref={isadminForm} type="checkbox" label="Check me" />
+ </Form.Group>
+ }
  </Row>
  <Button variant="dark" type="submit" className="mb-2">
  Submit

frontend/src/components/pages/Users/User.js

@@ -58,7 +58,7 @@ function User() {
 
  var projectsi = [];
  for (var i = 0; i < data.projects.length; i++) {
-  projectsi.push(data.projects[i].name);
+ projectsi.push(data.projects[i].name);
  }
 
  projectsi.push(projectForm.current.value)
@@ -97,10 +97,11 @@ function User() {
  <ListGroup.Item>Id: {data.id}</ListGroup.Item>
  <ListGroup.Item>Username: {data.username}</ListGroup.Item>
  <ListGroup.Item>Projects Count: {data.projects.length}</ListGroup.Item>
+ <ListGroup.Item>Admin: {data.is_admin ? (<span>✅</span>) : (<span>❌</span>)}</ListGroup.Item>
  </ListGroup>
  </Col>
  </Row>
- <Row>
+ <Row style={{ marginTop: "20px" }}>
  <h1>Projects</h1>
  {user.admin && (
  <Form onSubmit={onSubmitHandler}>
@@ -155,7 +156,7 @@ function User() {
  </tbody>
  </Table>
  </Row>
- </Container>
+ </Container >
  </>
  );
 }