Feat/tos

app/components/header/menu/index.tsx

@@ -10,6 +10,7 @@ import {
 	ExternalLink,
 	Settings,
 	Compass,
+	ScrollText,
 } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -153,6 +154,23 @@ export default function Menu() {
 							</DropdownMenuItem>
 						</Link>
 					</DropdownMenuGroup>
+					<DropdownMenuGroup>
+						<Link
+							to={
+								'/terms'
+							}
+							target="_blank"
+						>
+							<DropdownMenuItem
+								onSelect={(e) => e.preventDefault()}
+								className="cursor-pointer"
+							>
+								<ScrollText className="mr-2 inline h-5 w-5" />
+								<span> {t('tos')}</span>
+								<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
+							</DropdownMenuItem>
+						</Link>
+					</DropdownMenuGroup>
 					<DropdownMenuSeparator />
 
 					<DropdownMenuGroup>

app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx

@@ -10,7 +10,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
 	}[]
 }
 
-export function EditDviceSidebarNav({
+export function EditDeviceSidebarNav({
 	className,
 	items,
 	...props

app/components/ui/dialog.tsx

@@ -39,8 +39,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideClose?: boolean }
+>(({ className, children, hideClose, ...props }, ref) => (
 	<DialogPortal>
 		<DialogOverlay />
 		<DialogPrimitive.Content
@@ -52,10 +52,12 @@ const DialogContent = React.forwardRef<
 			{...props}
 		>
 			{children}
+			{!hideClose &&( 
 			<DialogPrimitive.Close className="absolute right-3 top-3 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>
+			)}
 		</DialogPrimitive.Content>
 	</DialogPortal>
 ))

app/lib/request-parsing.ts

@@ -43,6 +43,7 @@ export async function parseUserRegistrationData(request: Request): Promise<{
 	email: string
 	password: string
 	language: string
+	tosAccepted: boolean
 }> {
 	const data = await parseRequestData(request)
 
@@ -51,6 +52,7 @@ export async function parseUserRegistrationData(request: Request): Promise<{
 		email: data.email || '',
 		password: data.password || '',
 		language: data.language || 'en_US',
+		tosAccepted: data.tosAccepted || false
 	}
 }
 

app/lib/user-service.server.ts

@@ -24,9 +24,11 @@ import {
 	type UsernameValidation,
 	validateEmail,
 	validatePassword,
+	validateTosAccepted,
 	validateUsername,
 } from './user-service'
 import { drizzleClient } from '~/db.server'
+import { getCurrentEffectiveTos } from '~/models/tos.server'
 import {
 	createUser,
 	deleteUserByEmail,
@@ -57,6 +59,7 @@ export const registerUser = async (
 	email: string,
 	password: string,
 	language: 'de_DE' | 'en_US',
+	tosAccepted: boolean,
 ): Promise<
 	UsernameValidation | EmailValidation | PasswordValidation | User | null
 > => {
@@ -69,10 +72,16 @@ export const registerUser = async (
 	const passwordValidation = validatePassword(password)
 	if (!passwordValidation.isValid) return passwordValidation
 
+	const tosValidation = validateTosAccepted(tosAccepted)
+	if(!tosValidation.isValid) return tosValidation
+
+	const tos = await getCurrentEffectiveTos()
+	invariant(tos, 'Expected tos to be configured.')
+
 	const existingUser = await getUserByEmail(email)
 	if (existingUser) return null // no new user is created -> null
 
-	const newUsers = await createUser(username, email, language, password)
+	const newUsers = await createUser(username, email, language, password, tos.id)
 	if (newUsers.length === 0)
 		throw new Error('Something went wrong creating the user profile!')
 

app/lib/user-service.ts

@@ -1,5 +1,5 @@
 type RegistrationInputValidation = {
-	validationKind: 'username' | 'email' | 'password'
+	validationKind: 'username' | 'email' | 'password' | 'tos'
 }
 
 export type UsernameValidation = {
@@ -65,3 +65,17 @@ export const validatePassword = (password: string): PasswordValidation => {
 		return { isValid: false, length: true, validationKind: 'password' }
 	return { isValid: true, validationKind: 'password' }
 }
+
+export type TosValidation = {
+  isValid: boolean
+  required?: boolean
+} & RegistrationInputValidation
+
+export const validateTosAccepted = (tosAccepted: boolean): TosValidation => {
+  if (!tosAccepted) {
+    return { isValid: false, required: true, validationKind: 'tos' }
+  }
+  return { isValid: true, validationKind: 'tos' }
+}
+
+

app/middleware/tos-api.server.ts

@@ -0,0 +1,68 @@
+import { getUserFromJwt } from "~/lib/jwt";
+import { getTosRequirementForUser } from "~/models/tos.server";
+
+function json(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json; charset=utf-8" },
+  });
+}
+
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+type AllowRule = {
+  method: HttpMethod | '*'
+  pathname: string | RegExp
+}
+
+const API_TOS_ALLOWLIST: AllowRule[] = [
+  { method: 'POST', pathname: '/api/users/refresh-auth' },
+  { method: 'POST', pathname: '/api/users/sign-out' },
+
+  { method: 'DELETE', pathname: '/api/users/me' },
+
+  { method: 'POST', pathname: '/api/users/me/accept-tos' },
+]
+
+function isAllowedApi(request: Request, pathname: string) {
+  const method = request.method as HttpMethod
+
+  return API_TOS_ALLOWLIST.some((rule) => {
+    if (rule.method !== '*' && rule.method !== method) return false
+
+    if (rule.pathname instanceof RegExp) {
+      return rule.pathname.test(pathname)
+    }
+
+    return rule.pathname === pathname
+  })
+}
+
+export async function tosApiMiddleware(
+  { request }: { request: Request },
+  next: () => Promise<Response>,
+) {
+  const url = new URL(request.url);
+
+  const jwtUser = await getUserFromJwt(request);
+  if (typeof jwtUser !== "object") {
+    return next();
+  }
+
+  if (isAllowedApi(request, url.pathname)) {
+    return next();
+  }
+
+  const req = await getTosRequirementForUser(jwtUser.id);
+  if (req.required && req.tos) {
+    return json(
+      {
+        code: "tos_required",
+        tosVersionId: req.tos.id,
+        effectiveFrom: req.tos.effectiveFrom,
+      },
+      428,
+    );
+  }
+
+  return next();
+}

app/middleware/tos-ui.server.ts

@@ -0,0 +1,41 @@
+import { redirect } from "react-router";
+import { getTosRequirementForUser } from "~/models/tos.server";
+import { getUserId } from "~/utils/session.server";
+
+function isAllowedUiPath(pathname: string) {
+  if (pathname.startsWith("/explore")) return true;
+  if (pathname === "/terms") return true;
+  if (pathname === "/settings/delete") return true;
+  if (pathname === "/logout") return true;
+  if (pathname === '/tos-required') return true;
+  if (pathname.startsWith("/profile")) return true;
+
+  return false;
+}
+
+export async function tosUiMiddleware(
+  { request }: { request: Request },
+  next: () => Promise<Response>,
+) {
+  const url = new URL(request.url);
+
+  if (url.pathname.startsWith("/api")) {
+    // handled by tos-api middleware
+    return next();
+  }
+
+  if (isAllowedUiPath(url.pathname)) {
+    return next();
+  }
+
+  const userId = await getUserId(request);
+  if (!userId) return next();
+
+  const req = await getTosRequirementForUser(userId);
+  if (req.required && req.tos) {
+    const redirectTo = url.pathname + url.search;
+    throw redirect(`/tos-required?redirectTo=${encodeURIComponent(redirectTo)}`)
+  }
+
+  return next();
+}

app/models/device.server.ts

@@ -119,6 +119,28 @@ export function getDevice({ id }: Pick<Device, 'id'>) {
 	})
 }
 
+export function getUserDevice({
+  id,
+  userId,
+}: Pick<Device, 'id' | 'userId'>) {
+  return drizzleClient.query.device.findFirst({
+    where: (d, { and, eq }) => and(eq(d.id, id), eq(d.userId, userId)),
+    columns: {
+      id: true,
+      name: true,
+      description: true,
+      exposure: true,
+      image: true,
+      tags: true,
+      website: true,
+      updatedAt: true,
+      latitude: true,
+      longitude: true,
+      userId: true,
+    },
+  })
+}
+
 export function getLocations(
 	{ id }: Pick<Device, 'id'>,
 	fromDate: Date,

app/models/tos.server.ts

@@ -0,0 +1,96 @@
+import { drizzleClient } from '~/db.server'
+import { tosUserState } from '~/schema/tos'
+
+export const ONE_DAY_MS = 24 * 60 * 60 * 1000
+export const TOS_GRACE_DAYS = 7
+
+export async function getCurrentEffectiveTos(now = new Date()) {
+  return drizzleClient.query.tosVersion.findFirst({
+    where: (t, { lte }) => lte(t.effectiveFrom, now),
+    orderBy: (t, { desc }) => [desc(t.effectiveFrom)],
+  })
+}
+
+async function getUserTosState(userId: string, tosVersionId: string) {
+  return drizzleClient.query.tosUserState.findFirst({
+    where: (s, { and, eq }) => and(eq(s.userId, userId), eq(s.tosVersionId, tosVersionId)),
+  })
+}
+
+async function ensureUserTosState({
+  userId,
+  tos,
+  now = new Date(),
+}: {
+  userId: string
+  tos: { id: string; graceDays?: number | null }
+  now?: Date
+}) {
+  const existing = await getUserTosState(userId, tos.id)
+  if (existing) return existing
+
+  const graceDays = tos.graceDays ?? TOS_GRACE_DAYS
+  const graceUntil = new Date(now.getTime() + graceDays * ONE_DAY_MS)
+
+  const inserted = await drizzleClient
+    .insert(tosUserState)
+    .values({
+      userId,
+      tosVersionId: tos.id,
+      firstSeenAt: now,
+      graceUntil,
+    })
+    .onConflictDoNothing()
+    .returning()
+
+  return inserted[0] ?? (await getUserTosState(userId, tos.id))
+}
+
+export async function markTosAccepted({
+  userId,
+  tosId,
+  now = new Date(),
+  graceDays = TOS_GRACE_DAYS,
+}: {
+  userId: string
+  tosId: string
+  now?: Date
+  graceDays?: number
+}) {
+  const graceUntil = new Date(now.getTime() + graceDays * ONE_DAY_MS)
+
+  await drizzleClient
+    .insert(tosUserState)
+    .values({
+      userId,
+      tosVersionId: tosId,
+      firstSeenAt: now,
+      graceUntil,
+      acceptedAt: now,
+    })
+    .onConflictDoUpdate({
+      target: [tosUserState.userId, tosUserState.tosVersionId],
+      set: { acceptedAt: now },
+    })
+}
+
+export async function getTosRequirementForUser(userId: string, now = new Date()) {
+  const current = await getCurrentEffectiveTos(now)
+  if (!current) {
+    return { tos: null, accepted: true, inGrace: false, mustBlock: false, graceUntil: null }
+  }
+
+  const state = await ensureUserTosState({
+    userId,
+    tos: { id: current.id, graceDays: (current as any).graceDays },
+    now,
+  })
+
+  const accepted = !!state?.acceptedAt
+  const graceUntil = state?.graceUntil ?? null
+  const inGrace = !accepted && !!graceUntil && now <= new Date(graceUntil)
+
+  const mustBlock = !accepted && !inGrace
+
+  return { tos: current, accepted, inGrace, mustBlock, graceUntil }
+}