-
+
@@ -57,6 +60,8 @@ init()
display: grid;
grid-template-rows: toRem(85) 1fr max-content;
flex: 1;
+ max-width: var(--large-page);
+ margin: auto;
@include respond-to(small) {
grid-template-rows: max-content 1fr max-content;
diff --git a/src/api/api.ts b/src/api/api.ts
new file mode 100644
index 0000000..897fa9e
--- /dev/null
+++ b/src/api/api.ts
@@ -0,0 +1,8 @@
+import { config } from '@/config'
+import { JsonApiClient } from '@distributedlab/jac'
+import { attachErrorHandler, attachCaseConverter } from './apiInterceptors'
+
+export const api = new JsonApiClient(
+ { baseUrl: config.API_URL, credentials: 'include' },
+ [{ error: attachErrorHandler }, { response: attachCaseConverter }],
+)
diff --git a/src/api/apiInterceptors.ts b/src/api/apiInterceptors.ts
new file mode 100644
index 0000000..0a2b5d7
--- /dev/null
+++ b/src/api/apiInterceptors.ts
@@ -0,0 +1,48 @@
+import {
+ HTTP_STATUS_CODES,
+ JsonApiResponseErrors,
+ JsonApiRecord,
+} from '@distributedlab/jac'
+import { errors } from '@/errors'
+import { FetcherResponse } from '@distributedlab/fetcher'
+import { camelizeKeys } from 'humps'
+
+export const attachErrorHandler = async (
+ response: FetcherResponse
,
+) => {
+ const isUnauthorized = response?.status === HTTP_STATUS_CODES.UNAUTHORIZED
+
+ if (!isUnauthorized) {
+ switch (response?.status) {
+ case HTTP_STATUS_CODES.METHOD_NOT_ALLOWED:
+ throw errors.MethodNotAllowed
+
+ case HTTP_STATUS_CODES.BAD_REQUEST:
+ throw errors.BadRequestError
+
+ case HTTP_STATUS_CODES.CONFLICT:
+ throw errors.ConflictError
+
+ case HTTP_STATUS_CODES.UNAUTHORIZED:
+ throw errors.UnauthorizedError
+
+ case HTTP_STATUS_CODES.FORBIDDEN:
+ throw errors.ForbiddenError
+
+ case HTTP_STATUS_CODES.INTERNAL_SERVER_ERROR:
+ throw errors.InternalServerError
+
+ default:
+ throw errors.RuntimeError
+ }
+ }
+ throw errors.TokenExpiredError
+}
+
+export const attachCaseConverter = (
+ response: FetcherResponse,
+) => {
+ return new Promise>(resolve => {
+ resolve(camelizeKeys(response) as FetcherResponse)
+ })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..3318fdb
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1 @@
+export * from './api'
diff --git a/src/common/AppLogo.vue b/src/common/AppLogo.vue
index cf09433..750e61f 100644
--- a/src/common/AppLogo.vue
+++ b/src/common/AppLogo.vue
@@ -2,10 +2,10 @@
-
+
@@ -18,6 +18,11 @@
position: relative;
}
+.app-logo__img {
+ max-width: toRem(60);
+ max-height: toRem(60);
+}
+
.app-logo__link {
position: absolute;
top: 0;
diff --git a/src/common/AppNavbar.vue b/src/common/AppNavbar.vue
index 6f27881..86eb8cd 100644
--- a/src/common/AppNavbar.vue
+++ b/src/common/AppNavbar.vue
@@ -5,15 +5,8 @@
-
-
diff --git a/src/common/Modal.vue b/src/common/Modal.vue
index c0485bd..7e63c7d 100644
--- a/src/common/Modal.vue
+++ b/src/common/Modal.vue
@@ -69,7 +69,8 @@ $z-index-local: 100;
align-items: center;
justify-content: center;
position: relative;
- height: auto;
+ height: 100%;
+ width: 100%;
max-width: var(--max-width);
}
diff --git a/src/common/Optionitem.vue b/src/common/Optionitem.vue
new file mode 100644
index 0000000..ad2bd4c
--- /dev/null
+++ b/src/common/Optionitem.vue
@@ -0,0 +1,34 @@
+