From e96c24a669b427edc0cf674b902b47cec5cda3bb Mon Sep 17 00:00:00 2001 From: rubikscraft Date: Sun, 4 Sep 2022 15:19:23 +0200 Subject: [PATCH] give image delete result a neater ui --- .../routes/api/experiment/experiment.controller.ts | 5 +++-- backend/src/routes/image/image-manage.controller.ts | 11 ++++++----- .../app/routes/errors/delete-failure.component.ts | 12 ++++++++++++ .../app/routes/errors/delete-success.component.ts | 9 +++++++++ .../src/app/routes/errors/errors.routing.module.ts | 10 ++++++++++ 5 files changed, 40 insertions(+), 7 deletions(-) create mode 100644 frontend/src/app/routes/errors/delete-failure.component.ts create mode 100644 frontend/src/app/routes/errors/delete-success.component.ts diff --git a/backend/src/routes/api/experiment/experiment.controller.ts b/backend/src/routes/api/experiment/experiment.controller.ts index 3dd768e..0c7b27e 100644 --- a/backend/src/routes/api/experiment/experiment.controller.ts +++ b/backend/src/routes/api/experiment/experiment.controller.ts @@ -13,9 +13,10 @@ export class ExperimentController { @Returns(UserInfoResponse) async testRoute( @Request() req: AuthFastifyRequest, - @Response() res: FastifyReply, + @Response({passthrough: true}) res: FastifyReply, ): Promise { - res.header('Location', '/penis'); + res.header('Location', '/error/delete-success'); + res.code(302); return req.user; } } diff --git a/backend/src/routes/image/image-manage.controller.ts b/backend/src/routes/image/image-manage.controller.ts index 4ed7c51..972599a 100644 --- a/backend/src/routes/image/image-manage.controller.ts +++ b/backend/src/routes/image/image-manage.controller.ts @@ -112,12 +112,13 @@ export class ImageManageController { ): Promise { const image = await this.imagesService.deleteWithKey(params.id, params.key); if (HasFailed(image)) { - res.code(image.getCode()); - res.type('text/html'); - return `

Error

${image.getReason()}

`; + res.header('Location', '/error/delete-failure'); + res.code(302); + return 'Failed to delete image'; } - res.type('text/html'); - return '

Image deleted

'; + res.header('Location', '/error/delete-success'); + res.code(302); + return 'Successsfully deleted image'; } } diff --git a/frontend/src/app/routes/errors/delete-failure.component.ts b/frontend/src/app/routes/errors/delete-failure.component.ts new file mode 100644 index 0000000..d1755f6 --- /dev/null +++ b/frontend/src/app/routes/errors/delete-failure.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + template: ` +

Failed to delete image!

+

+ It has most likely already been deleted, if this is not the case please + report it as a bug. +

+ `, +}) +export class ImageDeleteFailureComponent {} diff --git a/frontend/src/app/routes/errors/delete-success.component.ts b/frontend/src/app/routes/errors/delete-success.component.ts new file mode 100644 index 0000000..16e6740 --- /dev/null +++ b/frontend/src/app/routes/errors/delete-success.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + template: ` +

Image Successfully Deleted!

+

Thank you for using Picsur.

+ `, +}) +export class ImageDeleteSuccessComponent {} diff --git a/frontend/src/app/routes/errors/errors.routing.module.ts b/frontend/src/app/routes/errors/errors.routing.module.ts index b0d887a..603a52d 100644 --- a/frontend/src/app/routes/errors/errors.routing.module.ts +++ b/frontend/src/app/routes/errors/errors.routing.module.ts @@ -3,6 +3,8 @@ import { RouterModule } from '@angular/router'; import { PRoutes } from 'src/app/models/dto/picsur-routes.dto'; import { E401Component } from './401.component'; import { E404Component } from './404.component'; +import { ImageDeleteFailureComponent } from './delete-failure.component'; +import { ImageDeleteSuccessComponent } from './delete-success.component'; const routes: PRoutes = [ { @@ -13,6 +15,14 @@ const routes: PRoutes = [ path: '401', component: E401Component, }, + { + path: 'delete-success', + component: ImageDeleteSuccessComponent, + }, + { + path: 'delete-failure', + component: ImageDeleteFailureComponent, + }, ]; @NgModule({