diff --git a/backend/index.js b/backend/index.js index 236cafc..17b9687 100644 --- a/backend/index.js +++ b/backend/index.js @@ -28,11 +28,13 @@ const sequelize = new Sequelize({ const indexRoute = require('./routes/index'); app.use('/', indexRoute); -// "auth" -const signUpRoute = require('./routes/auth/signup')(sequelize); -const signInRoute = require('./routes/auth/signin')(sequelize); -app.use('/auth', signUpRoute); -app.use('/auth', signInRoute); +// "users" +const usersIndexRoute = require('./routes/users/index')(sequelize); +const signUpRoute = require('./routes/users/signup')(sequelize); +const signInRoute = require('./routes/users/signin')(sequelize); +app.use('/users', usersIndexRoute); +app.use('/users', signUpRoute); +app.use('/users', signInRoute); // "/projects" const projectsIndexRoute = require('./routes/projects/index')(sequelize); diff --git a/backend/middleware/auth.js b/backend/middleware/auth.js index 8c48215..48271eb 100644 --- a/backend/middleware/auth.js +++ b/backend/middleware/auth.js @@ -1,6 +1,7 @@ const jwt = require('jsonwebtoken'); -const { defaultDangerKey } = require('../routes/auth/authSettings'); +const { roles, defaultDangerKey } = require('../routes/users/authSettings'); const defineProject = require('../models/projects'); +const defineUser = require('../models/users'); const { DataTypes } = require('sequelize'); function authMiddleware(sequelize) { @@ -27,6 +28,26 @@ function authMiddleware(sequelize) { } } + /** + * Verify user is admin + * (have to be called after verifySignedIn() middleware) + */ + async function verifyAdmin(req, res, next) { + const User = defineUser(sequelize, DataTypes); + const user = await User.findByPk(req.userId); + if (!user) { + return res.status(404).send('User not found'); + } + + // if project is private, only project owner can access + const adminRoleIndex = roles.findIndex((entry) => entry.uid === 'administrator'); + if (user.role !== adminRoleIndex) { + return res.status(403).json({ error: 'Forbidden' }); + } + + next(); + } + /** * Verify user can access project * (have to be called after verifySignedIn() middleware) @@ -76,7 +97,7 @@ function authMiddleware(sequelize) { next(); } - return { verifySignedIn, verifyProjectVisible, verifyProjectOwner }; + return { verifySignedIn, verifyAdmin, verifyProjectVisible, verifyProjectOwner }; } module.exports = authMiddleware; diff --git a/backend/routes/auth/authSettings.js b/backend/routes/users/authSettings.js similarity index 57% rename from backend/routes/auth/authSettings.js rename to backend/routes/users/authSettings.js index ab36cd7..15c49d4 100644 --- a/backend/routes/auth/authSettings.js +++ b/backend/routes/users/authSettings.js @@ -1,4 +1,4 @@ -const roles = [{ uid: 'admin' }, { uid: 'moderator' }, { uid: 'user' }]; +const roles = [{ uid: 'administrator' }, { uid: 'user' }]; const defaultDangerKey = 'test-plat-default-key'; module.exports = { roles, defaultDangerKey }; diff --git a/backend/routes/users/index.js b/backend/routes/users/index.js new file mode 100644 index 0000000..75d5c92 --- /dev/null +++ b/backend/routes/users/index.js @@ -0,0 +1,21 @@ +const express = require('express'); +const router = express.Router(); +const defineUser = require('../../models/users'); +const { DataTypes } = require('sequelize'); + +module.exports = function (sequelize) { + const { verifySignedIn, verifyAdmin } = require('../../middleware/auth')(sequelize); + const User = defineUser(sequelize, DataTypes); + + router.get('/', verifySignedIn, verifyAdmin, async (req, res) => { + try { + const users = await User.findAll(); + res.json(users); + } catch (error) { + console.error(error); + res.status(500).send('Internal Server Error'); + } + }); + + return router; +}; diff --git a/backend/routes/auth/signin.js b/backend/routes/users/signin.js similarity index 100% rename from backend/routes/auth/signin.js rename to backend/routes/users/signin.js diff --git a/backend/routes/auth/signup.js b/backend/routes/users/signup.js similarity index 95% rename from backend/routes/auth/signup.js rename to backend/routes/users/signup.js index a7260d9..ee7ed6e 100644 --- a/backend/routes/auth/signup.js +++ b/backend/routes/users/signup.js @@ -19,7 +19,7 @@ module.exports = function (sequelize) { const initialRole = userCount > 0 ? roles.findIndex((entry) => entry.uid === 'user') - : roles.findIndex((entry) => entry.uid === 'admin'); + : roles.findIndex((entry) => entry.uid === 'administrator'); const user = await User.create({ email, diff --git a/backend/seeders/seed.js b/backend/seeders/seed.js index 9847795..3665928 100644 --- a/backend/seeders/seed.js +++ b/backend/seeders/seed.js @@ -12,7 +12,7 @@ module.exports = { email: 'admin@testplat.com', password: hashedPassword, username: 'Admin', - role: 1, + role: 0, avatarPath: null, createdAt: new Date(), updatedAt: new Date(), diff --git a/frontend/config/selection.ts b/frontend/config/selection.ts index 0cac983..315f752 100644 --- a/frontend/config/selection.ts +++ b/frontend/config/selection.ts @@ -1,4 +1,4 @@ -const roles = [{ uid: 'admin' }, { uid: 'moderator' }, { uid: 'user' }]; +const roles = [{ uid: 'administrator' }, { uid: 'user' }]; const categoricalPalette = ['#fba91e', '#6ea56c', '#3ac6e1', '#feda2f', '#f15f47', '#244470', '#9c80bb', '#f595a6']; diff --git a/frontend/messages/en.json b/frontend/messages/en.json index 4476fc7..f368e4c 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -23,6 +23,7 @@ "description": "Integrate and manage all your software testing", "docs": "Docs", "projects": "Projects", + "admin": "Administration", "account": "Account", "signup": "Sign up", "signin": "Sign in", @@ -50,6 +51,17 @@ "signin_error": "Sign in failed", "your_projects": "Your Projects" }, + "Admin": { + "user_management": "User Management", + "avatar": "Avatar", + "id": "ID", + "email": "Email", + "username": "User name", + "role": "Role", + "administrator": "Administrator", + "user": "User", + "no_users_found": "No users found" + }, "Projects": { "projectList": "Project List", "project": "Project", diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json index 2d580a7..5c4e63e 100644 --- a/frontend/messages/ja.json +++ b/frontend/messages/ja.json @@ -23,6 +23,7 @@ "description": "ソフトウェア開発にかかわるすべてのテストを統合管理", "docs": "ドキュメント", "projects": "プロジェクト", + "admin": "管理", "account": "アカウント", "signup": "新規登録", "signin": "サインイン", @@ -49,6 +50,17 @@ "signin_error": "サインインに失敗しました", "your_projects": "保有プロジェクト" }, + "Admin": { + "user_management": "ユーザー管理", + "avatar": "アバター", + "id": "ID", + "email": "メールアドレス", + "username": "ユーザー名", + "role": "ロール", + "administrator": "管理者", + "user": "ユーザー", + "no_users_found": "ユーザーがいません" + }, "Projects": { "projectList": "プロジェクト一覧", "project": "プロジェクト", diff --git a/frontend/src/app/[locale]/Header.tsx b/frontend/src/app/[locale]/Header.tsx index 2e364f2..477710a 100644 --- a/frontend/src/app/[locale]/Header.tsx +++ b/frontend/src/app/[locale]/Header.tsx @@ -6,6 +6,7 @@ export default function Header(params: { locale: string }) { const messages = { docs: t('docs'), projects: t('projects'), + admin: t('admin'), account: t('account'), signUp: t('signup'), signIn: t('signin'), diff --git a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx index 2e2dcfc..efaca0d 100644 --- a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx +++ b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx @@ -1,5 +1,6 @@ 'use client'; -import { useState } from 'react'; +import { useState, useContext } from 'react'; +import { TokenContext } from './TokenProvider'; import { Link } from '@/src/navigation'; import Image from 'next/image'; import { @@ -21,6 +22,7 @@ import DropdownLanguage from './DropdownLanguage'; type NabbarMenuMessages = { projects: string; + admin: string; docs: string; account: string; signUp: string; @@ -35,6 +37,7 @@ type Props = { export default function HeaderNavbarMenu({ messages, locale }: Props) { const [isMenuOpen, setIsMenuOpen] = useState(false); + const context = useContext(TokenContext); const commonLinks = [ { @@ -92,6 +95,17 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) { ) )} + {context.isAdmin() && ( + + + {messages.admin} + + + )} diff --git a/frontend/src/app/[locale]/TokenProvider.tsx b/frontend/src/app/[locale]/TokenProvider.tsx index ce51f02..031f7a8 100644 --- a/frontend/src/app/[locale]/TokenProvider.tsx +++ b/frontend/src/app/[locale]/TokenProvider.tsx @@ -3,6 +3,7 @@ import { createContext, useState, useEffect } from 'react'; import { TokenContextType, TokenType } from '@/types/user'; import { TokenProps } from '@/types/user'; import { useRouter, usePathname } from '@/src/navigation'; +import { roles } from '@/config/selection'; const LOCAL_STORAGE_KEY = 'testplat-auth-token'; function storeTokenToLocalStorage(token: TokenType) { @@ -19,6 +20,7 @@ const defaultContext = { user: null, }, isSignedIn: () => false, + isAdmin: () => false, setToken: (token: TokenType) => {}, storeTokenToLocalStorage, removeTokenFromLocalStorage, @@ -50,9 +52,26 @@ const TokenProvider = ({ locale, children }: TokenProps) => { return false; }; + const isAdmin = () => { + // check token + if (token && token.user && token.user.username) { + // check expire date + if (Date.now() < token.expires_at) { + // check role + const adminRoleIndex = roles.findIndex((entry) => entry.uid === 'administrator'); + if (token.user.role === adminRoleIndex) { + return true; + } + } + } + + return false; + }; + const tokenContext = { token, isSignedIn, + isAdmin, setToken, storeTokenToLocalStorage, removeTokenFromLocalStorage, diff --git a/frontend/src/app/[locale]/account/authControl.ts b/frontend/src/app/[locale]/account/authControl.ts index 2742cd8..2e98572 100644 --- a/frontend/src/app/[locale]/account/authControl.ts +++ b/frontend/src/app/[locale]/account/authControl.ts @@ -12,7 +12,7 @@ async function signUp(newUser: UserType) { body: JSON.stringify(newUser), }; - const url = `${apiServer}/auth/signup`; + const url = `${apiServer}/users/signup`; try { const response = await fetch(url, fetchOptions); @@ -36,7 +36,7 @@ async function signIn(signInUser: UserType) { body: JSON.stringify(signInUser), }; - const url = `${apiServer}/auth/signin`; + const url = `${apiServer}/users/signin`; try { const response = await fetch(url, fetchOptions); diff --git a/frontend/src/app/[locale]/account/page.tsx b/frontend/src/app/[locale]/account/page.tsx index cf7fad0..50ee26c 100644 --- a/frontend/src/app/[locale]/account/page.tsx +++ b/frontend/src/app/[locale]/account/page.tsx @@ -4,6 +4,7 @@ export default function Page(params: { locale: string }) { const t = useTranslations('Auth'); const messages = { yourProjects: t('your_projects'), + moveToAdmin: t('move_to_admin'), }; return ; diff --git a/frontend/src/app/[locale]/admin/AdminPage.tsx b/frontend/src/app/[locale]/admin/AdminPage.tsx new file mode 100644 index 0000000..879b059 --- /dev/null +++ b/frontend/src/app/[locale]/admin/AdminPage.tsx @@ -0,0 +1,68 @@ +'use client'; +import React from 'react'; +import { useState, useEffect, useContext } from 'react'; +import { UserType, AdminMessages } from '@/types/user'; +import { TokenContext } from '../TokenProvider'; +import UsersTable from './UsersTable'; +import Config from '@/config/config'; +const apiServer = Config.apiServer; + +type Props = { + messages: AdminMessages; + locale: string; +}; + +async function fetchUsers(jwt: string) { + const fetchOptions = { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${jwt}`, + }, + }; + + const url = `${apiServer}/users`; + + try { + const response = await fetch(url, fetchOptions); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + const data = await response.json(); + return data; + } catch (error: any) { + console.error('Error fetching data:', error.message); + } +} + +export default function AdminPage({ messages, locale }: Props) { + const context = useContext(TokenContext); + const [users, setUsers] = useState([]); + + useEffect(() => { + async function fetchDataEffect() { + if (!context.isSignedIn()) { + return; + } + + try { + const data = await fetchUsers(context.token.access_token); + setUsers(data); + } catch (error: any) { + console.error('Error in effect:', error.message); + } + } + + fetchDataEffect(); + }, [context]); + + return ( +
+
+

{messages.userManagement}

+
+ + +
+ ); +} diff --git a/frontend/src/app/[locale]/admin/UsersTable.tsx b/frontend/src/app/[locale]/admin/UsersTable.tsx new file mode 100644 index 0000000..997e7a2 --- /dev/null +++ b/frontend/src/app/[locale]/admin/UsersTable.tsx @@ -0,0 +1,110 @@ +import { useState, useMemo, useCallback } from 'react'; +import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@nextui-org/react'; +import { UserType, AdminMessages } from '@/types/user'; +import { roles } from '@/config/selection'; +import Avatar from 'boring-avatars'; + +type Props = { + users: UserType[]; + messages: AdminMessages; + locale: string; +}; + +export default function UsersTable({ users, messages, locale }: Props) { + const headerColumns = [ + { name: messages.avatar, uid: 'avatar', sortable: false }, + { name: messages.id, uid: 'id', sortable: true }, + { name: messages.email, uid: 'email', sortable: true }, + { name: messages.username, uid: 'username', sortable: true }, + { name: messages.role, uid: 'role', sortable: true }, + ]; + + const [sortDescriptor, setSortDescriptor] = useState({ + column: 'id', + direction: 'ascending', + }); + + const sortedItems = useMemo(() => { + return [...users].sort((a: UserType, b: UserType) => { + const first = a[sortDescriptor.column as keyof UserType] as number; + const second = b[sortDescriptor.column as keyof UserType] as number; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === 'descending' ? -cmp : cmp; + }); + }, [sortDescriptor, users]); + + const renderCell = useCallback((user: UserType, columnKey: Key) => { + const cellValue = user[columnKey as keyof UserType]; + + switch (columnKey) { + case 'avatar': + return ( + + ); + case 'id': + return {cellValue}; + case 'email': + return cellValue; + case 'name': + return cellValue; + case 'role': + return {messages[roles[cellValue].uid]}; + default: + return cellValue; + } + }, []); + + const classNames = useMemo( + () => ({ + wrapper: ['max-w-3xl'], + th: ['bg-transparent', 'text-default-500', 'border-b', 'border-divider'], + td: [ + // changing the rows border radius + // first + 'group-data-[first=true]:first:before:rounded-none', + 'group-data-[first=true]:last:before:rounded-none', + // middle + 'group-data-[middle=true]:before:rounded-none', + // last + 'group-data-[last=true]:first:before:rounded-none', + 'group-data-[last=true]:last:before:rounded-none', + ], + }), + [] + ); + + return ( + <> + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + {(columnKey) => {renderCell(item, columnKey)}} + )} + +
+ + ); +} diff --git a/frontend/src/app/[locale]/admin/page.tsx b/frontend/src/app/[locale]/admin/page.tsx new file mode 100644 index 0000000..0197bfa --- /dev/null +++ b/frontend/src/app/[locale]/admin/page.tsx @@ -0,0 +1,24 @@ +import { useTranslations } from 'next-intl'; +import AdminPage from './AdminPage'; + +export default function Page(params: { locale: string }) { + const t = useTranslations('Admin'); + const messages = { + admin: t('admin'), + userManagement: t('user_management'), + avatar: t('avatar'), + id: t('id'), + email: t('email'), + username: t('username'), + role: t('role'), + administrator: t('administrator'), + user: t('user'), + noUsersFound: t('no_users_found'), + }; + + return ( +
+ +
+ ); +} diff --git a/frontend/types/user.ts b/frontend/types/user.ts index 9d76e23..970d6c5 100644 --- a/frontend/types/user.ts +++ b/frontend/types/user.ts @@ -24,6 +24,7 @@ export type TokenContextType = { user: UserType; }; isSignedIn: () => Boolean; + isAdmin: () => Boolean; setToken: (token: TokenType) => {}; storeTokenToLocalStorage: (token: TokenType) => {}; removeTokenFromLocalStorage: () => {}; @@ -48,6 +49,16 @@ export type AuthMessages = { signinError: string; }; +export type AdminMessages = { + userManagement: string; + avatar: string; + id: string; + email: string; + username: string; + role: string; + noUsersFound: string; +}; + export type AccountDropDownMessages = { account: string; signUp: string;