Software & Apps

Software und Apps sind aus unserem Alltag nicht mehr wegzudenken; von Musik- und Videobearbeitung, Antiviren-Tools, VPN-Clients bis hin zu Office und gewissen Alternativen - hier dreht sich alles um Software & Apps für Deinen PC.
67.308 Beiträge
Login Programmieren?

Ich bin gerade dabei eine Webseite zu Programmieren und will sie dan kostenlos über Cloudflare Hosten. Dabei stose ich auf probleme. Also in meiner webseite soll man sich anmelden können ich hebe dazu ein test erstellt. In cloutflare habe ich einen Worker erstellt dann habe ich diesen code eingegeben

const users = [
  { username: 'user1', password: 'password1' },
  { username: 'user2', password: 'password2' }
];


addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});


async function handleRequest(request) {
  if (request.method === 'POST') {
    try {
      const { username, password } = await request.json();


      const user = users.find(
        user => user.username === username && user.password === password
      );


      if (user) {
        return new Response(JSON.stringify({ success: true, message: 'Login erfolgreich' }), {
          headers: { 'Content-Type': 'application/json' },
        });
      } else {
        return new Response(JSON.stringify({ success: false, message: 'Ungültige Anmeldedaten' }), {
          headers: { 'Content-Type': 'application/json' },
        });
      }
    } catch (error) {
      return new Response(JSON.stringify({ success: false, message: 'Fehler beim Verarbeiten der Anfrage' }), {
        headers: { 'Content-Type': 'application/json' },
      });
    }
  } else if (request.method === 'GET') {
    if (request.url.endsWith('/favicon.ico')) {
      // Hier können Sie eine spezifische Antwort für favicon.ico zurückgeben
      return new Response(null, { status: 204 }); // Hier 204 bedeutet "No Content"
    } else {
      // Beispiel: Eine allgemeine Antwort für GET-Anfragen
      return new Response('Hello from Cloudflare Worker!', {
        headers: { 'Content-Type': 'text/plain' },
      });
    }
  } else {
    return new Response('Method Not Allowed', { status: 405 });
  }
}

wenn ich ihn starte gibt er das aus:

Hello from Cloudflare Worker!

das ist das anmelde formular:

wenn man sein password eingibt kommt eine Fehlermeldung

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <title>Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }
        .login-container button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm" onsubmit="handleLogin(event)">
            <input type="text" id="username" placeholder="Benutzername" required>
            <input type="password" id="password" placeholder="Passwort" required>
            <button type="submit">Einloggen</button>
        </form>
    </div>
    <script>
        async function handleLogin(event) {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    try {
        console.log('Sending login request...');
        const response = await fetch('https://login.   … .workers.dev/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
                // Weitere Header, falls erforderlich
            },
            body: JSON.stringify({ username, password })
        });
        console.log('Response received:', response);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const result = await response.json();


        console.log('Result:', result);


        if (result.success) {
            alert('Login erfolgreich');
            // Weiterleitung oder zusätzliche Logik hier einfügen
        } else {
            alert('Ungültige Anmeldedaten');
        }
    } catch (error) {
        console.error('Es gab ein Problem mit dem Fetch-Betrieb:', error);
        alert('Es gab ein Problem mit dem Login. Bitte versuche es später erneut.');
    }
}
    </script>
</body>
</html>
Code funktioniert nicht?

Der Code an sich ist etwas länger, aber diese Stelle scheint nicht zu funktionieren.
private List<string> SelectFiles(List<string> fileList)

{

  _logger.Log("Bitte geben Sie die Nummern der Handbücher ein, die Sie verarbeiten möchten (kommagetrennt, z.B. 1, 3-5), oder drücken Sie Enter, um alle zu verarbeiten:");

  string input = Console.ReadLine();

  List<string> selectedFiles = new List<string>();

  if (string.IsNullOrEmpty(input))

  {

    // Wenn keine Auswahl getroffen wurde, alle Dateien verarbeiten

    selectedFiles = fileList;

  }

  else

  {

    // Verarbeite die ausgewählten Nummern und Bereiche

    string[] inputParts = input.Split(',');

    HashSet<int> indices = new HashSet<int>();

    foreach (string part in inputParts)

    {

      if (part.Contains('-'))

      {

        string[] rangeParts = part.Split('-');

        if (rangeParts.Length == 2 &&

          int.TryParse(rangeParts[0].Trim(), out int start) &&

          int.TryParse(rangeParts[1].Trim(), out int end))

        {

          for (int i = start; i <= end; i++)

          {

            indices.Add(i);

          }

        }

      }

      else if (int.TryParse(part.Trim(), out int index))

      {

        indices.Add(index);

      }

    }

    foreach (int index in indices)

    {

      if (index > 0 && index <= fileList.Count)

      {

        selectedFiles.Add(fileList[index - 1]);

      }

    }

  }

  return selectedFiles;

}
Da fehlt sehr sehr viel beim Code, aber es geht um die Eingabe. Ich gebe ein:
1,2,4-6,3 Aber er macht nur was mit 1 2 3 udn 4 bis 6 lässt er weg, warum?

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Bild zum Beitrag

Ask Me Anything: Blickwechsel

Du stellst die Fragen, ein außergewöhnlicher Nutzer antwortet! Begegne mit Deinen Fragen anderen Menschen hautnah und persönlich.

Ask Me Anything: Themenspecials

Im gutefrage Themenspecial beantworten Verbände, Organisationen und Personen des öffentlichen Lebens Deine Fragen zu aktuellen Themen.