Добавил скелетон для страниц входа и регистрации

frontend-park-mail-ru · Mar 22, 2024 · a2ec1f6 · a2ec1f6
1 parent add7677
commit a2ec1f6
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 9 deletions.
diff --git a/public/src/components/Background/Background.sass b/public/src/components/Background/Background.sass
@@ -7,6 +7,7 @@
 	display: grid
 	grid-template-areas: "stack"
 	overflow: hidden
+	z-index: -1
 
 	.parallax-bg
 		z-index: -2

diff --git a/public/src/modules/router.tsx b/public/src/modules/router.tsx
@@ -12,6 +12,7 @@ import NotesPageSkeleton from "../pages/Notes/Skeleton";
 import {AppUserStore, UserActions, UserStoreState} from "./stores/UserStore";
 import {AppDispatcher} from "./dispatcher";
 import {AppNotesStore} from "./stores/NotesStore";
+import AuthPageSkeleton from "../pages/Auth/Skeleton";
 
 type routerState = {
     currPage: {new(): Component<any, any> }
@@ -24,6 +25,29 @@ type RouterMapValue = {
     skeleton: {new(): Component<any, any> }
 }
 
+const AuthPageLoader = async () => {
+    const p = new Promise((resolve, reject) => {
+        let isAuth = undefined;
+        const callback = (state: UserStoreState) => {
+            isAuth = state.isAuth;
+
+            AppUserStore.UnSubscribeToStore(callback);
+
+            if (isAuth) {
+                AppRouter.go("/")
+                reject()
+            } else {
+                resolve(null)
+            }
+        }
+
+        AppUserStore.SubscribeToStore(callback);
+        AppDispatcher.dispatch(UserActions.CHECK_USER)
+    })
+
+    return await p;
+}
+
 const NotesLoader = async () => {
     const p = new Promise((resolve, reject) => {
         let isAuth = undefined;
@@ -75,9 +99,9 @@ export class Router extends ScReact.Component<any, routerState> {
 
     private initPages = () => {
         this.pages['/'] = {page: HomePage, pageProps: {}}
-        this.pages['/login'] = {page: AuthPage, pageProps: {needAuth: false}}
-        this.pages['/register'] = {page: AuthPage, pageProps: {needAuth: false}}
-        this.pages['/notes'] = {page: NotesPage, pageProps: {needAuth: true}, loader: NotesLoader, skeleton: NotesPageSkeleton}
+        this.pages['/login'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton}
+        this.pages['/register'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton}
+        this.pages['/notes'] = {page: NotesPage, loader: NotesLoader, skeleton: NotesPageSkeleton}
     }
 
     public go(path: string): void {
@@ -104,17 +128,16 @@ export class Router extends ScReact.Component<any, routerState> {
                 currPage: page.skeleton
             }));
 
-
             page.loader().then((props) => {
-                console.log(props)
-
                 this.setState(s => ({
                     ...s,
                     currPage: page.page,
                     PageProps: props
                 }));
 
             }).catch(() => {
+
+                // TODO
                 // this.setState(s => ({
                 //     ...s,
                 //     currPage: ErrorPage,

diff --git a/public/src/pages/Auth/Skeleton/index.tsx b/public/src/pages/Auth/Skeleton/index.tsx
@@ -0,0 +1,16 @@
+import {ScReact} from "@veglem/screact";
+import "./style.sass"
+
+class AuthPageSkeleton extends ScReact.Component<any, any> {
+    render() {
+        return (
+            <div className="auth-page-skeleton-wrapper">
+                <div className="auth-form-container-skeleton">
+                    <div className="auth-form-skeleton"></div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default AuthPageSkeleton
diff --git a/public/src/pages/Auth/Skeleton/style.sass b/public/src/pages/Auth/Skeleton/style.sass
@@ -0,0 +1,38 @@
+.auth-page-skeleton-wrapper
+	width: 100%
+	height: 100vh
+	display: flex
+	justify-content: center
+	align-items: center
+
+	.auth-form-container-skeleton
+		position: relative
+
+		.auth-form-skeleton
+			width: 768px
+			height: 500px
+			background: rgba(64, 64, 64, .15)
+			border: 2px solid rgba(255, 255, 255, .3)
+			backdrop-filter: blur(25px)
+			border-radius: 30px
+			box-shadow: 0 0 15px rgba(0,0,0,.35)
+			z-index: 10
+			position: relative
+
+		&::before, &::after
+			width: 300px
+			height: 300px
+			position: absolute
+			border-radius: 50%
+			content: ''
+			z-index: 1
+
+		&:before
+			background: linear-gradient(#9b22ea, #bf23f6)
+			top: -100px
+			left: -100px
+
+		&:after
+			background: linear-gradient(#ff512f, #f09819)
+			bottom: -100px
+			right: -100px
diff --git a/public/src/pages/Auth/style.sass b/public/src/pages/Auth/style.sass
@@ -6,7 +6,6 @@
 	display: flex
 	justify-content: center
 	align-items: center
-	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)
 
 	.glassmorphism-container
 		position: relative

diff --git a/public/src/pages/Notes/Skeleton/style.sass b/public/src/pages/Notes/Skeleton/style.sass
@@ -2,7 +2,7 @@
 
 .notes-page-skeleton-wrapper
 	width: 100%
-	height: 100VH
+	height: 100vh
 	display: flex
 	justify-content: center
 	gap: 25px

diff --git a/public/src/pages/home/style.sass b/public/src/pages/home/style.sass
@@ -4,7 +4,6 @@
 	width: 100%
 	display: flex
 	flex-direction: column
-	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)
 
 	section
 		width: 100%