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

@@ -207,7 +207,7 @@ async function updatePassword(e) {
 
 return (
   <>
-          <button className="user-btn" onClick={() => setLogMenuOpen(o => !o)}>
+      <button className="user-btn" onClick={() => setLogMenuOpen(o => !o)}>
       ⚙️
       </button>
 
@@ -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,25 +118,31 @@ export default function Login({ onLogin }) {
 
   return (
     <>
-      <form onSubmit={handleSubmit}>
+    <div className="loginWrapper">
-        <input
+      <div className="loginBlock">
-          type="text"
+        <form onSubmit={handleSubmit}>
-          placeholder="Username"
+          <input
-          value={username}
+            type="text"
-          onChange={(e) => setUsername(e.target.value)}
+            placeholder="Username"
-        />
+            value={username}
-        <input
+            onChange={(e) => setUsername(e.target.value)}
-          type="password"
+          />
-          placeholder="Password"
+          <input
-          value={password}
+            type="password"
-          onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
-        />
+            value={password}
-        <button type="submit">Login</button>
+            onChange={(e) => setPassword(e.target.value)}
-        {error && <p style={{ color: "red" }}>{error}</p>}
+          />
-      </form>
+          <button type="submit">Login</button>
-      <div>
+          {error && <p style={{ color: "red" }}>{error}</p>}
-        <button onClick={LoginTest1} >login test 1</button>
+        </form>
-        <button onClick={LoginTest2} >login test 2</button>
+       
+    
+     <div>
+          <button onClick={LoginTest1} >login test 1</button>
+          <button onClick={LoginTest2} >login test 2</button>
+          </div>
+        </div>
         </div>
     </>