test workflow file

.gitea/workflows/deploy.yml

@@ -0,0 +1,48 @@
+name: Deploy React
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    container:
+      image: node:20
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Archive build
+        run: tar -czf build.tar.gz dist
+
+      - name: Setup SSH
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.DEPLOY_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan 79.137.75.155 >> ~/.ssh/known_hosts
+
+      - name: Upload
+        run: |
+          scp build.tar.gz deploy@79.137.75.155:/tmp/
+
+      - name: Deploy
+        run: |
+          ssh deploy@79.137.75.155 << 'EOF'
+            rm -rf /var/www/hotel-demo/assets
+            rm -rf /var/www/hotel-demo/index.html
+
+            tar -xzf /tmp/build.tar.gz -C /var/www/hotel-demo
+            
+            sudo systemctl reload nginx
+          EOF

src/App.css

@@ -17,6 +17,8 @@
   
 }
 
+
+
 .log-menu {
   position: fixed;
   top: 50px;

src/App.jsx

@@ -251,7 +251,7 @@ return (
     {loggedIn ? (
       <MainApp resClientId={clientId} />
     ) : (
-      <Login onLogin={checkAuth} />
+      <Login className='logLanding' onLogin={checkAuth} />
     )}
   </>
 );

src/components/MainApp.jsx

@@ -30,6 +30,7 @@ function MainApp() {
   const { rooms } = useHotel();
   const { conversations } = useHotel();
   const { users } = useHotel();
+  const { items } = useHotel();
 
   const [view, setView] = useState(VIEW.ROOMS)
 

src/components/login.css

@@ -0,0 +1,40 @@
+.loginBlock {
+
+    width: 320px;
+    padding: 2rem;
+    background: var(--card);
+    border-radius: 8px ;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+}
+
+.loginWrapper {
+    min-height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.loginBlock form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.loginBlock input,
+.loginBlock button {
+    width: auto;
+    padding: 0.75rem ;
+    font-size: 1rem;
+}
+
+.loginBlock > div {
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+}

src/components/login.jsx

@@ -1,6 +1,8 @@
 import { API_BASE } from "../config";
 
 import { useState } from "react";
+import "./login.css";
+
 
 export default function Login({ onLogin }) {
   const [username, setUsername] = useState("");
@@ -116,6 +118,8 @@ export default function Login({ onLogin }) {
 
   return (
     <>
+    <div className="loginWrapper">
+      <div className="loginBlock">
         <form onSubmit={handleSubmit}>
           <input
             type="text"
@@ -132,10 +136,14 @@ export default function Login({ onLogin }) {
           <button type="submit">Login</button>
           {error && <p style={{ color: "red" }}>{error}</p>}
         </form>
+       
+    
      <div>
           <button onClick={LoginTest1} >login test 1</button>
           <button onClick={LoginTest2} >login test 2</button>
           </div>
+        </div>
+        </div>
     </>