FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added some style

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-04 00:54:23 +02:00
parent 82c9699e17
commit 54607aba58
13 changed files with 195 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/app-main/AppMainElement.ts
View File

@@ -124,11 +124,8 @@ class AppMainElement extends HTMLElement {
const _modalElement = document.createElement(element); const _modalElement = document.createElement(element);
const _divEl = document.createElement("div"); const _divEl = document.createElement("div");
_modalElement.setAttribute("data-target", "app-modal.modalElement"); _modalElement.setAttribute("data-target", "app-modal.modalElement");
_modalElement.setAttribute(
"data-action",
"click:app-main#preventClosing"
);
_divEl.setAttribute("data-target", "app-modal.modalContent"); _divEl.setAttribute("data-target", "app-modal.modalContent");
_divEl.setAttribute("data-action", "click:app-main#preventClosing");
_divEl.appendChild(_modalElement); _divEl.appendChild(_modalElement);
return _divEl; return _divEl;
}; };

19
src/core/store/AuthStore.ts
View File

@@ -1,5 +1,6 @@
import { AppMainElement } from "components/"; import { AppMainElement } from "components/";
import { AppService } from "core/services"; import { AppService } from "core/services";
import { isTrue } from "core/utils";
import { AuthService } from "services/"; import { AuthService } from "services/";
class AuthStore { class AuthStore {
@@ -13,8 +14,10 @@ class AuthStore {
private appMain: AppMainElement, private appMain: AppMainElement,
private appService: AppService private appService: AppService
) { ) {
this.token = localStorage.getItem("token"); const _token = localStorage.getItem("token");
if (_token) this.token = _token;
this.authService = new AuthService(this.appService); this.authService = new AuthService(this.appService);
this.checkToken(_token);
} }
get token(): string { get token(): string {
@@ -26,6 +29,7 @@ class AuthStore {
set token(token: string) { set token(token: string) {
const { _token } = this; const { _token } = this;
const _changed = token != _token; const _changed = token != _token;
console.log(token);
if (_changed) { if (_changed) {
this._token = token; this._token = token;
localStorage.setItem("token", token); localStorage.setItem("token", token);
@@ -41,6 +45,19 @@ class AuthStore {
this._userDetails = userDetails; this._userDetails = userDetails;
} }
checkToken = async (token: string) => {
try {
const response = await this.authService.checkToken({ token });
if (!(response && response.valid)) {
this.token = null;
this.appMain.routerService.goTo("/token-expired");
}
} catch (err) {
this.token = null;
this.appMain.routerService.goTo("/token-expired");
}
};
userLogin = async (formObject) => { userLogin = async (formObject) => {
try { try {
const response = await this.authService.login(formObject); const response = await this.authService.login(formObject);

9
src/index.html
View File

@@ -7,6 +7,15 @@
<title>Wallet Web</title> <title>Wallet Web</title>
</head> </head>
<body> <body>
<style>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #303030;
color: #ffffff;
}
</style>
<app-shadow></app-shadow> <app-shadow></app-shadow>
</body> </body>
</html> </html>

5
src/layouts/menu-layout/MenuLayoutElement.ts
View File

@@ -1,4 +1,4 @@
import { controller } from "@github/catalyst"; import { controller, target } from "@github/catalyst";
import { closest } from "core/utils"; import { closest } from "core/utils";
import { html, TemplateResult } from "@github/jtml"; import { html, TemplateResult } from "@github/jtml";
import { BaseLayoutElement } from "common/layouts"; import { BaseLayoutElement } from "common/layouts";
@@ -7,6 +7,7 @@ import { AppMainElement } from "components/";
@controller @controller
class MenuLayoutElement extends BaseLayoutElement { class MenuLayoutElement extends BaseLayoutElement {
@closest appMain: AppMainElement; @closest appMain: AppMainElement;
@target appPage: HTMLDivElement;
constructor() { constructor() {
super(); super();
@@ -38,8 +39,10 @@ class MenuLayoutElement extends BaseLayoutElement {
render = (): TemplateResult => { render = (): TemplateResult => {
const _isAuth = this.isAuth; const _isAuth = this.isAuth;
return html` return html`
<div data-target="menu-layout.appPage">
${_isAuth ? html`<app-menu></app-menu>` : html``} ${_isAuth ? html`<app-menu></app-menu>` : html``}
<app-slot data-target="menu-layout.appSlot"></app-slot> <app-slot data-target="menu-layout.appSlot"></app-slot>
</div>
`; `;
}; };
} }

7
src/services/AuthService.ts
View File

@@ -10,6 +10,13 @@ class PingService extends BaseService {
register = (data?: Object, headers?: HeadersInit) => { register = (data?: Object, headers?: HeadersInit) => {
return this.appService.post(this.endpoint + "/register", data, headers); return this.appService.post(this.endpoint + "/register", data, headers);
}; };
checkToken = (params?: Object, headers?: HeadersInit) => {
return this.appService.get(
this.endpoint + "/check-token",
params,
headers
);
};
} }
export default PingService; export default PingService;

90
src/styles/core/colors.scss Normal file
View File

@@ -0,0 +1,90 @@
$white: #ffffff;
$black: #181818;
$gray-01: #ebeaea;
$gray-02: #d6d4d4;
$gray-03: #c5c5c5;
$gray-04: #aeacac;
$gray-05: #979696;
$gray-06: #8f8f8f;
$gray-07: #7e7e7e;
$gray-08: #6b6b6b;
$gray-09: #4d4d4d;
$gray-10: #303030;
$red-01: #fcb0b0;
$red-02: #f88282;
$red-03: #ea5656;
$red-04: #df2424;
$red-05: #d60909;
$red-06: #bd0000;
$red-07: #a61010;
$red-08: #970202;
$red-09: #840c0c;
$red-10: #630101;
$orange-01: #fecc91;
$orange-02: #fdc17b;
$orange-03: #fbb563;
$orange-04: #f6a13c;
$orange-05: #f6a13c;
$orange-06: #ff971e;
$orange-07: #fb9145;
$orange-08: #f68533;
$orange-09: #e96607;
$orange-10: #d4620f;
$yellow-01: #fff59e;
$yellow-02: #f8eb7e;
$yellow-03: #feed56;
$yellow-04: #fce93c;
$yellow-05: #f8e221;
$yellow-06: #edd606;
$yellow-07: #e9d521;
$yellow-08: #e5d114;
$yellow-09: #dec802;
$yellow-10: #c1ae00;
$green-01: #adff87;
$green-02: #7ffd43;
$green-03: #7ffd43;
$green-04: #64f91e;
$green-05: #43eb0c;
$green-06: #53d914;
$green-07: #44c307;
$green-08: #3caf06;
$green-09: #389c08;
$green-10: #287c00;
$blue-01: #9bedff;
$blue-02: #61e3ff;
$blue-03: #1bd4fd;
$blue-04: #09c1ea;
$blue-05: #08b1d7;
$blue-06: #2c80ff;
$blue-07: #0a62e7;
$blue-08: #004fc7;
$blue-09: #0549b0;
$blue-10: #043581;
$purple-01: #cab1ff;
$purple-02: #b295f0;
$purple-03: #a47df8;
$purple-04: #7f49f2;
$purple-05: #6f2cff;
$purple-06: #4e0dd7;
$purple-07: #4e0dd7;
$purple-08: #3a0a9f;
$purple-09: #2b0679;
$purple-10: #210362;
$pink-01: #fda5ff;
$pink-02: #f87cfb;
$pink-03: #f151f4;
$pink-04: #ea10ee;
$pink-05: #d213d6;
$pink-06: #be07c1;
$pink-07: #a40fa7;
$pink-08: #97069a;
$pink-09: #820c85;
$pink-10: #600362;

2
src/styles/core/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@import "./colors.scss";
@import "./main.scss";

0
src/styles/core/main.scss Normal file
View File

2
src/styles/main.scss
View File

@@ -1,3 +1,5 @@
@import "./core//index.scss";
@import "./thorn/index.scss"; @import "./thorn/index.scss";
@import "./menu-item/index.scss";
@import "./sidebar/index.scss"; @import "./sidebar/index.scss";
@import "./modal/index.scss"; @import "./modal/index.scss";

1
src/styles/menu-item/index.scss Normal file
View File

@@ -0,0 +1 @@
@import "./menu-item.scss"

24
src/styles/menu-item/menu-item.scss Normal file
View File

@@ -0,0 +1,24 @@
menu-item {
[data-target="menu-item.itemEl"] {
app-link {
[data-target="app-link.main"] {
width: 100%;
background-color: $black;
color: $gray-01;
border-radius: 0;
padding: 15px 0;
&:hover {
color: $white;
background-color: $gray-10;
}
}
}
&.selected {
app-link {
[data-target="app-link.main"] {
background-color: $gray-09;
}
}
}
}
}

16
src/styles/modal/modal.scss
View File

@@ -11,14 +11,20 @@ app-modal {
overflow-y: auto; overflow-y: auto;
[data-target="app-modal.modalContent"] { [data-target="app-modal.modalContent"] {
position: absolute;
z-index: 1005; z-index: 1005;
top: 5%; width: 960px;
width: 1080px; min-height: 320px;
max-height: 560px;
padding-bottom: 10px; padding-bottom: 10px;
margin: 25px auto; margin: 0;
background: #ffffff; top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: $gray-08;
box-shadow: 1px 1px 5px -5px #868686; box-shadow: 1px 1px 5px -5px #868686;
border-radius: 0.5em; border-radius: 3px;
} }
} }
} }

54
src/styles/sidebar/sidebar.scss
View File

@@ -1,47 +1,29 @@
menu-layout {
[data-target="menu-layout.appPage"] {
display: grid;
width: 100%;
min-height: 100vh;
grid-template-columns: 301px auto;
grid-template-areas: "sidebar content";
app-menu { app-menu {
[data-target="app-menu.sidebar"] { [data-target="app-menu.sidebar"] {
margin: 0; grid-area: sidebar;
padding: 0; position: absolute;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
top: 0; top: 0;
bottom: 0;
left: 0; left: 0;
width: 301px;
menu-item { border-right: 1px solid $gray-08;
[data-target="menu-item.itemEl"] { background-color: $black;
app-link {
[data-target="app-link.main"] {
width: 100%;
height: 25px;
background-color: #828282;
color: #d5d5d5;
border-radius: 0;
padding-bottom: 25px;
margin: 1px auto;
&:hover {
background-color: #82878a;
}
}
}
&.selected {
app-link {
[data-target="app-link.main"] {
color: #1a1a1a;
background-color: #6e838d;
}
}
}
}
}
} }
} }
app-slot { app-slot {
[data-target="base-layout.content"] { [data-target="base-layout.content"] {
margin-left: 200px; grid-area: content;
padding: 1px 16px; margin: 15px;
}
}
} }
} }