added session management

PPLBandage · Sep 28, 2024 · 0aaca94 · 0aaca94
1 parent 6a6b44c
commit 0aaca94
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/src/app/me/settings/page.tsx b/src/app/me/settings/page.tsx
@@ -17,8 +17,10 @@ import { SlideButton } from '@/app/modules/components/nick_search.module';
 import { formatDate } from '@/app/modules/components/card.module';
 import { getTheme } from '@/app/modules/providers.module';
 import { useCookies } from 'next-client-cookies';
+import IconSvg from '@/app/resources/icon.svg';
 import { IconUser, IconBrandDiscord, IconCube, IconPhoto, IconX, IconRefresh, IconShield, IconDeviceMobile, IconDeviceDesktop } from '@tabler/icons-react';
 import { timeStamp } from '@/app/modules/utils/time.module';
+import style_workshop from "@/app/styles/workshop/page.module.css";
 const fira = Fira_Code({ subsets: ["latin"] });
 
 interface SettingsResponse {
@@ -211,7 +213,7 @@ const Connections = ({ data, refetch }: { data: SettingsResponse, refetch(): voi
                             const target = document.getElementById('code') as HTMLInputElement;
                             if (target.value.length > 6) target.value = target.value.slice(0, 6)
                         }} />
-                        <button className={Style.code_send} onClick={e => {
+                        <button className={Style.code_send} onClick={_ => {
                             const target = document.getElementById('code') as HTMLInputElement;
                             if (target.value.length != 6) return;
 
@@ -341,7 +343,18 @@ const Safety = () => {
                 </h2>
                 <p className={Style_safety.last_accessed}>Последний доступ {timeStamp((new Date(session.last_accessed).getTime()) / 1000)}</p>
             </div>
-            <button className={Style_safety.button}>Выйти</button>
+            {!session.is_self &&
+                <button className={Style_safety.button} onClick={_ => {
+                    if (!confirm(`Выйти с этого устройства?`)) return;
+                    authApi.delete(`user/me/sessions/${session.id}`).then(response => {
+                        if (response.status === 200) {
+                            setSessions(sessions.filter(session_ => session_.id !== session.id));
+                        }
+                    })
+                }}>
+                    <IconX />
+                </button>
+            }
         </div>
     );
 
@@ -350,7 +363,10 @@ const Safety = () => {
             <h3><IconShield width={24} height={24} style={{ marginRight: ".3rem", borderRadius: 0 }} />Безопасность</h3>
             <h4 style={{ margin: 0 }}>Все устройства</h4>
             <div className={Style_safety.parent}>
-                {sessions_elements}
+                {loading ?
+                    <IconSvg width={86} height={86} className={style_workshop.loading} /> :
+                    sessions_elements
+                }
             </div>
         </div>
     )

diff --git a/src/app/modules/components/header.module.tsx b/src/app/modules/components/header.module.tsx
@@ -70,7 +70,7 @@ const Header = (): JSX.Element => {
         <>
             {expanded && <div className={Styles.expanding_menu_parent} onClick={() => setExpanded(false)} />}
             <header className={Styles.header}>
-                <div className={Styles.header_child}>
+                <div className={Styles.header_child} style={{ padding: logged ? '.5rem' : '.9rem' }}>
                     <div style={{ display: "flex", alignItems: "center", flexWrap: "nowrap" }}>
                         <Link href="/"><IconCropped style={{ width: "2.5rem" }} className={Styles.main_icon} /></Link>
                         <h1 className={Styles.ppl_name}>Повязки <a style={{ color: "var(--main-text-color)", textDecoration: "none" }} href="https://pepeland.net">Pepeland</a></h1>

diff --git a/src/app/styles/header.module.css b/src/app/styles/header.module.css
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: .5rem;
+    padding: .9rem;
 }
 
 .expanding_menu_parent {
@@ -155,7 +155,6 @@
     cursor: pointer;
     width: 3rem;
     height: 3rem;
-
     transition: border-color .2s;
 }
 
@@ -170,7 +169,6 @@
     align-items: center;
     width: 1.8rem;
     height: auto;
-    padding: calc((54px - 28px) / 2);
 }
 
 

diff --git a/src/app/styles/me/safety.module.css b/src/app/styles/me/safety.module.css
@@ -1,7 +1,7 @@
 .parent {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: .8rem;
 }
 
 .session {
@@ -11,15 +11,13 @@
 }
 
 .container {
-    background-color: var(--main-element-color);
+    border: 1px var(--main-element-color) solid;
     border-radius: 10px;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: row;
-    flex-wrap: wrap;
-    gap: 10px;
 }
 
 .header p {
@@ -43,15 +41,15 @@
 }
 
 .button {
-    border: 2px #ED4245 solid;
-    border-radius: 5px;
     background: none;
     cursor: pointer;
-    padding: .4rem;
-    font-size: .8rem !important;
-    font: inherit;
+    border: none;
+    filter: brightness(.8);
+    transition: filter 150ms;
+    display: flex;
+    padding: 0;
 }
 
 .button:hover {
-    background-color: #ED4245;
+    filter: brightness(1);
 }