nwpie/reiverr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Editing, creating and deleting server accounts, user.controller improvements

Browse Source
This commit is contained in:
Aleksi Lassila
2024-06-16 22:15:47 +03:00
parent 9b5be9e2ae
commit 0107b4f7c3
28 changed files with 601 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/app.module.ts
View File

@@ -2,7 +2,7 @@ import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { DatabaseModule } from './database/database.module';
import { UserModule } from './user/user.module';
import { UsersModule } from './users/users.module';
import { AuthModule } from './auth/auth.module';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
@@ -10,7 +10,7 @@ import { join } from 'path';
@Module({
imports: [
DatabaseModule,
UserModule,
UsersModule,
AuthModule,
ServeStaticModule.forRoot({
rootPath: join(__dirname, 'dist'),

2
backend/src/auth/auth.controller.ts
View File

@@ -7,7 +7,7 @@ import {
UnauthorizedException,
} from '@nestjs/common';
import { AuthService } from './auth.service';
import { SignInDto, UserDto } from '../user/user.dto';
import { SignInDto, UserDto } from '../users/user.dto';
import { ApiOkResponse, ApiProperty } from '@nestjs/swagger';
import { ApiException } from '@nanogiants/nestjs-swagger-api-exception-decorator';

12
backend/src/auth/auth.guard.ts
View File

@@ -8,8 +8,8 @@ import {
import { JwtService } from '@nestjs/jwt';
import { JWT_SECRET } from '../consts';
import { AccessTokenPayload } from './auth.service';
import { User } from '../user/user.entity';
import { UserService } from '../user/user.service';
import { User } from '../users/user.entity';
import { UsersService } from '../users/users.service';
export const GetUser = createParamDecorator(
(data: unknown, ctx: ExecutionContext): User => {
@@ -28,7 +28,7 @@ function extractTokenFromHeader(request: Request): string | undefined {
export class AuthGuard implements CanActivate {
constructor(
private jwtService: JwtService,
private userService: UserService,
private userService: UsersService,
) {}
async canActivate(context: ExecutionContext): Promise<boolean> {
@@ -47,6 +47,10 @@ export class AuthGuard implements CanActivate {
if (payload.sub) {
request['user'] = await this.userService.findOne(payload.sub);
}
if (!request['user']) {
throw new UnauthorizedException();
}
} catch {
throw new UnauthorizedException();
}
@@ -58,7 +62,7 @@ export class AuthGuard implements CanActivate {
export class OptionalAuthGuard implements CanActivate {
constructor(
private jwtService: JwtService,
private userService: UserService,
private userService: UsersService,
) {}
async canActivate(context: ExecutionContext): Promise<boolean> {

4
backend/src/auth/auth.module.ts
View File

@@ -1,13 +1,13 @@
import { Module } from '@nestjs/common';
import { AuthController } from './auth.controller';
import { AuthService } from './auth.service';
import { UserModule } from '../user/user.module';
import { UsersModule } from '../users/users.module';
import { JwtModule } from '@nestjs/jwt';
import { JWT_SECRET } from '../consts';
@Module({
imports: [
UserModule,
UsersModule,
JwtModule.register({
global: true,
secret: JWT_SECRET,

12
backend/src/auth/auth.service.ts
View File

@@ -1,7 +1,7 @@
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { UserService } from '../user/user.service';
import { UsersService } from '../users/users.service';
import { JwtService } from '@nestjs/jwt';
import { User } from '../user/user.entity';
import { User } from '../users/user.entity';
export interface AccessTokenPayload {
sub: string;
@@ -10,7 +10,7 @@ export interface AccessTokenPayload {
@Injectable()
export class AuthService {
constructor(
private userService: UserService,
private userService: UsersService,
private jwtService: JwtService,
) {}
@@ -23,7 +23,11 @@ export class AuthService {
}> {
let user = await this.userService.findOneByName(name);
if (!user && (await this.userService.noPreviousAdmins()))
user = await this.userService.create(name, password, true);
user = await this.userService.create({
name,
password,
isAdmin: true,
});
if (!(user && user.password === password)) {
throw new UnauthorizedException();

12
backend/src/main.ts
View File

@@ -3,18 +3,22 @@ import { AppModule } from './app.module';
import 'reflect-metadata';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import * as fs from 'fs';
import { UserService } from './user/user.service';
import { UsersService } from './users/users.service';
import { ADMIN_PASSWORD, ADMIN_USERNAME } from './consts';
import { json, urlencoded } from 'express';
// import * as proxy from 'express-http-proxy';
async function createAdminUser(userService: UserService) {
async function createAdminUser(userService: UsersService) {
if (!ADMIN_USERNAME || ADMIN_PASSWORD === undefined) return;
const existingUser = await userService.findOneByName(ADMIN_USERNAME);
if (!existingUser) {
await userService.create(ADMIN_USERNAME, ADMIN_PASSWORD, true);
await userService.create({
name: ADMIN_USERNAME,
password: ADMIN_PASSWORD,
isAdmin: true,
});
}
}
@@ -35,7 +39,7 @@ async function bootstrap() {
SwaggerModule.setup('openapi', app, document);
fs.writeFileSync('./swagger-spec.json', JSON.stringify(document));
await createAdminUser(app.get(UserService));
await createAdminUser(app.get(UsersService));
await app.listen(9494);
}

132
backend/src/user/user.controller.ts
View File

@@ -1,132 +0,0 @@
import {
BadRequestException,
Body,
Controller,
Get,
HttpCode,
HttpStatus,
NotFoundException,
Param,
Post,
Put,
UnauthorizedException,
UseGuards,
} from '@nestjs/common';
import { UserService } from './user.service';
import { AuthGuard, GetUser, OptionalAuthGuard } from '../auth/auth.guard';
import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
import { CreateUserDto, UpdateUserDto, UserDto } from './user.dto';
import { User } from './user.entity';
import { ApiException } from '@nanogiants/nestjs-swagger-api-exception-decorator';
@ApiTags('user')
@Controller('user')
export class UserController {
constructor(private userService: UserService) {}
@UseGuards(AuthGuard)
@Get()
@ApiOkResponse({ description: 'User found', type: UserDto })
@ApiException(() => NotFoundException, { description: 'User not found' })
async getProfile(@GetUser() user: User): Promise<UserDto> {
console.log(user);
if (!user) {
throw new NotFoundException();
}
return UserDto.fromEntity(user);
}
@UseGuards(AuthGuard)
@Get(':id')
@ApiOkResponse({ description: 'User found', type: UserDto })
@ApiException(() => NotFoundException, { description: 'User not found' })
async findById(
@Param('id') id: string,
@GetUser() callerUser: User,
): Promise<UserDto> {
if (!callerUser.isAdmin && callerUser.id !== id) {
throw new NotFoundException();
}
const user = await this.userService.findOne(id);
if (!user) {
throw new NotFoundException();
}
return UserDto.fromEntity(user);
}
// @Get('isSetupDone')
// @ApiOkResponse({ description: 'Setup done', type: Boolean })
// async isSetupDone() {
// return this.userService.noPreviousAdmins();
// }
@UseGuards(OptionalAuthGuard)
@HttpCode(HttpStatus.OK)
@Post()
async create(
@Body()
userCreateDto: CreateUserDto,
@GetUser() callerUser: User | undefined,
) {
const canCreateUser =
(await this.userService.noPreviousAdmins()) || callerUser?.isAdmin;
if (!canCreateUser) throw new UnauthorizedException();
const user = await this.userService.create(
userCreateDto.name,
userCreateDto.password,
userCreateDto.isAdmin,
);
return UserDto.fromEntity(user);
}
@UseGuards(AuthGuard)
@Put(':id')
@ApiOkResponse({ description: 'User updated', type: UserDto })
@ApiException(() => NotFoundException, { description: 'User not found' })
async updateUser(
@Param('id') id: string,
@Body() updateUserDto: UpdateUserDto,
@GetUser() callerUser: User,
): Promise<UserDto> {
if ((!callerUser.isAdmin && callerUser.id !== id) || !id) {
throw new NotFoundException();
}
const user = await this.userService.findOne(id);
if (updateUserDto.name) user.name = updateUserDto.name;
if (
updateUserDto.oldPassword === user.password &&
updateUserDto.password !== undefined
)
user.password = updateUserDto.password;
else if (
updateUserDto.password &&
updateUserDto.oldPassword !== user.password
)
throw new BadRequestException("Passwords don't match");
if (updateUserDto.settings) user.settings = updateUserDto.settings;
if (updateUserDto.onboardingDone)
user.onboardingDone = updateUserDto.onboardingDone;
if (updateUserDto.profilePicture) {
try {
user.profilePicture = Buffer.from(
updateUserDto.profilePicture.split(';base64,').pop() as string,
'base64',
);
} catch (e) {
console.error(e);
}
}
const updated = await this.userService.update(user);
return UserDto.fromEntity(updated);
}
}

13
backend/src/user/user.module.ts
View File

@@ -1,13 +0,0 @@
import { Module } from '@nestjs/common';
import { UserService } from './user.service';
import { userProviders } from './user.providers';
import { UserController } from './user.controller';
import { DatabaseModule } from '../database/database.module';
@Module({
imports: [DatabaseModule],
providers: [...userProviders, UserService],
controllers: [UserController],
exports: [UserService],
})
export class UserModule {}

48
backend/src/user/user.service.ts
View File

@@ -1,48 +0,0 @@
import { Inject, Injectable } from '@nestjs/common';
import { Repository } from 'typeorm';
import { User } from './user.entity';
@Injectable()
export class UserService {
constructor(
@Inject('USER_REPOSITORY')
private readonly userRepository: Repository<User>,
) {}
async findAll(): Promise<User[]> {
return this.userRepository.find();
}
async findOne(id: string): Promise<User> {
return this.userRepository.findOne({ where: { id } });
}
async findOneByName(name: string): Promise<User> {
return this.userRepository.findOne({ where: { name } });
}
async create(name: string, password: string, isAdmin = false): Promise<User> {
const user = this.userRepository.create();
user.name = name;
// TODO: Hash password
user.password = password;
user.isAdmin = isAdmin;
return this.userRepository.save(user);
}
async update(user: User): Promise<User> {
return this.userRepository.save(user);
}
async remove(id: number): Promise<void> {
await this.userRepository.delete(id);
}
async noPreviousAdmins(): Promise<boolean> {
const adminCount = await this.userRepository.count({
where: { isAdmin: true },
});
return adminCount === 0;
}
}

13
backend/src/user/user.dto.ts → backend/src/users/user.dto.ts
View File

@@ -25,10 +25,19 @@ export class CreateUserDto extends PickType(User, [
'name',
'password',
'isAdmin',
] as const) {}
] as const) {
@ApiProperty({ type: 'string', required: false })
profilePicture?: string;
}
export class UpdateUserDto extends PartialType(
PickType(User, ['settings', 'onboardingDone', 'name', 'password'] as const),
PickType(User, [
'settings',
'onboardingDone',
'name',
'password',
'isAdmin',
] as const),
) {
@ApiProperty({ type: 'string', required: false })
profilePicture?: string;

0
backend/src/user/user.entity.ts → backend/src/users/user.entity.ts
View File

0
backend/src/user/user.providers.ts → backend/src/users/user.providers.ts
View File

149
backend/src/users/users.controller.ts Normal file
View File

@@ -0,0 +1,149 @@
import {
BadRequestException,
Body,
Controller,
Delete,
Get,
HttpCode,
HttpStatus,
InternalServerErrorException,
NotFoundException,
Param,
Post,
Put,
UnauthorizedException,
UseGuards,
} from '@nestjs/common';
import { UserServiceError, UsersService } from './users.service';
import { AuthGuard, GetUser, OptionalAuthGuard } from '../auth/auth.guard';
import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
import { CreateUserDto, UpdateUserDto, UserDto } from './user.dto';
import { User } from './user.entity';
import { ApiException } from '@nanogiants/nestjs-swagger-api-exception-decorator';
@ApiTags('users')
@Controller('users')
export class UsersController {
constructor(private usersService: UsersService) {}
// @UseGuards(AuthGuard)
// @Get()
// @ApiOkResponse({ description: 'User found', type: UserDto })
// @ApiException(() => NotFoundException, { description: 'User not found' })
// async getProfile(@GetUser() user: User): Promise<UserDto> {
// console.log(user);
//
// if (!user) {
// throw new NotFoundException();
// }
//
// return UserDto.fromEntity(user);
// }
@UseGuards(AuthGuard)
@Get('')
@ApiOkResponse({
description: 'All users found',
type: UserDto,
isArray: true,
})
async findAll(@GetUser() callerUser: User): Promise<UserDto[]> {
if (!callerUser.isAdmin) {
throw new UnauthorizedException();
}
const users = await this.usersService.findAll();
return users.map((user) => UserDto.fromEntity(user));
}
@UseGuards(AuthGuard)
@Get(':id')
@ApiOkResponse({ description: 'User found', type: UserDto })
@ApiException(() => NotFoundException, { description: 'User not found' })
async findById(
@Param('id') id: string,
@GetUser() callerUser: User,
): Promise<UserDto> {
console.log('callerUser', callerUser);
if (!callerUser.isAdmin && callerUser.id !== id) {
throw new NotFoundException();
}
const user = await this.usersService.findOne(id);
if (!user) {
throw new NotFoundException();
}
return UserDto.fromEntity(user);
}
// @Get('isSetupDone')
// @ApiOkResponse({ description: 'Setup done', type: Boolean })
// async isSetupDone() {
// return this.userService.noPreviousAdmins();
// }
@UseGuards(OptionalAuthGuard)
@Post()
@ApiOkResponse({ description: 'User created', type: UserDto })
@ApiException(() => UnauthorizedException, { description: 'Unauthorized' })
@ApiException(() => BadRequestException)
async create(
@Body()
userCreateDto: CreateUserDto,
@GetUser() callerUser: User | undefined,
) {
const canCreateUser =
(await this.usersService.noPreviousAdmins()) || callerUser?.isAdmin;
if (!canCreateUser) throw new UnauthorizedException();
const user = await this.usersService.create(userCreateDto).catch((e) => {
if (e === UserServiceError.UsernameRequired)
throw new BadRequestException('Username is required');
else throw new InternalServerErrorException();
});
return UserDto.fromEntity(user);
}
@UseGuards(AuthGuard)
@Put(':id')
@ApiOkResponse({ description: 'User updated', type: UserDto })
@ApiException(() => NotFoundException, { description: 'User not found' })
async update(
@Param('id') id: string,
@Body() updateUserDto: UpdateUserDto,
@GetUser() callerUser: User,
): Promise<UserDto> {
if ((!callerUser.isAdmin && callerUser.id !== id) || !id) {
throw new NotFoundException();
}
const user = await this.usersService.findOne(id);
const updated = await this.usersService
.update(user, callerUser, updateUserDto)
.catch((e) => {
console.error(e);
if (e === UserServiceError.PasswordMismatch) {
throw new BadRequestException('Password mismatch');
} else throw new InternalServerErrorException();
});
return UserDto.fromEntity(updated);
}
@UseGuards(AuthGuard)
@Delete(':id')
@ApiOkResponse({ description: 'User deleted' })
@ApiException(() => NotFoundException, { description: 'User not found' })
async deleteUser(@Param('id') id: string, @GetUser() callerUser: User) {
if ((!callerUser.isAdmin && callerUser.id !== id) || !id) {
throw new NotFoundException();
}
await this.usersService.remove(id);
}
}

13
backend/src/users/users.module.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Module } from '@nestjs/common';
import { UsersService } from './users.service';
import { userProviders } from './user.providers';
import { UsersController } from './users.controller';
import { DatabaseModule } from '../database/database.module';
@Module({
imports: [DatabaseModule],
providers: [...userProviders, UsersService],
controllers: [UsersController],
exports: [UsersService],
})
export class UsersModule {}

99
backend/src/users/users.service.ts Normal file
View File

@@ -0,0 +1,99 @@
import { Inject, Injectable } from '@nestjs/common';
import { Repository } from 'typeorm';
import { User } from './user.entity';
import { CreateUserDto, UpdateUserDto } from './user.dto';
export enum UserServiceError {
PasswordMismatch = 'PasswordMismatch',
Unauthorized = 'Unauthorized',
UsernameRequired = 'UsernameRequired',
}
@Injectable()
export class UsersService {
constructor(
@Inject('USER_REPOSITORY')
private readonly userRepository: Repository<User>,
) {}
async findAll(): Promise<User[]> {
return this.userRepository.find();
}
async findOne(id: string): Promise<User> {
return this.userRepository.findOne({ where: { id } });
}
async findOneByName(name: string): Promise<User> {
return this.userRepository.findOne({ where: { name } });
}
async create(userCreateDto: CreateUserDto): Promise<User> {
if (!userCreateDto.name) throw UserServiceError.UsernameRequired;
const user = this.userRepository.create();
user.name = userCreateDto.name;
// TODO: Hash password
user.password = userCreateDto.password;
user.isAdmin = userCreateDto.isAdmin;
try {
user.profilePicture = Buffer.from(
userCreateDto.profilePicture.split(';base64,').pop() as string,
'base64',
);
} catch (e) {
console.error(e);
}
return this.userRepository.save(user);
}
async update(
user: User,
callerUser: User,
updateUserDto: UpdateUserDto,
): Promise<User> {
if (updateUserDto.name) user.name = updateUserDto.name;
if (updateUserDto.oldPassword !== updateUserDto.password) {
if (
updateUserDto.password !== undefined &&
updateUserDto.oldPassword !== user.password
)
throw UserServiceError.PasswordMismatch;
else if (updateUserDto.password !== undefined)
user.password = updateUserDto.password;
}
if (updateUserDto.settings) user.settings = updateUserDto.settings;
if (updateUserDto.onboardingDone)
user.onboardingDone = updateUserDto.onboardingDone;
if (updateUserDto.profilePicture) {
try {
user.profilePicture = Buffer.from(
updateUserDto.profilePicture.split(';base64,').pop() as string,
'base64',
);
} catch (e) {
console.error(e);
}
}
if (updateUserDto.isAdmin !== undefined && callerUser.isAdmin)
user.isAdmin = updateUserDto.isAdmin;
return this.userRepository.save(user);
}
async remove(id: string): Promise<void> {
await this.userRepository.delete(id);
}
async noPreviousAdmins(): Promise<boolean> {
const adminCount = await this.userRepository.count({
where: { isAdmin: true },
});
return adminCount === 0;
}
}

5
src/app.css
View File

@@ -85,7 +85,7 @@ html[data-useragent*="Tizen"] .selectable-secondary {
}
.header1 {
@apply font-medium text-lg text-secondary-300;
@apply font-semibold text-xl text-secondary-100;
}
.header2 {
@@ -96,13 +96,12 @@ html[data-useragent*="Tizen"] .selectable-secondary {
@apply font-semibold text-3xl text-secondary-100;
}
.header4 {
@apply font-semibold text-4xl text-secondary-100 tracking-wider;
}
.body {
@apply text-base text-secondary-200;
@apply font-medium text-lg text-secondary-300;
}
@media tv {

50
src/lib/apis/reiverr/reiverr-api.ts
View File

@@ -5,6 +5,8 @@ import type { Api } from '../api.interface';
import { sessions } from '../../stores/session.store';
export type ReiverrUser = components['schemas']['UserDto'];
export type CreateReiverrUser = components['schemas']['CreateUserDto'];
export type UpdateReiverrUser = components['schemas']['UpdateUserDto'];
export type ReiverrSettings = ReiverrUser['settings'];
export class ReiverrApi implements Api<paths> {
@@ -22,36 +24,40 @@ export class ReiverrApi implements Api<paths> {
});
}
// isSetupDone = async (): Promise<boolean> =>
// this.getClient()
// ?.GET('/user/isSetupDone')
// .then((res) => res.data || false) || false;
async getUser() {
const res = await this.getClient()?.GET('/user', {});
return res.data;
}
authenticate(name: string, password: string) {
return this.getClient().POST('/auth', {
body: {
name,
password
}
});
}
updateUser = (user: ReiverrUser) =>
updateUser = (id: string, user: UpdateReiverrUser) =>
this.getClient()
?.PUT('/user/{id}', {
?.PUT('/users/{id}', {
params: {
path: {
id: user.id
id
}
},
body: user
})
.then((res) => ({ user: res.data, error: res.error?.message }));
getUsers = () =>
this.getClient()
.GET('/users', {})
.then((res) => res.data);
deleteUser = (id?: string) =>
this.getClient()
?.DELETE('/users/{id}', {
params: {
path: {
id: id || get(sessions).activeSession?.id || ''
}
}
})
.then((res) => res.error?.message);
createUser = (user: CreateReiverrUser) =>
this.getClient()
?.POST('/users', {
body: user
})
.then((res) => ({ user: res.data, error: res.error?.message }));
}
export const reiverrApi = new ReiverrApi();

93
src/lib/apis/reiverr/reiverr.generated.d.ts vendored
View File

@@ -5,13 +5,14 @@
export interface paths {
"/user": {
get: operations["UserController_getProfile"];
post: operations["UserController_create"];
"/users": {
get: operations["UsersController_findAll"];
post: operations["UsersController_create"];
};
"/user/{id}": {
get: operations["UserController_findById"];
put: operations["UserController_updateUser"];
"/users/{id}": {
get: operations["UsersController_findById"];
put: operations["UsersController_update"];
delete: operations["UsersController_deleteUser"];
};
"/auth": {
post: operations["AuthController_signIn"];
@@ -68,10 +69,12 @@ export interface components {
name: string;
password: string;
isAdmin: boolean;
profilePicture?: string;
};
UpdateUserDto: {
name?: string;
password?: string;
isAdmin?: boolean;
onboardingDone?: boolean;
settings?: components["schemas"]["Settings"];
profilePicture?: string;
@@ -99,41 +102,56 @@ export type external = Record<string, never>;
export interface operations {
UserController_getProfile: {
UsersController_findAll: {
responses: {
/** @description User found */
/** @description All users found */
200: {
content: {
"application/json": components["schemas"]["UserDto"];
};
};
404: {
content: {
"application/json": {
/** @example 404 */
statusCode: number;
/** @example Not Found */
message: string;
/** @example Not Found */
error?: string;
"application/json": components["schemas"]["UserDto"][];
};
};
};
};
};
UserController_create: {
UsersController_create: {
requestBody: {
content: {
"application/json": components["schemas"]["CreateUserDto"];
};
};
responses: {
/** @description User created */
200: {
content: never;
content: {
"application/json": components["schemas"]["UserDto"];
};
};
400: {
content: {
"application/json": {
/** @example 400 */
statusCode: number;
/** @example Bad Request */
message: string;
/** @example Bad Request */
error?: string;
};
};
};
UserController_findById: {
401: {
content: {
"application/json": {
/** @example 401 */
statusCode: number;
/** @example Unauthorized */
message: string;
/** @example Unauthorized */
error?: string;
};
};
};
};
};
UsersController_findById: {
parameters: {
path: {
id: string;
@@ -160,7 +178,7 @@ export interface operations {
};
};
};
UserController_updateUser: {
UsersController_update: {
parameters: {
path: {
id: string;
@@ -192,6 +210,31 @@ export interface operations {
};
};
};
UsersController_deleteUser: {
parameters: {
path: {
id: string;
};
};
responses: {
/** @description User deleted */
200: {
content: never;
};
404: {
content: {
"application/json": {
/** @example 404 */
statusCode: number;
/** @example Not Found */
message: string;
/** @example Not Found */
error?: string;
};
};
};
};
};
AuthController_signIn: {
requestBody: {
content: {

110
src/lib/components/Dialog/EditProfileModal.svelte → src/lib/components/Dialog/CreateOrEditProfileModal.svelte
View File

@@ -3,23 +3,32 @@
import { reiverrApi, type ReiverrUser } from '../../apis/reiverr/reiverr-api';
import TextField from '../TextField.svelte';
import Button from '../Button.svelte';
import { ArrowUp, EyeClosed, EyeOpen, Upload } from 'radix-icons-svelte';
import { ArrowUp, EyeClosed, EyeOpen, Trash, Upload } from 'radix-icons-svelte';
import Container from '../../../Container.svelte';
import IconToggle from '../IconToggle.svelte';
import Tab from '../Tab/Tab.svelte';
import { useTabs } from '../Tab/Tab';
import SelectField from '../SelectField.svelte';
import ProfileIcon from '../ProfileIcon.svelte';
import { profilePictures } from '../../profile-pictures';
import { modalStack } from '../Modal/modal.store';
import { getRandomProfilePicture, profilePictures } from '../../profile-pictures';
import { createModal, modalStack } from '../Modal/modal.store';
import { user as userStore } from '../../stores/user.store';
import ConfirmDialog from './ConfirmDialog.svelte';
import { sessions } from '../../stores/session.store';
import { navigate } from '../StackRouter/StackRouter';
import Toggle from '../Toggle.svelte';
import { get } from 'svelte/store';
enum Tabs {
EditProfile,
ProfilePictures
}
export let user: ReiverrUser;
export let modalId: symbol;
export let user: ReiverrUser | undefined = undefined;
export let createNew = false;
export let admin = createNew;
const tab = useTabs(Tabs.EditProfile);
@@ -28,8 +37,9 @@
let oldPasswordVisible = false;
let newPassword = '';
let newPasswordVisible = false;
let isAdmin = user?.isAdmin || false;
let profilePictureFiles: FileList;
let profilePictureBase64: string = user.profilePicture;
let profilePictureBase64: string = user?.profilePicture ?? getRandomProfilePicture() ?? '';
let profilePictureTitle: string;
let profilePictureFilesInput: HTMLInputElement;
$: {
@@ -75,9 +85,11 @@
}
$: stale =
(name !== user.name && name !== '') ||
(name !== user?.name && name !== '') ||
oldPassword !== newPassword ||
profilePictureBase64 !== user.profilePicture;
profilePictureBase64 !== user?.profilePicture ||
isAdmin !== user?.isAdmin;
$: complete = name !== '';
let errorMessage = '';
function setProfilePicture(image: string) {
@@ -86,14 +98,30 @@
}
async function save() {
const error = await userStore.updateUser((u) => ({
const id = user?.id;
if (!id) return;
const error =
id === get(userStore)?.id
? await userStore.updateUser((u) => ({
...u,
name,
password: newPassword,
oldPassword,
profilePicture: profilePictureBase64
profilePicture: profilePictureBase64,
isAdmin
// password: newPassword
}));
}))
: (
await reiverrApi.updateUser(id, {
name,
password: newPassword,
oldPassword,
profilePicture: profilePictureBase64,
isAdmin
})
).error;
if (error) {
errorMessage = error;
@@ -101,15 +129,46 @@
modalStack.closeTopmost();
}
}
async function create() {
const { error } = await reiverrApi.createUser({
name,
password: newPassword,
isAdmin,
profilePicture: profilePictureBase64
});
if (error) {
errorMessage = error;
} else {
modalStack.closeTopmost();
}
}
async function handleDeleteAccount() {
const error = await reiverrApi.deleteUser(user?.id);
if (error) {
errorMessage = error;
} else {
modalStack.close(modalId);
if (!admin) {
sessions.removeSession();
navigate('/');
}
}
}
</script>
<Dialog class="grid" size={'dynamic'}>
<Tab {...tab} tab={Tabs.EditProfile} class="space-y-4 max-w-lg">
<h1 class="header2">Edit Profile</h1>
<h1 class="header2">
{createNew ? 'Create Account' : 'Edit Profile'}
</h1>
<TextField bind:value={name}>name</TextField>
<SelectField value={profilePictureTitle} on:clickOrSelect={() => tab.set(Tabs.ProfilePictures)}>
Profile Picture
</SelectField>
{#if !createNew}
<Container direction="horizontal" class="flex space-x-4 items-end">
<TextField
class="flex-1"
@@ -123,6 +182,7 @@
icon={oldPasswordVisible ? EyeOpen : EyeClosed}
/>
</Container>
{/if}
<Container direction="horizontal" class="flex space-x-4 items-end">
<TextField
class="flex-1"
@@ -136,10 +196,32 @@
icon={newPasswordVisible ? EyeOpen : EyeClosed}
/>
</Container>
{#if isAdmin || admin}
<div class="flex justify-between">
<label>Admin</label>
<Toggle bind:checked={isAdmin}>Admin</Toggle>
</div>
{/if}
{#if errorMessage}
<div class="text-red-500 mb-4">{errorMessage}</div>
{/if}
<Button type="primary-dark" disabled={!stale} action={save} class="mt-8">Save</Button>
<Container direction="horizontal" class="flex space-x-4 pt-4 *:flex-1">
{#if !createNew}
<Button type="primary-dark" disabled={!stale} action={save}>Save</Button>
<Button
type="primary-dark"
icon={Trash}
on:clickOrSelect={() =>
createModal(ConfirmDialog, {
header: 'Delete Account',
body: 'Are you sure you want to delete your account?',
confirm: handleDeleteAccount
})}>Delete Account</Button
>
{:else}
<Button type="primary-dark" disabled={!complete} action={create}>Create</Button>
{/if}
</Container>
</Tab>
<Tab
@@ -204,10 +286,6 @@
accept="image/png, image/jpeg"
class="hidden"
/>
<!-- <Container>-->
<!-- Select File-->
<!-- <input type="file" bind:files={profilePictureFiles} accept="image/png, image/jpeg" />-->
<!-- </Container>-->
</Container>
</Tab>
</Dialog>

1
src/lib/components/Integrations/JellyfinIntegration.svelte
View File

@@ -110,6 +110,7 @@
<SelectField
value={jellyfinUser?.Name || 'Select User'}
on:clickOrSelect={() => dispatch('click-user', { user: jellyfinUser, users })}
class="mb-4"
>
User
</SelectField>

2
src/lib/components/Login.svelte
View File

@@ -41,7 +41,7 @@
<Container class="flex flex-col" focusOnMount>
<h1 class="header2 w-full mb-2">Login to Reiverr</h1>
<div class="header1 mb-4">
<div class="body mb-4">
If this is your first time logging in, a new account will be created based on your credentials.
</div>

5
src/lib/components/SelectField.svelte
View File

@@ -27,12 +27,13 @@
<Container
class={classNames(
'flex items-center justify-between bg-primary-900 rounded-xl px-6 py-2.5 mb-4 font-medium',
'flex items-center justify-between bg-primary-900 rounded-xl px-6 py-2.5 font-medium',
'border-2 border-transparent focus:border-primary-500 hover:border-primary-500 group',
{
'cursor-pointer': !_disabled,
'cursor-not-allowed pointer-events-none opacity-40': _disabled
}
},
$$restProps.class
)}
on:clickOrSelect={handleClickOrSelect}
let:hasFocus

97
src/lib/pages/ManagePage.svelte
View File

@@ -13,15 +13,16 @@
import JellyfinIntegrationUsersDialog from '../components/Integrations/JellyfinIntegrationUsersDialog.svelte';
import { tmdbApi } from '../apis/tmdb/tmdb-api';
import SelectField from '../components/SelectField.svelte';
import { ArrowRight, Exit, Pencil1, Pencil2, Trash } from 'radix-icons-svelte';
import { ArrowRight, Exit, Pencil1, Pencil2, Plus, Trash } from 'radix-icons-svelte';
import TmdbIntegrationConnectDialog from '../components/Integrations/TmdbIntegrationConnectDialog.svelte';
import { createModal } from '../components/Modal/modal.store';
import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
import { user } from '../stores/user.store';
import { sessions } from '../stores/session.store';
import TextField from '../components/TextField.svelte';
import EditProfileModal from '../components/Dialog/EditProfileModal.svelte';
import EditProfileModal from '../components/Dialog/CreateOrEditProfileModal.svelte';
import { scrollIntoView } from '../selectable';
import Panel from '../components/Panel.svelte';
import { reiverrApi } from '../apis/reiverr/reiverr-api';
enum Tabs {
Interface,
@@ -48,21 +49,7 @@
let lastKey = '';
let tizenMediaKey = '';
$: tmdbAccount = $user?.settings.tmdb.userId ? tmdbApi.getAccountDetails() : undefined;
// onMount(() => {
// if (isTizen()) {
// const myMediaKeyChangeListener = {
// onpressed: function (key: string) {
// console.log('Pressed key: ' + key);
// tizenMediaKey = key;
// }
// };
//
// // eslint-disable-next-line no-undef
// tizen?.tvinputdevice?.registerKey?.('MediaPlayPause');
// (tizen as any)?.mediakey?.setMediaKeyEventListener?.(myMediaKeyChangeListener);
// }
// });
$: users = $user?.isAdmin ? reiverrApi.getUsers() : undefined;
async function handleDisconnectTmdb() {
return user.updateUser((prev) => ({
@@ -124,6 +111,21 @@
function handleLogOut() {
sessions.removeSession();
}
// onMount(() => {
// if (isTizen()) {
// const myMediaKeyChangeListener = {
// onpressed: function (key: string) {
// console.log('Pressed key: ' + key);
// tizenMediaKey = key;
// }
// };
//
// // eslint-disable-next-line no-undef
// tizen?.tvinputdevice?.registerKey?.('MediaPlayPause');
// (tizen as any)?.mediakey?.setMediaKeyEventListener?.(myMediaKeyChangeListener);
// }
// });
</script>
<svelte:window
@@ -165,7 +167,7 @@
'text-primary-500': hasFocus
})}
>
Account
Accounts
</span>
</Container>
<Container
@@ -215,9 +217,10 @@
<Tab {...tab} tab={Tabs.Account} class="space-y-16">
<div>
<h1 class="font-semibold text-2xl text-secondary-100 mb-8">Profile</h1>
<Container class="bg-primary-800 rounded-xl p-8" on:enter={scrollIntoView({ top: 9999 })}>
<h1 class="header1 mb-4">My Profile</h1>
<SelectField
class="mb-4"
value={$user?.name || ''}
on:clickOrSelect={() => {
const u = $user;
@@ -233,6 +236,46 @@
<Container direction="horizontal" class="flex space-x-4">
<Button type="primary-dark" icon={Exit} on:clickOrSelect={handleLogOut}>Log Out</Button>
</Container>
{#await users then users}
{#if users?.length}
<div class="mt-8">
<h1 class="header1 mb-4">Server Accounts</h1>
<Container class="grid grid-cols-2 gap-4" direction="grid" gridCols={2}>
{#each users as user}
<SelectField
value={user?.name || ''}
on:clickOrSelect={() => {
createModal(EditProfileModal, {
user,
admin: true
});
}}
>
{user.isAdmin ? 'Admin' : 'User'}
<Pencil2
slot="icon"
let:size
let:iconClass
{size}
class={classNames(iconClass)}
/>
</SelectField>
{/each}
<SelectField
value="New Account"
on:clickOrSelect={() => {
createModal(EditProfileModal, {
createNew: true
});
}}
>
Create
<Plus slot="icon" let:size let:iconClass {size} class={classNames(iconClass)} />
</SelectField>
</Container>
</div>
{/if}
{/await}
</Container>
</div>
@@ -244,7 +287,7 @@
class="bg-primary-800 rounded-xl p-8"
on:enter={scrollIntoView({ vertical: 64 })}
>
<h1 class="mb-4 header2">Sonarr</h1>
<h1 class="mb-4 header1">Sonarr</h1>
<SonarrIntegration
on:change={({ detail }) => {
sonarrBaseUrl = detail.baseUrl;
@@ -263,7 +306,7 @@
class="bg-primary-800 rounded-xl p-8"
on:enter={scrollIntoView({ vertical: 64 })}
>
<h1 class="mb-4 header2">Radarr</h1>
<h1 class="mb-4 header1">Radarr</h1>
<RadarrIntegration
on:change={({ detail }) => {
radarrBaseUrl = detail.baseUrl;
@@ -284,10 +327,14 @@
class="bg-primary-800 rounded-xl p-8"
on:enter={scrollIntoView({ vertical: 64 })}
>
<h1 class="mb-4 header2">Tmdb Account</h1>
<h1 class="mb-4 header1">Tmdb Account</h1>
{#await tmdbAccount then tmdbAccount}
{#if tmdbAccount}
<SelectField value={tmdbAccount.username || ''} action={handleDisconnectTmdb}>
<SelectField
value={tmdbAccount.username || ''}
action={handleDisconnectTmdb}
class="mb-4"
>
Connected to
<Trash
slot="icon"
@@ -314,7 +361,7 @@
class="bg-primary-800 rounded-xl p-8"
on:enter={scrollIntoView({ vertical: 64 })}
>
<h1 class="mb-4 header2">Jellyfin</h1>
<h1 class="mb-4 header1">Jellyfin</h1>
<JellyfinIntegration
bind:jellyfinUser
on:change={({ detail }) => {

2
src/lib/pages/OnboardingPage.svelte
View File

@@ -264,6 +264,7 @@
{#await connectedTmdbAccount then account}
{#if account}
<SelectField
class="mb-4"
value={account.username || ''}
on:clickOrSelect={() => {
tab.set(Tabs.TmdbConnect);
@@ -347,6 +348,7 @@
<SelectField
value={jellyfinUser?.Name || 'Select User'}
on:clickOrSelect={() => tab.set(Tabs.SelectUser)}
class="mb-4"
>
User
</SelectField>

4
src/lib/pages/UsersPage.svelte
View File

@@ -4,9 +4,7 @@
import { reiverrApi } from '../apis/reiverr/reiverr-api';
import Container from '../../Container.svelte';
import Button from '../components/Button.svelte';
import { TMDB_PROFILE_LARGE } from '../constants';
import classNames from 'classnames';
import AnimateScale from '../components/AnimateScale.svelte';
import { navigate } from '../components/StackRouter/StackRouter';
import { createModal } from '../components/Modal/modal.store';
import AddUserDialog from '../components/Dialog/AddUserDialog.svelte';
@@ -22,7 +20,7 @@
sessions.map(async (session) =>
reiverrApi
.getClient(session.baseUrl, session.token)
.GET('/user')
.GET('/users/{id}', { params: { path: { id: session.id } } })
.then((r) => ({ session, user: r.data }))
)
).then((us) => us.filter((u) => !!u.user));

5
src/lib/profile-pictures.ts
View File

File diff suppressed because one or more lines are too long

4
src/lib/stores/session.store.ts
View File

@@ -54,10 +54,10 @@ function useSessions() {
function removeSession(_session?: Session) {
sessions.update((s) => {
const session = _session || s.activeSession;
const sessions = s.sessions.filter((s) => s !== session);
const sessions = s.sessions.filter((s) => s.id !== session?.id);
return {
sessions,
activeSession: s.activeSession === session ? undefined : s.activeSession
activeSession: s.activeSession?.id === session?.id ? undefined : s.activeSession
};
});
}

6
src/lib/stores/user.store.ts
View File

@@ -20,8 +20,8 @@ function useUser() {
lastActiveSession = activeSession;
const user = await axios
.get<
operations['UserController_getProfile']['responses']['200']['content']['application/json']
>(activeSession.baseUrl + '/api/user', {
operations['UsersController_findById']['responses']['200']['content']['application/json']
>(activeSession.baseUrl + '/api/users/' + activeSession.id, {
headers: {
Authorization: 'Bearer ' + activeSession.token
}
@@ -38,7 +38,7 @@ function useUser() {
if (!user) return;
const updated = updateFn(user);
const { user: update, error } = await reiverrApi.updateUser(updated);
const { user: update, error } = await reiverrApi.updateUser(updated.id, updated);
if (update) {
userStore.set(update);