The Spin … All hope … it’s all in the Spin! I want to know more … mo…

…re about the Steel Balls …

src-tauri/src/fs/utilities.rs

@@ -3,6 +3,7 @@ use std::path::PathBuf;
 use dirs::data_dir;
 pub use base64::{decode_config, encode_config, URL_SAFE};
 pub use tauri::Runtime;
+use crate::authenticate_user;
 use crate::data::auth::{init_dir, Encodable};
 use crate::data::json::init_user_data;
 use crate::fs::encryption::{aes_encrypt, aes_decrypt};

src/pages/main_page/internal_apps/App.css

@@ -1,26 +1,20 @@
 .frametest {
     position: relative;
-    display: block;
     border-top: 1px #02020200;
     border-left: 2px #0202022f;
     border-right: 2px #0202022f;
     border-bottom: 1px #02020200;
     border-style: solid;
     z-index: 99;
-    padding-left: 373px;
     cursor: move;
     font-size: 0.5em;
-    color: white    ;
-    width: 873px;
+    color: white;
     max-width: 100%;
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: 3fr 0.1fr 0.1fr 0.1fr;
     height: 37px;
     background-color: #2f2f2f;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-
-
+    transition: all 0.1 ease-in-out;
 }
 
 .frame{
@@ -36,10 +30,10 @@ border-radius: 20px;
     backdrop-filter: blur(30px);
     -webkit-backdrop-filter: blur(30px);
     background-color: #333333d3;
-    height: 50svh;    
 }
 
 .frametext2{
+    white-space: nowrap;
     color: white;
     margin-top: .3svh;
     font-weight: normal;
@@ -51,11 +45,6 @@ border-radius: 20px;
     width: 100%;
 }
 
-.frame-buttons{
-    display: inline-flex;
-
-}
-
 .minimize-btn, .close-btn, .fullscreen-btn {
     background-color: #00000000;
     color: white;
@@ -75,24 +64,18 @@ border-radius: 20px;
     cursor:context-menu;
     font-size: 1em;
     color: white;
-    width: 873px;
     max-width: 100%;
     display: flex;
     align-items: flex-start;
     z-index: 1;
-    background-color: #333333df;
-    height: 50svh;    
+    background-color: #333333df; 
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     user-select: none;
 
 
 }
 
-.minimize-btn {
-    padding-left: 350px;
-}
-
 .test{
     border: 2px ;
 }

src/pages/main_page/internal_apps/App.tsx

@@ -13,33 +13,50 @@ export interface AppInterface{
     context_menu: JSX.Element,
     update: () => Promise<void>,
     set_display: React.Dispatch<React.SetStateAction<string>>,
-    fullscreen: () => void,
+    fullscreen: (active: boolean) => void,
 }
 
