Reformat files and run lint
Co-authored-by: Ezequiel Bellver <ebellver@itba.edu.ar> Co-authored-by: Juan Barmasch <jbarmasch@itba.edu.ar>
This commit is contained in:
parent
afa3dd8ed8
commit
2c0c5b49bf
|
|
@ -80,7 +80,7 @@ sh run.sh -a
|
|||
Por último, debe levantar el frontend (usará el puerto 3000) mediante:
|
||||
|
||||
```
|
||||
h run.sh -f
|
||||
sh run.sh -f
|
||||
```
|
||||
|
||||
## Documentación de la API
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import json
|
|||
from fastapi import APIRouter, Depends
|
||||
from fastapi.responses import JSONResponse
|
||||
|
||||
from bsition.api.models.document import Document, DocumentUpdate, Access
|
||||
from bsition.api.models.document import Access, Document, DocumentUpdate
|
||||
from bsition.api.utils.security import get_current_user
|
||||
from bsition.backend.elastic import search as elastic
|
||||
from bsition.backend.mongo import documents as mongo
|
||||
|
|
@ -14,13 +14,17 @@ router = APIRouter()
|
|||
|
||||
@router.post("")
|
||||
def create(aux: Document, user: tuple = Depends(get_current_user)):
|
||||
doc_id = mongo.create_document({
|
||||
"name": aux.name,
|
||||
"owner": user[0],
|
||||
"data": aux.data if aux.data is not None else ""
|
||||
})
|
||||
doc_id = mongo.create_document(
|
||||
{
|
||||
"name": aux.name,
|
||||
"owner": user[0],
|
||||
"data": aux.data if aux.data is not None else "",
|
||||
}
|
||||
)
|
||||
postgres.give_access_doc(user[0], doc_id, 1)
|
||||
return JSONResponse(content={"detail": "Document created", "id": doc_id}, status_code=201)
|
||||
return JSONResponse(
|
||||
content={"detail": "Document created", "id": doc_id}, status_code=201
|
||||
)
|
||||
|
||||
|
||||
@router.get("")
|
||||
|
|
@ -63,7 +67,9 @@ def give_access(id: str, access_type: Access, user: tuple = Depends(get_current_
|
|||
|
||||
|
||||
@router.put("/{id}/access")
|
||||
def update_access(id: str, access_type: Access, user: tuple = Depends(get_current_user)):
|
||||
def update_access(
|
||||
id: str, access_type: Access, user: tuple = Depends(get_current_user)
|
||||
):
|
||||
postgres.give_access_doc(user[0], id, access_type.access_type)
|
||||
return JSONResponse(content={"detail": "Access updated"}, status_code=202)
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ from bsition.api.models.document import Access
|
|||
from bsition.api.models.table import Filter, Sort, Table
|
||||
from bsition.api.utils.security import get_current_user
|
||||
from bsition.backend.mongo import tables as mongo
|
||||
from bsition.backend.postgres import tables as postgres_t
|
||||
from bsition.backend.postgres import relations as postgres_r
|
||||
from bsition.backend.postgres import tables as postgres_t
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
|
@ -74,7 +74,9 @@ def give_access(id: str, access_type: Access, user: tuple = Depends(get_current_
|
|||
|
||||
|
||||
@router.put("/{id}/access")
|
||||
def update_access(id: str, access_type: Access, user: tuple = Depends(get_current_user)):
|
||||
def update_access(
|
||||
id: str, access_type: Access, user: tuple = Depends(get_current_user)
|
||||
):
|
||||
postgres_r.give_access_table(user[0], id, access_type.access_type)
|
||||
return JSONResponse(content={"detail": "Access updated"}, status_code=202)
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ from bsition.api.utils.jwt import write_token
|
|||
from bsition.api.utils.password import verify_password
|
||||
from bsition.api.utils.security import get_current_user, oauth2_scheme
|
||||
from bsition.backend.postgres.users import get_user_by_username
|
||||
from bsition.backend.redis.tokens import add_token, remove_token, clean_tokens
|
||||
from bsition.backend.redis.tokens import add_token, clean_tokens, remove_token
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
|
@ -34,6 +34,8 @@ def login(form: OAuth2PasswordRequestForm = Depends()):
|
|||
|
||||
|
||||
@router.delete("/token")
|
||||
def logout(token: str = Depends(oauth2_scheme), user: tuple = Depends(get_current_user)):
|
||||
def logout(
|
||||
token: str = Depends(oauth2_scheme), user: tuple = Depends(get_current_user)
|
||||
):
|
||||
remove_token(user[1], token)
|
||||
return JSONResponse(content={"detail": "Token deleted."}, status_code=202)
|
||||
|
|
|
|||
|
|
@ -15,9 +15,7 @@ def search(index, query, user_id):
|
|||
"must": [
|
||||
{"query_string": {"query": query, "default_field": "data"}},
|
||||
],
|
||||
"filter": [
|
||||
{"terms": {"_id": acc_doc}}
|
||||
]
|
||||
"filter": [{"terms": {"_id": acc_doc}}],
|
||||
}
|
||||
},
|
||||
highlight={"fields": {"data": {}}},
|
||||
|
|
@ -29,11 +27,11 @@ def search(index, query, user_id):
|
|||
# str(hit["highlight"]) + " ---- " + "%(name)s: %(data)s" % hit["_source"]
|
||||
# str(hit["highlight"]) + " ---- " + "%(name)s: %(data)s" % hit["_source"]
|
||||
{
|
||||
"id": hit['_id'],
|
||||
"name": hit['_source']["name"],
|
||||
"highlight": str(hit["highlight"]["data"])
|
||||
"id": hit["_id"],
|
||||
"name": hit["_source"]["name"],
|
||||
"highlight": str(hit["highlight"]["data"]),
|
||||
}
|
||||
)
|
||||
print(hit['_id'], hit['_source'])
|
||||
print(hit["_id"], hit["_source"])
|
||||
|
||||
return hits
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
from bson import ObjectId
|
||||
|
||||
from bsition.backend.elastic import utils as elastic
|
||||
from bsition.backend.postgres import relations as postgres
|
||||
from bsition.backend.mongo.utils import get_database
|
||||
from bsition.backend.postgres import relations as postgres
|
||||
|
||||
|
||||
def get_documents(user_id):
|
||||
|
|
@ -22,7 +22,7 @@ def get_documents(user_id):
|
|||
"access": 1,
|
||||
"owner": 1,
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
return list(docs_coll.aggregate(pipeline))
|
||||
|
||||
|
|
|
|||
|
|
@ -118,9 +118,7 @@ def is_public(doc_id):
|
|||
conn = get_connection()
|
||||
cur = conn.cursor()
|
||||
cur.execute(
|
||||
sql.SQL(
|
||||
"SELECT doc_id FROM public_docs WHERE doc_id = {doc_id}"
|
||||
).format(
|
||||
sql.SQL("SELECT doc_id FROM public_docs WHERE doc_id = {doc_id}").format(
|
||||
doc_id=sql.Literal(doc_id),
|
||||
)
|
||||
)
|
||||
|
|
@ -137,7 +135,7 @@ def make_public(doc_id):
|
|||
doc_id=sql.Literal(doc_id),
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
|
||||
def make_private(doc_id):
|
||||
conn = get_connection()
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@ def remove_token(username, token):
|
|||
client.zrem(username, token)
|
||||
|
||||
|
||||
# Puede correr en un cron o, por ejemplo, cada vez que el usuario hace login (o logout)
|
||||
|
||||
def clean_tokens(username):
|
||||
client = get_client()
|
||||
client.zremrangebyscore(username, -inf, int(time.time()))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"lint": "next lint",
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
|
|
@ -19,6 +20,8 @@
|
|||
"@types/node": "^17.0.21",
|
||||
"@types/react": "^17.0.39",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"eslint": "8.30.0",
|
||||
"eslint-config-next": "13.0.7",
|
||||
"postcss": "^8.4.7",
|
||||
"postcss-import": "^14.0.2",
|
||||
"tailwindcss": "^3.0.23",
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React from "react";
|
||||
import Sidebar from "./Sidebar";
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
return (
|
||||
<div className="h-screen flex flex-row justify-start">
|
||||
<Sidebar />
|
||||
<div
|
||||
className="bg-primary flex-1 p-4 text-white justify-center align-center h-full">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const Layout = ({children}) => {
|
||||
return (
|
||||
<div className="h-screen flex flex-row justify-start">
|
||||
<Sidebar/>
|
||||
<div
|
||||
className="bg-primary flex-1 p-4 text-white justify-center align-center h-full">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
|
|
|
|||
|
|
@ -1,122 +1,121 @@
|
|||
import classNames from "classnames";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import {useRouter} from "next/router";
|
||||
import React, {useState, useMemo, useEffect} from "react";
|
||||
import {
|
||||
ArticleIcon,
|
||||
CollapsIcon,
|
||||
LogoIcon,
|
||||
LogoutIcon,
|
||||
SearchIcon,
|
||||
HomeIcon,
|
||||
CreateIcon
|
||||
ArticleIcon,
|
||||
CollapsIcon,
|
||||
LogoIcon,
|
||||
LogoutIcon,
|
||||
SearchIcon,
|
||||
HomeIcon,
|
||||
CreateIcon
|
||||
} from "./icons";
|
||||
|
||||
const Sidebar = () => {
|
||||
const [toggleCollapse, setToggleCollapse] = useState(false);
|
||||
const [isCollapsible, setIsCollapsible] = useState(false);
|
||||
const [menuItems, setMenuItems] = useState([
|
||||
{ id: 1, label: "Home", icon: HomeIcon, link: "/" },
|
||||
{ id: 2, label: "Search", icon: SearchIcon, link: "/search" },
|
||||
{ id: 3, label: "Create document", icon: CreateIcon, link: "/create-document" }
|
||||
]);
|
||||
const [token, setToken] = useState("");
|
||||
const [toggleCollapse, setToggleCollapse] = useState(false);
|
||||
const [isCollapsible, setIsCollapsible] = useState(false);
|
||||
const [menuItems, setMenuItems] = useState([
|
||||
{id: 1, label: "Home", icon: HomeIcon, link: "/"},
|
||||
{id: 2, label: "Search", icon: SearchIcon, link: "/search"},
|
||||
{id: 3, label: "Create document", icon: CreateIcon, link: "/create-document"}
|
||||
]);
|
||||
const [token, setToken] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setToken(() => localStorage.getItem("token"))
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
setToken(() => localStorage.getItem("token"))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
const fetchData = async () => {
|
||||
const res = await fetch("http://localhost:8000/api/documents", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
let json = await res.json();
|
||||
let list = [
|
||||
{ id: 1, label: "Home", icon: HomeIcon, link: "/" },
|
||||
{ id: 2, label: "Search", icon: SearchIcon, link: "/search" },
|
||||
{ id: 3, label: "Create document", icon: CreateIcon, link: "/create-document" }
|
||||
]
|
||||
json.forEach((doc) => {
|
||||
list.push({
|
||||
id: doc["id"],
|
||||
label: doc["name"],
|
||||
icon: ArticleIcon,
|
||||
link: `/documents/${doc["id"]}`
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
const fetchData = async () => {
|
||||
const res = await fetch("http://localhost:8000/api/documents", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
let json = await res.json();
|
||||
let list = [
|
||||
{id: 1, label: "Home", icon: HomeIcon, link: "/"},
|
||||
{id: 2, label: "Search", icon: SearchIcon, link: "/search"},
|
||||
{id: 3, label: "Create document", icon: CreateIcon, link: "/create-document"}
|
||||
]
|
||||
json.forEach((doc) => {
|
||||
list.push({
|
||||
id: doc["id"],
|
||||
label: doc["name"],
|
||||
icon: ArticleIcon,
|
||||
link: `/documents/${doc["id"]}`
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
setMenuItems(() => list)
|
||||
setMenuItems(() => list)
|
||||
}
|
||||
|
||||
fetchData()
|
||||
}
|
||||
}, [token])
|
||||
|
||||
fetchData()
|
||||
}
|
||||
}, [token])
|
||||
const router = useRouter();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
let activeMenu = useMemo(
|
||||
() => menuItems.find((menu) => {
|
||||
if (!router.query.id || router.query.id === 'undefined') {
|
||||
return menu.link === router.pathname
|
||||
} else if (!(menu.id === 1 || menu.id === 2 || menu.id === 3)) {
|
||||
return menu.id.toString() === router.query.id
|
||||
}
|
||||
return false
|
||||
}),
|
||||
[menuItems, router.query.id, router.pathname]
|
||||
);
|
||||
|
||||
const wrapperClasses = classNames(
|
||||
"h-screen px-4 pt-8 pb-4 bg-light flex justify-between flex-col",
|
||||
{
|
||||
["w-80"]: !toggleCollapse,
|
||||
["w-20"]: toggleCollapse,
|
||||
}
|
||||
);
|
||||
|
||||
const collapseIconClasses = classNames(
|
||||
"p-4 rounded bg-light-lighter absolute right-0",
|
||||
{
|
||||
"rotate-180": toggleCollapse,
|
||||
}
|
||||
);
|
||||
|
||||
const getNavItemClasses = (menu) => {
|
||||
if (!activeMenu || !menu || menu === "undefined") {
|
||||
if (!router.query || !router.query.id) {
|
||||
return classNames("flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap");
|
||||
}
|
||||
else {
|
||||
return classNames(
|
||||
"flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap",
|
||||
{
|
||||
["bg-light-lighter"]: router.query.id === menu.id,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
return classNames(
|
||||
"flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap",
|
||||
{
|
||||
["bg-light-lighter"]: activeMenu.id === menu.id,
|
||||
}
|
||||
let activeMenu = useMemo(
|
||||
() => menuItems.find((menu) => {
|
||||
if (!router.query.id || router.query.id === 'undefined') {
|
||||
return menu.link === router.pathname
|
||||
} else if (!(menu.id === 1 || menu.id === 2 || menu.id === 3)) {
|
||||
return menu.id.toString() === router.query.id
|
||||
}
|
||||
return false
|
||||
}),
|
||||
[menuItems, router.query.id, router.pathname]
|
||||
);
|
||||
};
|
||||
|
||||
const onMouseOver = () => {
|
||||
setIsCollapsible(!isCollapsible);
|
||||
};
|
||||
const wrapperClasses = classNames(
|
||||
"h-screen px-4 pt-8 pb-4 bg-light flex justify-between flex-col",
|
||||
{
|
||||
["w-80"]: !toggleCollapse,
|
||||
["w-20"]: toggleCollapse,
|
||||
}
|
||||
);
|
||||
|
||||
const handleSidebarToggle = () => {
|
||||
setToggleCollapse(!toggleCollapse);
|
||||
};
|
||||
const collapseIconClasses = classNames(
|
||||
"p-4 rounded bg-light-lighter absolute right-0",
|
||||
{
|
||||
"rotate-180": toggleCollapse,
|
||||
}
|
||||
);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
const getNavItemClasses = (menu) => {
|
||||
if (!activeMenu || !menu || menu === "undefined") {
|
||||
if (!router.query || !router.query.id) {
|
||||
return classNames("flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap");
|
||||
} else {
|
||||
return classNames(
|
||||
"flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap",
|
||||
{
|
||||
["bg-light-lighter"]: router.query.id === menu.id,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
return classNames(
|
||||
"flex items-center cursor-pointer hover:bg-light-lighter rounded w-full overflow-hidden whitespace-nowrap",
|
||||
{
|
||||
["bg-light-lighter"]: activeMenu.id === menu.id,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const onMouseOver = () => {
|
||||
setIsCollapsible(!isCollapsible);
|
||||
};
|
||||
|
||||
const handleSidebarToggle = () => {
|
||||
setToggleCollapse(!toggleCollapse);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
|
||||
const res = await fetch("http://localhost:8000/api/token", {
|
||||
|
|
@ -130,79 +129,79 @@ const Sidebar = () => {
|
|||
router.push("/")
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onMouseEnter={onMouseOver}
|
||||
onMouseLeave={onMouseOver}
|
||||
style={{ transition: "width 300ms cubic-bezier(0.2, 0, 0, 1) 0s" }}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center justify-between relative">
|
||||
<div className="flex items-center pl-1 gap-4">
|
||||
<LogoIcon />
|
||||
<span
|
||||
className={classNames("mt-2 text-lg font-medium text-text", {
|
||||
hidden: toggleCollapse,
|
||||
})}
|
||||
>
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onMouseEnter={onMouseOver}
|
||||
onMouseLeave={onMouseOver}
|
||||
style={{transition: "width 300ms cubic-bezier(0.2, 0, 0, 1) 0s"}}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center justify-between relative">
|
||||
<div className="flex items-center pl-1 gap-4">
|
||||
<LogoIcon/>
|
||||
<span
|
||||
className={classNames("mt-2 text-lg font-medium text-text", {
|
||||
hidden: toggleCollapse,
|
||||
})}
|
||||
>
|
||||
BSition
|
||||
</span>
|
||||
</div>
|
||||
{isCollapsible && (
|
||||
<button
|
||||
className={collapseIconClasses}
|
||||
onClick={handleSidebarToggle}
|
||||
>
|
||||
<CollapsIcon />
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-start mt-24">
|
||||
{menuItems.map(({ icon: Icon, ...menu }) => {
|
||||
const classes = getNavItemClasses(menu);
|
||||
return (
|
||||
<div className={classes} key={menu.id}>
|
||||
<Link href={menu.link}>
|
||||
<a className="flex py-4 px-3 items-center w-full h-full">
|
||||
<div style={{ width: "2.5rem" }}>
|
||||
<Icon />
|
||||
</div>
|
||||
{!toggleCollapse && (
|
||||
<span
|
||||
className={classNames(
|
||||
"text-md font-medium text-text-light"
|
||||
)}
|
||||
>
|
||||
{menu.label}
|
||||
</span>
|
||||
{isCollapsible && (
|
||||
<button
|
||||
className={collapseIconClasses}
|
||||
onClick={handleSidebarToggle}
|
||||
>
|
||||
<CollapsIcon/>
|
||||
</button>
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${getNavItemClasses({})} px-3 py-4`}>
|
||||
<div style={{ width: "2.5rem" }}>
|
||||
<LogoutIcon />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-start mt-24">
|
||||
{menuItems.map(({icon: Icon, ...menu}) => {
|
||||
const classes = getNavItemClasses(menu);
|
||||
return (
|
||||
<div className={classes} key={menu.id}>
|
||||
<Link href={menu.link}>
|
||||
<a className="flex py-4 px-3 items-center w-full h-full">
|
||||
<div style={{width: "2.5rem"}}>
|
||||
<Icon/>
|
||||
</div>
|
||||
{!toggleCollapse && (
|
||||
<span
|
||||
className={classNames(
|
||||
"text-md font-medium text-text-light"
|
||||
)}
|
||||
>
|
||||
{menu.label}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${getNavItemClasses({})} px-3 py-4`}>
|
||||
<div style={{width: "2.5rem"}}>
|
||||
<LogoutIcon/>
|
||||
</div>
|
||||
{!toggleCollapse && (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<button name="Logout" value="logout">
|
||||
<span className={classNames("text-md font-medium text-text-light")}>
|
||||
Logout
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!toggleCollapse && (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<button name="Logout" value="logout">
|
||||
<span className={classNames("text-md font-medium text-text-light")}>
|
||||
Logout
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
import * as React from "react";
|
||||
|
||||
function ArticleIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill={fill} />
|
||||
</svg>
|
||||
);
|
||||
function ArticleIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill={fill}/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default ArticleIcon;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
import * as React from "react";
|
||||
|
||||
function CollapsIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={16}
|
||||
height={15}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8.901 1.768L7.134 0 0 7.134l7.134 7.133L8.9 12.5 3.535 7.134l5.366-5.367z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M13.384 0L6.25 7.134l7.134 7.133L15.15 12.5 9.785 7.134l5.366-5.367L13.384 0z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function CollapsIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={16}
|
||||
height={15}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8.901 1.768L7.134 0 0 7.134l7.134 7.133L8.9 12.5 3.535 7.134l5.366-5.367z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path
|
||||
d="M13.384 0L6.25 7.134l7.134 7.133L15.15 12.5 9.785 7.134l5.366-5.367L13.384 0z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default CollapsIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function CreateIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function CreateIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function DeleteIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function DeleteIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeleteIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function HomeIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1.001 1.001 0 00.707-1.707l-9-9a1 1 0 00-1.414 0l-9 9A1 1 0 003 13zm7 7v-5h4v5h-4zm2-15.586l6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function HomeIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1.001 1.001 0 00.707-1.707l-9-9a1 1 0 00-1.414 0l-9 9A1 1 0 003 13zm7 7v-5h4v5h-4zm2-15.586l6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function LockIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function LockIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default LockIcon;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import * as React from "react";
|
||||
|
||||
function Logo({ fill = "#3B81F6", ...rest }) {
|
||||
return (
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="40.000000pt" height="40.000000pt" viewBox="0 0 500.000000 500.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
function Logo({fill = "#3B81F6", ...rest}) {
|
||||
return (
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="40.000000pt" height="40.000000pt" viewBox="0 0 500.000000 500.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M3020 4444 c-138 -12 -603 -47 -855 -64 -159 -11 -371 -27 -470 -35
|
||||
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M3020 4444 c-138 -12 -603 -47 -855 -64 -159 -11 -371 -27 -470 -35
|
||||
-99 -8 -283 -21 -410 -30 -500 -33 -538 -40 -595 -98 -71 -71 -65 49 -65
|
||||
-1387 l0 -1295 42 -80 c24 -44 85 -134 136 -200 51 -66 182 -235 291 -375 223
|
||||
-288 253 -315 357 -330 35 -5 96 -7 134 -4 39 2 295 18 570 34 748 45 1638 98
|
||||
|
|
@ -24,7 +24,7 @@ c9 -5 24 -28 32 -51 15 -39 16 -158 14 -1233 -3 -1116 -4 -1192 -21 -1222 -23
|
|||
-820 -50 -853 -50 -900 -5 -17 16 -35 45 -41 65 -6 23 -9 431 -7 1217 3 1181
|
||||
3 1182 24 1210 11 15 32 33 46 40 13 7 108 17 214 23 104 6 374 22 599 35 226
|
||||
14 457 27 515 30 58 3 290 17 515 31 757 46 734 45 777 23z"/>
|
||||
<path d="M1950 3121 l0 -140 88 -3 87 -3 3 -766 c2 -759 2 -766 -18 -792 -23
|
||||
<path d="M1950 3121 l0 -140 88 -3 87 -3 3 -766 c2 -759 2 -766 -18 -792 -23
|
||||
-30 -74 -47 -137 -47 l-43 0 0 -130 0 -130 503 0 c622 0 729 11 901 94 204 99
|
||||
310 264 323 503 15 278 -97 443 -376 550 -22 8 -19 11 42 51 151 98 227 240
|
||||
227 422 -1 270 -146 439 -434 502 -83 18 -139 21 -628 25 l-538 5 0 -141z
|
||||
|
|
@ -33,9 +33,9 @@ m1030 -185 c63 -24 116 -62 142 -105 20 -31 23 -49 23 -141 0 -98 -2 -109 -30
|
|||
252 -22z m-7 -861 c165 -35 250 -124 272 -285 8 -56 -10 -161 -35 -211 -28
|
||||
-54 -102 -114 -173 -140 -56 -20 -85 -23 -289 -27 l-228 -4 0 341 0 341 193 0
|
||||
c128 0 215 -5 260 -15z"/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Logo;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function LogoutIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={16}
|
||||
height={19}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8 19c4.411 0 8-3.589 8-8 0-3.35-2.072-6.22-5-7.41v2.222A6 6 0 0114 11c0 3.31-2.691 6-6 6s-6-2.69-6-6a5.999 5.999 0 013-5.188V3.59C2.072 4.78 0 7.65 0 11c0 4.411 3.589 8 8 8z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path d="M7 0h2v10H7V0z" fill={fill} />
|
||||
</svg>
|
||||
);
|
||||
function LogoutIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={16}
|
||||
height={19}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M8 19c4.411 0 8-3.589 8-8 0-3.35-2.072-6.22-5-7.41v2.222A6 6 0 0114 11c0 3.31-2.691 6-6 6s-6-2.69-6-6a5.999 5.999 0 013-5.188V3.59C2.072 4.78 0 7.65 0 11c0 4.411 3.589 8 8 8z"
|
||||
fill={fill}
|
||||
/>
|
||||
<path d="M7 0h2v10H7V0z" fill={fill}/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default LogoutIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function ManageIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019.528.026.287.445.445.287.026.529L15 13l-.242.471-.026.529-.445.287-.287.445-.529.026L13 15l-.471-.242-.529-.026-.287-.445-.445-.287-.026-.529L11 13l.242-.471.026-.529.445-.287.287-.445.529-.026L13 11l.471.242z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function ManageIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019.528.026.287.445.445.287.026.529L15 13l-.242.471-.026.529-.445.287-.287.445-.529.026L13 15l-.471-.242-.529-.026-.287-.445-.445-.287-.026-.529L11 13l.242-.471.026-.529.445-.287.287-.445.529-.026L13 11l.471.242z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default ManageIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function OptionsIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function OptionsIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default OptionsIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function PublicIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M221.6,173.3A102.9,102.9,0,0,0,232,128,104.2,104.2,0,0,0,154.8,27.5h-.5A103.8,103.8,0,0,0,60.4,49l-1.3,1.2A103.9,103.9,0,0,0,128,232h2.4A104.3,104.3,0,0,0,221,174.6h0ZM216,128a89.3,89.3,0,0,1-5.5,30.7l-46.4-28.5a16,16,0,0,0-6.3-2.3l-22.8-3a16.1,16.1,0,0,0-15.3,6.8h-8.6l-3.8-7.9a16.2,16.2,0,0,0-11-8.7l-6.6-1.4,2.5-5.9a8.1,8.1,0,0,1,7.4-4.9h16.1a16.1,16.1,0,0,0,7.7-2l12.2-6.8a16.1,16.1,0,0,0,3-2.1l26.9-24.4A15.7,15.7,0,0,0,170,50.7,88,88,0,0,1,216,128ZM40,128a87.1,87.1,0,0,1,9.5-39.7l10.4,27.9a16.1,16.1,0,0,0,11.6,10l5.5,1.2h.1l12,2.6a7.8,7.8,0,0,1,5.5,4.3l2.1,4.4a16.1,16.1,0,0,0,14.4,9h1.2l-7.7,17.2a15.9,15.9,0,0,0,2.8,17.4l16.1,17.4a8.3,8.3,0,0,1,2,6.9l-1.8,9.3A88.1,88.1,0,0,1,40,128Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function PublicIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M221.6,173.3A102.9,102.9,0,0,0,232,128,104.2,104.2,0,0,0,154.8,27.5h-.5A103.8,103.8,0,0,0,60.4,49l-1.3,1.2A103.9,103.9,0,0,0,128,232h2.4A104.3,104.3,0,0,0,221,174.6h0ZM216,128a89.3,89.3,0,0,1-5.5,30.7l-46.4-28.5a16,16,0,0,0-6.3-2.3l-22.8-3a16.1,16.1,0,0,0-15.3,6.8h-8.6l-3.8-7.9a16.2,16.2,0,0,0-11-8.7l-6.6-1.4,2.5-5.9a8.1,8.1,0,0,1,7.4-4.9h16.1a16.1,16.1,0,0,0,7.7-2l12.2-6.8a16.1,16.1,0,0,0,3-2.1l26.9-24.4A15.7,15.7,0,0,0,170,50.7,88,88,0,0,1,216,128ZM40,128a87.1,87.1,0,0,1,9.5-39.7l10.4,27.9a16.1,16.1,0,0,0,11.6,10l5.5,1.2h.1l12,2.6a7.8,7.8,0,0,1,5.5,4.3l2.1,4.4a16.1,16.1,0,0,0,14.4,9h1.2l-7.7,17.2a15.9,15.9,0,0,0,2.8,17.4l16.1,17.4a8.3,8.3,0,0,1,2,6.9l-1.8,9.3A88.1,88.1,0,0,1,40,128Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default PublicIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function SearchIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2 -2 22 22"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function SearchIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2 -2 22 22"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchIcon;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
|
||||
function ShareIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function ShareIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="-2.5 -2.5 21.5 21.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShareIcon;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
import * as React from "react";
|
||||
|
||||
function UsersIcon({ stroke = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M12 4.354a4 4 0 110 5.292V4.354zM15 21H3v-1a6 6 0 1112 0v1zm0 0h6v-1a6 6 0 00-9-5.197L15 21zM13 7a4 4 0 11-8 0 4 4 0 018 0v0z"
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function UsersIcon({stroke = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
d="M12 4.354a4 4 0 110 5.292V4.354zM15 21H3v-1a6 6 0 1112 0v1zm0 0h6v-1a6 6 0 00-9-5.197L15 21zM13 7a4 4 0 11-8 0 4 4 0 018 0v0z"
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default UsersIcon;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
import * as React from "react";
|
||||
|
||||
function VideosIcon({ fill = "#6C7281", ...rest }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path d="M4 8H2v12a2 2 0 002 2h12v-2H4V8z" fill={fill} />
|
||||
<path
|
||||
d="M20 2H8a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zm-9 12V6l7 4-7 4z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function VideosIcon({fill = "#6C7281", ...rest}) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<path d="M4 8H2v12a2 2 0 002 2h12v-2H4V8z" fill={fill}/>
|
||||
<path
|
||||
d="M20 2H8a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zm-9 12V6l7 4-7 4z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideosIcon;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
export { default as ArticleIcon } from "./ArticleIcon";
|
||||
export { default as HomeIcon } from "./HomeIcon";
|
||||
export { default as UsersIcon } from "./UsersIcon";
|
||||
export { default as VideosIcon } from "./VideosIcon";
|
||||
export { default as CollapsIcon } from "./CollapsIcon";
|
||||
export { default as LogoIcon } from "./Logo";
|
||||
export { default as LogoutIcon } from "./LogoutIcon";
|
||||
export { default as SearchIcon } from "./SearchIcon";
|
||||
export { default as ShareIcon } from "./ShareIcon";
|
||||
export { default as LockIcon } from "./LockIcon";
|
||||
export { default as PublicIcon } from "./PublicIcon";
|
||||
export { default as DeleteIcon } from "./DeleteIcon";
|
||||
export { default as OptionsIcon } from "./OptionsIcon";
|
||||
export { default as ManageIcon } from "./ManageIcon";
|
||||
export { default as CreateIcon } from "./CreateIcon";
|
||||
export {default as ArticleIcon} from "./ArticleIcon";
|
||||
export {default as HomeIcon} from "./HomeIcon";
|
||||
export {default as UsersIcon} from "./UsersIcon";
|
||||
export {default as VideosIcon} from "./VideosIcon";
|
||||
export {default as CollapsIcon} from "./CollapsIcon";
|
||||
export {default as LogoIcon} from "./Logo";
|
||||
export {default as LogoutIcon} from "./LogoutIcon";
|
||||
export {default as SearchIcon} from "./SearchIcon";
|
||||
export {default as ShareIcon} from "./ShareIcon";
|
||||
export {default as LockIcon} from "./LockIcon";
|
||||
export {default as PublicIcon} from "./PublicIcon";
|
||||
export {default as DeleteIcon} from "./DeleteIcon";
|
||||
export {default as OptionsIcon} from "./OptionsIcon";
|
||||
export {default as ManageIcon} from "./ManageIcon";
|
||||
export {default as CreateIcon} from "./CreateIcon";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
import { Server } from "socket.io";
|
||||
import {Server} from "socket.io";
|
||||
import messageHandler from "../../utils/sockets/messageHandler";
|
||||
|
||||
export default function SocketHandler(req, res) {
|
||||
if (res.socket.server.io) {
|
||||
if (res.socket.server.io) {
|
||||
res.end();
|
||||
return;
|
||||
}
|
||||
|
||||
const io = new Server(res.socket.server);
|
||||
res.socket.server.io = io;
|
||||
|
||||
const onConnection = (socket) => {
|
||||
messageHandler(io, socket);
|
||||
};
|
||||
|
||||
io.on("connection", onConnection);
|
||||
|
||||
res.end();
|
||||
return;
|
||||
}
|
||||
|
||||
const io = new Server(res.socket.server);
|
||||
res.socket.server.io = io;
|
||||
|
||||
const onConnection = (socket) => {
|
||||
messageHandler(io, socket);
|
||||
};
|
||||
|
||||
io.on("connection", onConnection);
|
||||
|
||||
res.end();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,15 +39,19 @@ export default function CreateDocument() {
|
|||
return (
|
||||
<Layout>
|
||||
<div className="flex items-center justify-center w-full h-full">
|
||||
<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}>
|
||||
<div>
|
||||
<input type="text" id="name" name="name" required placeholder="name"
|
||||
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}
|
||||
className="flex items-center justify-center align-center w-full h-full login-form"
|
||||
style={{flexDirection: "column"}}>
|
||||
<div>
|
||||
<input type="text" id="name" name="name" required placeholder="name"
|
||||
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="rounded bg-pink-600 rounded" style={{border: "1px solid grey", padding: "4px"}}>Create</button>
|
||||
</form>
|
||||
</div>
|
||||
<button type="submit" className="rounded bg-pink-600 rounded"
|
||||
style={{border: "1px solid grey", padding: "4px"}}>Create
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import io from "socket.io-client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import {useState, useEffect} from "react";
|
||||
import {useRouter} from "next/router";
|
||||
import Layout from "../../components/Layout";
|
||||
import {
|
||||
OptionsIcon,
|
||||
|
|
@ -15,120 +15,132 @@ import Link from "next/link";
|
|||
let socket;
|
||||
|
||||
export default function Document() {
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const [text, setText] = useState("");
|
||||
const [token, setToken] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [text, setText] = useState("");
|
||||
const [token, setToken] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
socketInitializer();
|
||||
}, [router.query.id]);
|
||||
useEffect(() => {
|
||||
socketInitializer();
|
||||
}, [router.query.id]);
|
||||
|
||||
useEffect(() => {
|
||||
setToken(() => localStorage.getItem("token"))
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
setToken(() => localStorage.getItem("token"))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (token && router.query.id) {
|
||||
const fetchData = async () => {
|
||||
const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
const json = await res.json();
|
||||
setText(() => json["data"])
|
||||
setTitle(() => json["name"])
|
||||
useEffect(() => {
|
||||
if (token && router.query.id) {
|
||||
const fetchData = async () => {
|
||||
const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
const json = await res.json();
|
||||
setText(() => json["data"])
|
||||
setTitle(() => json["name"])
|
||||
}
|
||||
|
||||
fetchData()
|
||||
}
|
||||
}, [token, router.query.id])
|
||||
|
||||
fetchData()
|
||||
}
|
||||
}, [token, router.query.id])
|
||||
useEffect(() => {
|
||||
if (token && router.query.id) {
|
||||
const interval = setInterval(() => {
|
||||
fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
|
||||
method: 'PUT',
|
||||
body: `{"data": "${text}"}`,
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
}, 500);
|
||||
|
||||
useEffect(() => {
|
||||
if (token && router.query.id) {
|
||||
const interval = setInterval(() => {
|
||||
fetch(`http://localhost:8000/api/documents/${router.query.id}`, {
|
||||
method: 'PUT',
|
||||
body: `{"data": "${text}"}`,
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
}, 500);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [token, text, router.query.id])
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [token, text, router.query.id])
|
||||
const socketInitializer = async () => {
|
||||
await fetch("/api/socket");
|
||||
|
||||
const socketInitializer = async () => {
|
||||
await fetch("/api/socket");
|
||||
socket = io();
|
||||
|
||||
socket = io();
|
||||
socket.emit('create', router.query.id);
|
||||
|
||||
socket.emit('create', router.query.id);
|
||||
socket.on("newIncomingText", (text) => {
|
||||
setText(() => text);
|
||||
console.log('text' + text);
|
||||
});
|
||||
};
|
||||
|
||||
socket.on("newIncomingText", (text) => {
|
||||
const sendText = async () => {
|
||||
socket.emit("createdText", text, router.query.id);
|
||||
setText(() => text);
|
||||
console.log('text' + text);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const sendText = async () => {
|
||||
socket.emit("createdText", text, router.query.id);
|
||||
setText(() => text);
|
||||
};
|
||||
const handleKey = () => {
|
||||
if (text) {
|
||||
sendText();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKey = () => {
|
||||
if (text) {
|
||||
sendText();
|
||||
}
|
||||
};
|
||||
let access = router.query.id + "/access"
|
||||
|
||||
let access = router.query.id + "/access"
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div style={{height: "50px", justifyContent: "space-between"}}
|
||||
className="align-center flex">
|
||||
return (
|
||||
<Layout>
|
||||
<div style={{height: "50px", justifyContent: "space-between"}}
|
||||
className="align-center flex">
|
||||
<span className="docTitle">
|
||||
{title}
|
||||
</span>
|
||||
<div className="dropdown">
|
||||
<OptionsIcon onClick={(e) => {
|
||||
document.getElementById("myDropdown").classList.toggle("show");
|
||||
<div className="dropdown">
|
||||
<OptionsIcon onClick={(e) => {
|
||||
document.getElementById("myDropdown").classList.toggle("show");
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.dropbtn')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||
var i;
|
||||
for (i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('show')) {
|
||||
openDropdown.classList.remove('show');
|
||||
window.onclick = function (event) {
|
||||
if (!event.target.matches('.dropbtn')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||
var i;
|
||||
for (i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('show')) {
|
||||
openDropdown.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}}}} className="dropbtn"></OptionsIcon>
|
||||
<div id="myDropdown" className="dropdown-content">
|
||||
<Link href={access}>
|
||||
<div className="flex flex-row items-center justify-start align-center menu-opt"><ManageIcon/><span>Manage access</span></div>
|
||||
</Link>
|
||||
<a href="#"><div className="flex flex-row items-center justify-start align-center menu-opt"><ShareIcon/><span>Share</span></div></a>
|
||||
<a href="#"><div className="flex flex-row items-center justify-start align-center menu-opt"><LockIcon/><span>Public/private</span></div></a>
|
||||
<a href="#"><div className="flex flex-row items-center justify-start align-center menu-opt"><DeleteIcon/><span>Delete document</span></div></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
className="document_area"
|
||||
placeholder="Type..."
|
||||
onKeyUp={handleKey}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}} className="dropbtn"></OptionsIcon>
|
||||
<div id="myDropdown" className="dropdown-content">
|
||||
<Link href={access}>
|
||||
<div className="flex flex-row items-center justify-start align-center menu-opt">
|
||||
<ManageIcon/><span>Manage access</span></div>
|
||||
</Link>
|
||||
<a href="#">
|
||||
<div className="flex flex-row items-center justify-start align-center menu-opt"><ShareIcon/><span>Share</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div className="flex flex-row items-center justify-start align-center menu-opt">
|
||||
<LockIcon/><span>Public/private</span></div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div className="flex flex-row items-center justify-start align-center menu-opt">
|
||||
<DeleteIcon/><span>Delete document</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
className="document_area"
|
||||
placeholder="Type..."
|
||||
onKeyUp={handleKey}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import React, {useState, useEffect} from "react";
|
||||
import {useRouter} from "next/router";
|
||||
import Layout from "../../../components/Layout";
|
||||
import {
|
||||
OptionsIcon,
|
||||
|
|
@ -13,40 +13,40 @@ import Link from "next/link";
|
|||
import classNames from "classnames";
|
||||
|
||||
export default function Document() {
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
|
||||
const [token, setToken] = useState("");
|
||||
const [users, setUsers] = useState([]);
|
||||
const [token, setToken] = useState("");
|
||||
const [users, setUsers] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setToken(() => localStorage.getItem("token"))
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
setToken(() => localStorage.getItem("token"))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (token && router.query.id) {
|
||||
const fetchData = async () => {
|
||||
const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
const json = await res.json();
|
||||
console.log(json)
|
||||
let list = []
|
||||
json.forEach((user) => {
|
||||
list.push({
|
||||
id: user[0],
|
||||
username: user[1],
|
||||
access: user[2]
|
||||
useEffect(() => {
|
||||
if (token && router.query.id) {
|
||||
const fetchData = async () => {
|
||||
const res = await fetch(`http://localhost:8000/api/documents/${router.query.id}/access`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
})
|
||||
setUsers(() => list)
|
||||
}
|
||||
const json = await res.json();
|
||||
console.log(json)
|
||||
let list = []
|
||||
json.forEach((user) => {
|
||||
list.push({
|
||||
id: user[0],
|
||||
username: user[1],
|
||||
access: user[2]
|
||||
})
|
||||
})
|
||||
setUsers(() => list)
|
||||
}
|
||||
|
||||
fetchData()
|
||||
}
|
||||
}, [token, router.query.id])
|
||||
fetchData()
|
||||
}
|
||||
}, [token, router.query.id])
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
|
|
@ -69,45 +69,47 @@ export default function Document() {
|
|||
}
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div style={{height: "50px", justifyContent: "space-between"}}
|
||||
className="align-center flex">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Access</th>
|
||||
</tr>
|
||||
{users.map(({ icon: Icon, ...user }) => {
|
||||
return (
|
||||
<>
|
||||
<tr style={{color: "black"}}>
|
||||
<td>{user.username}</td>
|
||||
<td>
|
||||
<select style={{padding: "4px"}} value={user.access} onChange={handleSubmit}>
|
||||
<option value={1} label="Full-access"></option>
|
||||
<option value={2} label="Edit"></option>
|
||||
<option value={3} label="Read-only"></option>
|
||||
</select>
|
||||
return (
|
||||
<Layout>
|
||||
<div style={{height: "50px", justifyContent: "space-between"}}
|
||||
className="align-center flex">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Access</th>
|
||||
</tr>
|
||||
{users.map(({icon: Icon, ...user}) => {
|
||||
return (
|
||||
<>
|
||||
<tr style={{color: "black"}}>
|
||||
<td>{user.username}</td>
|
||||
<td>
|
||||
<select style={{padding: "4px"}} value={user.access} onChange={handleSubmit}>
|
||||
<option value={1} label="Full-access"></option>
|
||||
<option value={2} label="Edit"></option>
|
||||
<option value={3} label="Read-only"></option>
|
||||
</select>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<div className="flex items-center justify-center w-full h-full">
|
||||
{/*<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}>*/}
|
||||
<div>
|
||||
<input type="text" id="name" name="name" required placeholder="name"
|
||||
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-full h-full">
|
||||
{/*<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}>*/}
|
||||
<div>
|
||||
<input type="text" id="name" name="name" required placeholder="name"
|
||||
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="rounded bg-pink-600 rounded" style={{border: "1px solid grey", padding: "4px"}}>Create</button>
|
||||
{/*</form>*/}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</table>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
<button type="submit" className="rounded bg-pink-600 rounded"
|
||||
style={{border: "1px solid grey", padding: "4px"}}>Create
|
||||
</button>
|
||||
{/*</form>*/}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</table>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import {useRouter} from "next/router";
|
|||
import {useEffect, useState} from "react";
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter();
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -19,18 +19,18 @@ export default function Home() {
|
|||
return <></>
|
||||
}
|
||||
|
||||
return <Layout>
|
||||
<div className="flex flex-col justify-center h-full w-full align-center items-center">
|
||||
<div style={{width: "fit-content"}}>
|
||||
<h1 style={{fontSize: "xxx-large"}}>BSition</h1>
|
||||
<h3 style={{margin: "0"}}>Created by:</h3>
|
||||
<h2 style={{margin: "0"}}>Bottler</h2>
|
||||
<ul style={{margin: "0"}}>
|
||||
<li>Barmasch, Juan Martín</li>
|
||||
<li>Bellver, Ezequiel</li>
|
||||
<li>Lo Coco, Santiago</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>;
|
||||
return <Layout>
|
||||
<div className="flex flex-col justify-center h-full w-full align-center items-center">
|
||||
<div style={{width: "fit-content"}}>
|
||||
<h1 style={{fontSize: "xxx-large"}}>BSition</h1>
|
||||
<h3 style={{margin: "0"}}>Created by:</h3>
|
||||
<h2 style={{margin: "0"}}>Bottler</h2>
|
||||
<ul style={{margin: "0"}}>
|
||||
<li>Barmasch, Juan Martín</li>
|
||||
<li>Bellver, Ezequiel</li>
|
||||
<li>Lo Coco, Santiago</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@ export default function Login() {
|
|||
|
||||
return (
|
||||
<div className="flex items-center justify-center w-full h-full" style={{marginTop: "30%"}}>
|
||||
<form onSubmit={handleSubmit} className="flex items-center justify-center align-center w-full h-full login-form" style={{flexDirection: "column"}}>
|
||||
<form onSubmit={handleSubmit}
|
||||
className="flex items-center justify-center align-center w-full h-full login-form"
|
||||
style={{flexDirection: "column"}}>
|
||||
<div>
|
||||
<input type="text" id="username" name="username" required placeholder="username"
|
||||
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
|
||||
|
|
@ -48,7 +50,9 @@ export default function Login() {
|
|||
style={{border: "1px solid grey", color: "black", padding: "2px 4px"}}/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="rounded bg-pink-600 rounded" style={{border: "1px solid grey", padding: "4px"}}>Log in</button>
|
||||
<button type="submit" className="rounded bg-pink-600 rounded"
|
||||
style={{border: "1px solid grey", padding: "4px"}}>Log in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,116 +1,116 @@
|
|||
.container {
|
||||
padding: 0 2rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,99 +5,103 @@
|
|||
/* Your own custom component styles */
|
||||
|
||||
.document_area {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
/*margin: 40px;*/
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
/*margin: 40px;*/
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.docTitle {
|
||||
color: black;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.dropbtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
padding: 3px;
|
||||
border: none;
|
||||
stroke: #404040;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
padding: 3px;
|
||||
border: none;
|
||||
stroke: #404040;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropbtn:hover, .dropbtn:focus {
|
||||
border-radius: 100%;
|
||||
background-color: #419de8;
|
||||
border-radius: 100%;
|
||||
background-color: #419de8;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: right;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 220px;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 220px;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown a:hover {background-color: #ddd;}
|
||||
.dropdown a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.show {display: block;}
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.login-form div {
|
||||
margin: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.menu-opt span {
|
||||
margin-left: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
all: revert;
|
||||
all: revert;
|
||||
}
|
||||
|
||||
h2 {
|
||||
all: revert;
|
||||
all: revert;
|
||||
}
|
||||
|
||||
h3 {
|
||||
all: revert;
|
||||
all: revert;
|
||||
}
|
||||
|
||||
ul {
|
||||
all: revert;
|
||||
all: revert;
|
||||
}
|
||||
|
||||
li {
|
||||
all: revert;
|
||||
all: revert;
|
||||
}
|
||||
|
||||
table {
|
||||
all: revert
|
||||
all: revert
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
export default (io, socket) => {
|
||||
const createdText = (text, room) => {
|
||||
socket.to(room).emit("newIncomingText", text);
|
||||
};
|
||||
const createdText = (text, room) => {
|
||||
socket.to(room).emit("newIncomingText", text);
|
||||
};
|
||||
|
||||
socket.on('create', function(room) {
|
||||
socket.join(room);
|
||||
});
|
||||
socket.on('create', function (room) {
|
||||
socket.join(room);
|
||||
});
|
||||
|
||||
socket.on("createdText", createdText);
|
||||
socket.on("createdText", createdText);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
const defaultTheme = require('tailwindcss/defaultConfig');
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./src/components/**/*.{ts,tsx,js,jsx}',
|
||||
'./src/pages/**/*.{ts,tsx,js,jsx}',
|
||||
'./src/pages/login.tsx'
|
||||
],
|
||||
theme: {
|
||||
...defaultTheme,
|
||||
colors: {
|
||||
...defaultTheme.colors,
|
||||
primary: "#71aaff",
|
||||
white: '#ffffff',
|
||||
text: {
|
||||
DEFAULT: "#1F2937",
|
||||
light: "#6C7281",
|
||||
},
|
||||
light: {
|
||||
DEFAULT: "#FAFBFC",
|
||||
lighter: "#F3F4F6",
|
||||
},
|
||||
content: [
|
||||
'./src/components/**/*.{ts,tsx,js,jsx}',
|
||||
'./src/pages/**/*.{ts,tsx,js,jsx}',
|
||||
'./src/pages/login.tsx'
|
||||
],
|
||||
theme: {
|
||||
...defaultTheme,
|
||||
colors: {
|
||||
...defaultTheme.colors,
|
||||
primary: "#71aaff",
|
||||
white: '#ffffff',
|
||||
text: {
|
||||
DEFAULT: "#1F2937",
|
||||
light: "#6C7281",
|
||||
},
|
||||
light: {
|
||||
DEFAULT: "#FAFBFC",
|
||||
lighter: "#F3F4F6",
|
||||
},
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue