phc/problemi
6
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: aggiunte feature per l'admin e cambiamenti stilistici minori

Browse Source
This commit is contained in:
aziis98
2023-01-11 12:08:40 +01:00
parent 1e1b94e8f7
commit 14b9eee816
7 changed files with 264 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/Header.tsx
+6 -6
View File
@@ -1,13 +1,13 @@
import { Link } from 'preact-router/match' import { Link } from 'preact-router/match'
import { isAdministrator, UserRole } from '../../shared/model' import { isAdministrator } from '../../shared/model'
import { prependBaseUrl } from '../api' import { prependBaseUrl } from '../api'
import { useCurrentUser } from '../hooks/useCurrentUser' import { useCurrentUser } from '../hooks/useCurrentUser'
const ROLE_LABEL: Record<UserRole, string> = { // const ROLE_LABEL: Record<UserRole, string> = {
['admin']: 'Admin', // ['admin']: 'Admin',
['moderator']: 'Moderatore', // ['moderator']: 'Moderatore',
['student']: 'Studente', // ['student']: 'Studente',
} // }
export const Header = ({}) => { export const Header = ({}) => {
const [user] = useCurrentUser() const [user] = useCurrentUser()
client/pages/AdminPage.tsx
+42 -17
View File
@@ -1,6 +1,6 @@
import { route } from 'preact-router' import { route } from 'preact-router'
import { useState } from 'preact/hooks' import { useState } from 'preact/hooks'
import { isAdministrator, Solution as SolutionModel, SolutionId } from '../../shared/model' import { isAdministrator, Solution as SolutionModel, SolutionId, User as UserModel } from '../../shared/model'
import { sortByStringKey } from '../../shared/utils' import { sortByStringKey } from '../../shared/utils'
import { prependBaseUrl, server } from '../api' import { prependBaseUrl, server } from '../api'
import { Header } from '../components/Header' import { Header } from '../components/Header'
@@ -63,6 +63,18 @@ export const AdminPage = ({}) => {
const [trackInteracted, setTrackedInteracted] = useState<Set<SolutionId>>(new Set()) const [trackInteracted, setTrackedInteracted] = useState<Set<SolutionId>>(new Set())
const hasUntrackedPending = sortedSolutions.filter(s => s.status === 'pending' || trackInteracted.has(s.id)).length > 0 const hasUntrackedPending = sortedSolutions.filter(s => s.status === 'pending' || trackInteracted.has(s.id)).length > 0
const [users] = useListResource<UserModel>(`/api/users`)
const [adminSuUsername, setAdminSuUsername] = useState<string>('')
const handleAdminSu = async () => {
await server.post(`/api/admin/su`, {
username: adminSuUsername,
})
route(prependBaseUrl('/u/' + adminSuUsername))
location.reload()
}
return ( return (
<> <>
<Header /> <Header />
@@ -108,24 +120,37 @@ export const AdminPage = ({}) => {
{user.role === 'admin' && ( {user.role === 'admin' && (
<> <>
<hr /> <hr />
<div class="subtitle">Utenti</div> <div class="subtitle">Controlli speciali solo per Admin</div>
<div class="table" style={{ '--cols': 4 }}> <div class="users-table" style={{ '--cols': 4 }}>
<div class="cell header">Nome Utente</div>
<div class="cell header">Username Ateneo</div> <div class="cell header">Username Ateneo</div>
<div class="cell header">Nome Utente</div>
<div class="cell header">Ruolo</div> <div class="cell header">Ruolo</div>
<div class="cell header last-col">Ultimo Login</div> <div class="cell header last-col">Azioni</div>
<div class="cell">User 1</div>
<div class="cell">user1</div> {users.map(user => (
<div class="cell">admin</div> <>
<div class="cell last-col">2/6/2075 20:32</div> <div class="cell mono">{user.id}</div>
<div class="cell">User 2</div> <div class="cell">{user.fullName}</div>
<div class="cell">user2</div> <div class="cell">{user.role}</div>
<div class="cell">moderator</div> <div class="cell last-col">
<div class="cell last-col">5/12/2102 20:61</div> <button>Boh 1</button>
<div class="cell last-row">User 3</div> <button>Boh 2</button>
<div class="cell last-row">user3</div> </div>
<div class="cell last-row">studente</div> </>
<div class="cell last-row last-col">11/5/2066 20:49</div> ))}
</div>
<div class="form">
<div class="fill subtitle mono">su $USER</div>
<p class="fill">Gli admin per fare prove possono immedesimarsi come un altro utente</p>
<label>User</label>
<input
type="text"
value={adminSuUsername}
onInput={e => setAdminSuUsername(e.target instanceof HTMLInputElement ? e.target.value : '')}
/>
<div class="fill">
<button onClick={() => handleAdminSu()}>Cambia Utente</button>
</div>
</div> </div>
</> </>
)} )}
client/pages/ProfilePage.tsx
+5 -2
View File
@@ -31,14 +31,17 @@ export const ProfilePage = ({}) => {
<> <>
<Header /> <Header />
<main class="page-profile"> <main class="page-profile">
<div class="subtitle">Profilo</div>
<button onClick={handleLogout}>Logout</button>
<div class="subtitle">Le tue soluzioni</div> <div class="subtitle">Le tue soluzioni</div>
<div class="solution-list"> <div class="solution-list">
{sortedSolutions.map(solution => ( {sortedSolutions.map(solution => (
<Solution refreshSolution={refreshSolutions} {...solution} adminControls={isAdministrator(user.role)} /> <Solution refreshSolution={refreshSolutions} {...solution} adminControls={isAdministrator(user.role)} />
))} ))}
</div> </div>
<div class="subtitle">Profilo</div>
<a href={prependBaseUrl('/u/' + user.id)} class="button" role="button">
Vai alla tua pagina utente
</a>
<button onClick={handleLogout}>Logout</button>
</main> </main>
</> </>
) )
client/pages/ScoresPage.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ export const ScoresPage = () => {
let orderedStats let orderedStats
if (sortStateColumn === 'student') { if (sortStateColumn === 'student') {
orderedStats = sortByStringKey(Object.entries(stats), ([user, s]) => user, sortStateOrder === 'ascending') orderedStats = sortByStringKey(Object.entries(stats), ([user, s]) => user.toLowerCase(), sortStateOrder === 'ascending')
} else { } else {
orderedStats = sortByNumericKey( orderedStats = sortByNumericKey(
Object.entries(stats), Object.entries(stats),
@@ -94,7 +94,7 @@ export const ScoresPage = () => {
<a href={prependBaseUrl(`/u/${user}`)}>@{user}</a> <a href={prependBaseUrl(`/u/${user}`)}>@{user}</a>
</div> </div>
<div class="cell">{s.sentSolutionsCount}</div> <div class="cell">{s.sentSolutionsCount}</div>
<div class="cell">{s.correctSolutionsCount}</div> <div class="cell last-col">{s.correctSolutionsCount}</div>
</> </>
))} ))}
</div> </div>
client/pages/UserPage.tsx
+42 -39
View File
@@ -11,45 +11,48 @@ type RouteProps = {
} }
export const UserPage = ({ uid }: RouteProps) => { export const UserPage = ({ uid }: RouteProps) => {
const [user] = useCurrentUser() const [user, ready] = useCurrentUser()
if (!ready) {
const [stats] = useResource<null | Record<string, SolutionStat>>(`/api/stats`, null)
if (stats) {
const userStats = stats[uid]
const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}&public`, [])
const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
return (
<>
<Header />
<main class="page-profile">
<div class="title">
Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a>
</div>
<hr />
<div class="subtitle">Statistiche</div>
<div class="info">
<div>Soluzioni inviate</div>
<div>Soluzioni corrette</div>
<div class="info-box">{userStats.sentSolutionsCount}</div>
<div class="info-box">{userStats.correctSolutionsCount}</div>
</div>
<hr />
<div class="subtitle">Soluzioni notevoli</div>
<div class="solution-list">
{sortedSolutions.map(solution => (
<Solution
refreshSolution={refreshSolutions}
{...solution}
adminControls={user !== null && isAdministrator(user.role)}
/>
))}
</div>
</main>
</>
)
} else {
return <></> return <></>
} }
const [stats] = useResource<null | Record<string, SolutionStat | undefined>>(`/api/stats`, null)
if (!stats) {
return <></>
}
const userStats = stats[uid]
const [solutions, refreshSolutions] = useResource<SolutionModel[]>(`/api/solutions?user=${uid}&public`, [])
const sortedSolutions = sortByStringKey(solutions, s => s.createdAt, false)
return (
<>
<Header />
<main class="page-profile">
<div class="title">
Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>{user?.fullName}</a>
</div>
<hr />
<div class="subtitle">Statistiche</div>
<div class="info">
<div>Soluzioni inviate</div>
<div>Soluzioni corrette</div>
<div class="info-box">{userStats?.sentSolutionsCount ?? 0}</div>
<div class="info-box">{userStats?.correctSolutionsCount ?? 0}</div>
</div>
<hr />
<div class="subtitle">Soluzioni notevoli</div>
<div class="solution-list">
{sortedSolutions.map(solution => (
<Solution
refreshSolution={refreshSolutions}
{...solution}
adminControls={user !== null && isAdministrator(user.role)}
/>
))}
</div>
</main>
</>
)
} }
client/styles/main.scss
+146 -98
View File
@@ -119,7 +119,15 @@ input[type='text'] {
} }
} }
button, .button { button,
.button {
// reset link styles
text-decoration: none;
display: grid;
place-content: center;
height: 38px;
cursor: pointer; cursor: pointer;
font-family: 'Lato'; font-family: 'Lato';
@@ -128,7 +136,7 @@ button, .button {
color: #555; color: #555;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
padding: 0.5rem 2rem; padding: 0.5rem 1.5rem;
box-shadow: -2px 2px 16px 0 #00000010; box-shadow: -2px 2px 16px 0 #00000010;
border-radius: 0.25rem; border-radius: 0.25rem;
@@ -170,11 +178,15 @@ button, .button {
font-size: 19px; font-size: 19px;
} }
} }
.table .cell & {
padding: 0.3rem 1rem;
}
} }
.link, .link,
a, a:not(.button),
a:visited { a:not(.button):visited {
cursor: pointer; cursor: pointer;
color: var(--accent); color: var(--accent);
@@ -189,6 +201,11 @@ a:visited {
// Typography // Typography
// //
.mono {
font-family: monospace;
font-size: 90%;
}
.icon-text { .icon-text {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -376,16 +393,7 @@ main.page-scores {
padding: 1rem; padding: 1rem;
.table { .table {
display: grid; grid-template-columns: repeat(3, auto);
grid-template-columns: auto auto auto;
box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
// border: 1px solid #ddd;
border-radius: 0.5rem;
background: #ffffff;
user-select: none;
.icon { .icon {
cursor: pointer; cursor: pointer;
@@ -393,100 +401,119 @@ main.page-scores {
place-content: center; place-content: center;
} }
position: relative;
.cell { .cell {
padding: 1rem 2rem; padding: 1rem 2rem 1rem 1rem;
gap: 0.5rem;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
&:nth-child(3n + 3) {
border-right: 1px solid #ddd;
}
&:nth-last-child(1),
&:nth-last-child(2),
&:nth-last-child(3) {
border-bottom: 1px solid #ddd;
}
&:first-child {
border-top-left-radius: 0.5rem;
}
&:nth-child(3) {
border-top-right-radius: 0.5rem;
}
&:nth-last-child(3) {
border-bottom-left-radius: 0.5rem;
}
&:last-child {
border-bottom-right-radius: 0.5rem;
}
&.header { &.header {
font-weight: 400; font-weight: 400;
font-size: 22px; font-size: 22px;
padding-right: 1rem; padding-right: 0.5rem;
background: #f0f0f0; background: #f0f0f0;
display: flex; display: flex;
gap: 1rem;
align-items: center; align-items: center;
text-align: center; text-align: center;
justify-content: space-between; justify-content: space-between;
} }
&:not(.header) {
user-select: text;
&:nth-child(3n + 1) {
text-align: left;
}
&:nth-child(3n + 2),
&:nth-child(3n + 3) {
text-align: center;
}
&:nth-child(3n + 3) {
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 3rem;
transform: translate(0, -1rem);
pointer-events: none;
background: transparent;
}
&:hover::after {
background: #00000006;
}
}
&:hover {
&:nth-child(3n + 1) + .cell + .cell::after {
background: #00000006;
}
&:nth-child(3n + 2) + .cell::after {
background: #00000006;
}
}
}
} }
} }
// .table {
// display: grid;
// grid-template-columns: auto auto auto;
// box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
// // border: 1px solid #ddd;
// border-radius: 0.5rem;
// background: #ffffff;
// user-select: none;
// position: relative;
// .cell {
// padding: 1rem 2rem;
// gap: 0.5rem;
// border-left: 1px solid #ddd;
// border-top: 1px solid #ddd;
// &:nth-child(3n + 3) {
// border-right: 1px solid #ddd;
// }
// &:nth-last-child(1),
// &:nth-last-child(2),
// &:nth-last-child(3) {
// border-bottom: 1px solid #ddd;
// }
// &:first-child {
// border-top-left-radius: 0.5rem;
// }
// &:nth-child(3) {
// border-top-right-radius: 0.5rem;
// }
// &:nth-last-child(3) {
// border-bottom-left-radius: 0.5rem;
// }
// &:last-child {
// border-bottom-right-radius: 0.5rem;
// }
// &:not(.header) {
// user-select: text;
// &:nth-child(3n + 1) {
// text-align: left;
// }
// &:nth-child(3n + 2),
// &:nth-child(3n + 3) {
// text-align: center;
// }
// &:nth-child(3n + 3) {
// &::after {
// content: '';
// position: absolute;
// left: 0;
// right: 0;
// height: 3rem;
// transform: translate(0, -1rem);
// pointer-events: none;
// background: transparent;
// }
// &:hover::after {
// background: #00000006;
// }
// }
// &:hover {
// &:nth-child(3n + 1) + .cell + .cell::after {
// background: #00000006;
// }
// &:nth-child(3n + 2) + .cell::after {
// background: #00000006;
// }
// }
// }
// }
// }
} }
} }
@@ -509,11 +536,17 @@ main.page-scores {
overflow: hidden; overflow: hidden;
.cell { .cell {
padding: 0.5rem 1rem; padding: 0.75rem;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: start;
&.last-col { &.last-col {
border-right: none; border-right: none;
} }
@@ -788,16 +821,16 @@ header {
.form { .form {
min-width: 50ch; min-width: 50ch;
max-width: 80ch;
background: #e0e0e0; background: #f0f0f0;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
border: 1px solid #c0c0c0; box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
border-radius: 1rem; border: 1px solid #ddd;
border-radius: 0.5rem;
// box-shadow: -2px 4px 16px 4px #00000018, -2px 4px 4px 1px #00000018;
padding: 1.5rem 2rem 1rem; padding: 1.5rem 2rem 1rem;
gap: 1rem; gap: 1rem;
@@ -864,6 +897,21 @@ header {
} }
} }
//
// Pages
//
main.page-admin {
.users-table {
@extend .table;
grid-template-columns: auto 1fr auto auto;
width: 100%;
max-width: 80ch;
}
}
// //
// Mobile // Mobile
// //
server/routes.ts
+21 -1
View File
@@ -102,6 +102,26 @@ export async function createApiRouter() {
// res.json({ status: 'ok' }) // res.json({ status: 'ok' })
// }) // })
r.post('/api/admin/su', async (req, res) => {
const requestUser = await getRequestUser(req)
if (!requestUser || requestUser.role !== 'admin') {
res.sendStatus(StatusCodes.UNAUTHORIZED)
return
}
const username: string = req.body.username ?? ''
const newUser = await getUser(db, username)
if (!newUser) {
res.status(StatusCodes.NOT_FOUND)
res.send(`no user for id "${username}"`)
return
}
res.cookie('sid', sessions.createSession(username as UserId), { maxAge: 1000 * 60 * 60 * 24 * 7 })
res.send({ status: 'ok' })
})
r.post('/api/logout', (req, res) => { r.post('/api/logout', (req, res) => {
res.cookie('sid', '', { expires: new Date() }) res.cookie('sid', '', { expires: new Date() })
res.json({ status: 'ok' }) res.json({ status: 'ok' })
@@ -109,7 +129,7 @@ export async function createApiRouter() {
r.get('/api/users', async (req, res) => { r.get('/api/users', async (req, res) => {
const requestUser = await getRequestUser(req) const requestUser = await getRequestUser(req)
if (!requestUser || !isAdministrator(requestUser.role)) { if (!requestUser || requestUser.role !== 'admin') {
res.sendStatus(StatusCodes.UNAUTHORIZED) res.sendStatus(StatusCodes.UNAUTHORIZED)
return return
} }