-function App(element: JSX.Element, name: string): [JSX.Element, React.Dispatch<React.SetStateAction<string>>, () => void] {
+function App(element: JSX.Element, name: string): [JSX.Element, React.Dispatch<React.SetStateAction<string>>, (active: boolean) => void] {
     const [display, set_display] = useState('inherit');
     let [ref, dx, dy] = useDraggable({ gridSize: 10 });
-    let fullscreen = () => {};
+    const [is_fullscreen, set_fullscreen] = useState(false);
+    const [screensize, set_screensize] = useState({width: `875px`, height: `50svh`});
+    let fullscreen = (active: boolean) => {
+        set_fullscreen(active)
+        if (!active){
+            set_screensize({width: `875px`, height: `50svh`});
+        }
+        else{
+            set_screensize({width: `100svw`, height: `93svh`});
+        }
+        return is_fullscreen;
+    };
+    let position = () => {
+        if (is_fullscreen){
+            return `translate3d(0px, 0px, 0)`;
+        }
+        else{
+            return `translate3d(${dx}px, ${dy}px, 0)`;
+        }
+    }
     return [
         <div 
             className="frame"
             style={{
-                transform: `translate3d(${dx}px, ${dy}px, 0)`,
+                transform: position(),
                 display: display,
             }}
             //@ts-expect-error
             ref={ref}
             key={name}
         >
-            <div className="frametest">
+            <div className="frametest" style={{width: screensize.width}}>
                 <h1 className="frametext2">{name}</h1>
-                <div className="frame-buttons">
                     <button className="minimize-btn" onClick={() => set_display('none')}>-</button>
-                    <button className="fullscreen-btn">↔</button>
+                    <button className="fullscreen-btn" onClick={() => fullscreen(!is_fullscreen)}>↔</button>
                     <button className="close-btn" onClick={()=>{set_display('none');}}>x</button>
-                </div>
             </div>
-            <div className="background">
+            <div className="background" style={{width: screensize.width, height: screensize.height}}>
             {element}
             </div>
         </div>

src/pages/main_page/internal_apps/apps/sudo/sudo.css

@@ -0,0 +1,71 @@
+.frame{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: inherit;
+    height: inherit;
+}
+
+.input {
+    max-width: 250px;
+    height: 50px;
+    background-color: #05060f37;
+    border-radius: .5rem;
+    color: #ffffff;
+    padding: 0 1rem;
+    border: 2px solid transparent;
+    font-size: 1rem;
+    transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s;
+    user-select: none;
+
+  }
+
+  .label {
+    display: block;
+    margin-bottom: .60rem;
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: #ffffffc9;
+    transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;
+    margin-top: 20px;
+    user-select: none;
+
+  }
+
+  .input:hover, .input:focus, .input-group:hover .input {
+    outline: none;
+    border-color: #ffffff94;
+  }
+
+  .input-group:hover .label, .input:focus {
+    color: #ffffffc2;
+    user-select: none;
+
+  }
+
+  ::placeholder {
+
+    font-size: 1em;
+    color: #e7e7e9;
+    user-select: none;
+
+  }
+
+.login:focus{
+    background-color: #000000ac;
+}
+
+
+#error{
+  color: #FF0000;
+  font-size: 2svh;
+  user-select: none;
+}
+
+
+#error[aria-current=true]{
+  color: #027d00;
+  font-size: 2svh;
+  user-select: none;
+
+}

src/pages/main_page/internal_apps/apps/sudo/sudo.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import App, { AppInterface } from "../../App";
+import { invoke } from "@tauri-apps/api";
+import { useNavigate } from "react-router-dom";
+import './sudo.css';
+
+
+export default function sudo(text: string) : AppInterface{
+    const [name, setname] = useState("");
+    const [password, setpassword] = useState("");
+    const [error, seterror] = useState("");
+    const [succsess, set_succsess] = useState(false);
+    const navigate = useNavigate();
+    let authenticate = async () => {
+        let current_user = await invoke('authenticate_user', {name, password});
+        if (current_user){navigate("/loading", {state: {name, password}});seterror('successfully logged in!');set_succsess(true);}
+        else{seterror('failed to authenticate user');set_succsess(false);}
+    }
+    let update = async () => {};
+    let html = <div className="frame">
+        <h1>{text}</h1>
+        <label className="label">Name</label>
+        <input type="text" onChange={e => setname(e.target.value)} className="input"/>
+        <label className="label">Password</label>
+        <input type="password" onKeyDown={async e => {if (e.key == 'Enter') {await authenticate()}}} 
+        onChange={e => setpassword(e.target.value)} className="input"/>
+        <button className="learn-more" onClick={authenticate}>
+            <span className="circle" aria-hidden="true">
+                <span className="icon arrow"></span>
+            </span>
+            <span className="button-text" onClick={authenticate}>Login</span>
+        </button>
+        <br></br>
+        <p id="error" aria-current={succsess}>{error}</p>
+    </div>
+    let [screen, set_display, fullscreen] = App(html, 'sudo access');
+    return {screen, set_display, fullscreen, context_menu: <div></div>, update};
+}

src/pages/main_page/main_page.tsx

@@ -12,6 +12,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import exit from './assets/exit.png';
 import { invoke } from '@tauri-apps/api';
 import Settings from './internal_apps/apps/settings/settings';
+import sudo from './internal_apps/apps/sudo/sudo';
 
 function BinIcon(props: {display: () => Promise<void>, name: string, img: string}){
     return   <div className='appsmenu'onClick={props.display}>
@@ -52,15 +53,29 @@ const Clock = () => {
 export default function MainPage() {
     const navigate = useNavigate();
     const fs_props = file_system();
+    const sudo_props = sudo('you have been logged out, please log in');
+    useEffect(()=>{sudo_props.set_display('none')}, []);
     const settings_props = Settings();
     const settings_app = desktop_app("settings", settings, settings_props);
     const explorer_app = desktop_app("Files", folder, fs_props);
     const [menu, set_menu] = useState(false);
     useEffect(() => {
         fs_props.update();
     }, [useLocation().state]);
+    useEffect(() => {
+        const interval = setInterval(async () => {
+            let name = await invoke('system_get', {key: 'name'});
+            let password = await invoke('system_get', {key: 'password'});
+            if (name == null || password == null) {sudo_props.set_display('inherit');sudo_props.fullscreen(true);return}
+            const authenticated = await invoke('authenticate_user', {name, password});
+            if (!authenticated) {sudo_props.set_display('inherit');sudo_props.fullscreen(true);return}
+            else {sudo_props.set_display('none');sudo_props.fullscreen(false);}
+        }, 1000);
+        return () => clearInterval(interval);
+      }, []);
     return (
         <div id='background' onContextMenu={e => {e.preventDefault();}} onClick={() => {if (menu) {set_menu(false)}}}>
+            {sudo_props.screen}
             <Grid  apps={[explorer_app, settings_app]} gridSize={50} margin={120} />
             <nav className='navbar' onContextMenu={e => e.preventDefault()}>
                 <img className='homeimg' onClick={() => set_menu(!menu)} src={menu_icon} alt="" />