josiadmin/kan-joshihomeserver-ipv64-net
1
0
Fork 0
generated from josiadmin/appwrite-template-login
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Josef Seiringer
2025-10-28 20:36:47 +01:00
commit 879d31905c
40 changed files with 11818 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/app.component.css Normal file
View File

5
src/app/app.component.html Normal file
View File

@@ -0,0 +1,5 @@
<main>
<!-- Hier wird der Inhalt deiner gerouteten Seiten angezeigt -->
<router-outlet></router-outlet>
</main>

16
src/app/app.component.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Component} from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent{
}

14
src/app/app.config.ts Normal file
View File

@@ -0,0 +1,14 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { importProvidersFrom } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; // <-- Wichtig!
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
importProvidersFrom(ReactiveFormsModule) // <-- Bereitstellen
],
};

10
src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
export const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent},
{ path: '**', redirectTo: '/login' },
];

13
src/app/components/header/header.component.css Normal file
View File

@@ -0,0 +1,13 @@
.headerText {
text-align: center;
color: rgb(42, 42, 88);
font-weight: bold;
font-size: 1.75rem;
font-family: "Libre Baskerville", serif;
}
i{
color: rgb(42, 42, 88);
cursor: pointer;
}

8
src/app/components/header/header.component.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="flex flex-row justify-between items-center bg-red-500/80 py-4 px-2">
<h2 class="headerText pl-4 ">Kegel Spielplan</h2>
<div>
<i class="fa-solid fa-file-lines fa-2xl pr-10" (click)="goToSummery()"></i>
<i class="fa-solid fa-file-circle-plus fa-2xl pr-10" (click)="goToInput()" ></i>
<i class="fa-solid fa-right-from-bracket fa-2xl pr-10" (click)="logout()"></i>
</div>
</div>

40
src/app/components/header/header.component.ts Normal file
View File

@@ -0,0 +1,40 @@
import { Component } from '@angular/core';
import { AppwriteService } from '../../services/appwrite.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-header',
standalone: true,
imports: [],
templateUrl: './header.component.html',
styleUrl: './header.component.css',
})
export class HeaderComponentComponent {
constructor(
private appwriteService: AppwriteService,
private routes: Router,
) {}
goToSummery() {
// this.routes.navigate(['/list']);
}
goToInput() {
// this.routes.navigate(['/input']);
}
async logout() {
try {
const accountService = await this.appwriteService.accountService;
await this.appwriteService.accountService.deleteSession(
(await accountService.getSession('current')).$id,
);
// Bei erfolgreicher Abmeldung
//this.toast.success('Logout erfolgreich!', 'Auf Wiedersehen!');
this.routes.navigate(['/login']);
} catch (err: any) {
console.error('Fehler beim Abmelden:', err.message);
}
}
}

0
src/app/components/login/login.component.css Normal file
View File

47
src/app/components/login/login.component.html Normal file
View File

@@ -0,0 +1,47 @@
<main class="login-container">
<div class="mt-8 flex flex-col items-center justify-center rounded-lg bg-red-500/30 p-6 shadow-md">
<h2 class="mb-4 text-4xl font-bold text-[#000000FF]">Pinin</h2>
<form class="flex flex-col gap-4" (ngSubmit)="login()">
<div>
<label for="username" class="sr-only">Benutzername</label>
<input
id="username"
type="email"
[(ngModel)]="email"
placeholder="E-Mail-Adresse"
name="email"
required
class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-[#000000] focus:outline-none focus:ring-1 focus:ring-[#030303]
text-black
text-xl
bg-white"
/>
</div>
<div>
<label for="password" class="sr-only">Passwort</label>
<input
id="password"
type="password"
placeholder="Passwort"
class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-[#000000] focus:outline-none focus:ring-1 focus:ring-[#000000] text-black
text-xl
bg-white"
[(ngModel)]="password"
name="password"
required
/>
</div>
<button
type="submit"
class="text-xl cursor-pointer rounded-md bg-[#ff0048] px-4 py-2 text-white hover:bg-[#E03164] focus:outline-none focus:ring-2 focus:ring-[#FD366E] focus:ring-offset-2">
Anmelden
</button>
<button (click)="logout()" type="button" class="text-xl cursor-pointer rounded-md bg-[#168B07FF] px-4 py-2 text-white hover:bg-[#034E13FF] focus:outline-none focus:ring-2 focus:ring-[#168B07FF] focus:ring-offset-2">
Logout
</button>
</form>
<p class="pt-2 text-gray-800">Or you can here <span class="text-blue-600"><button (click)="register()" type="button" class="cursor-pointer">Sign in</button></span> to the Applikation</p>
</div>
</main>

65
src/app/components/login/login.component.ts Normal file
View File

@@ -0,0 +1,65 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppwriteService } from '../../services/appwrite.service';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './login.component.html',
styleUrl: './login.component.css'
})
export class LoginComponent {
detailHeight: number = 0;
email = '';
password = '';
sessionId = '';
constructor(
private router: Router,
private appwriteService: AppwriteService
) {}
register() {
this.router.navigate(['/register']);
}
async logout() {
try {
await this.appwriteService.accountService.deleteSession(this.sessionId).then((response) => {
this.sessionId = '';
this.email = '';
this.password = '';
alert('Erfolgreich abgemeldet');
}).catch((error) => {
console.error('Fehler beim Abmelden: ' + error.message);
});
} catch (err: any) {
console.error('Logout fehlgeschlagen: ' + err.message);
}
}
async login() {
try {
await this.appwriteService.accountService.createEmailPasswordSession(
this.email,
this.password,
).then((response) => {
this.sessionId = response.$id;
this.email = '';
this.password = '';
//this.router.navigate(['/input']);
}).catch((error) => {
console.error('Fehler beim Anmelden: ' + error.message);
alert('Fehler beim Anmelden: ' + error.message);
});
} catch (err: any) {
console.error('Anmeldung fehlgeschlagen: ' + err.message);
}
}
}

19
src/app/components/register/register.component.css Normal file
View File

@@ -0,0 +1,19 @@
summary::-webkit-details-marker {
display: none
}
.checker-background::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#e6e6e690 1px, transparent 1px),
linear-gradient(90deg, #e6e6e690 1px, transparent 1px);
background-size: 3.7em 3.7em;
-webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 55%);
mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 55%);
z-index: -1;
background-position-x: center;
}

58
src/app/components/register/register.component.html Normal file
View File

@@ -0,0 +1,58 @@
<main class="login-container">
<div class="mt-8 flex flex-col items-center justify-center rounded-lg bg-red-500/30 p-6 shadow-md">
<h2 class="mb-4 text-4xl font-bold text-[#050505FF]">Registrieren</h2>
<form class="flex flex-col gap-4" (ngSubmit)="registerUser()">
<div>
<label for="username" class="sr-only">Benutzer</label>
<input
id="username"
type="text"
[(ngModel)]="userName"
placeholder="Benutzer Name"
name="username"
required
class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-[#000000] focus:outline-none focus:ring-1 focus:ring-[#030303]
text-black
text-xl
bg-white"
/>
</div>
<div>
<label for="email" class="sr-only">Email</label>
<input
id="email"
type="email"
[(ngModel)]="email"
placeholder="E-Mail-Adresse"
name="email"
required
class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-[#000000] focus:outline-none focus:ring-1 focus:ring-[#030303]
text-black
text-xl
bg-white"
/>
</div>
<div>
<label for="password" class="sr-only">Passwort</label>
<input
id="password"
type="password"
placeholder="Passwort"
class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-[#000000] focus:outline-none focus:ring-1 focus:ring-[#000000] text-black
text-xl
bg-white"
[(ngModel)]="password"
name="password"
required
/>
</div>
<button
type="submit"
class="text-xl cursor-pointer rounded-md bg-[#ff0048] px-4 py-2 text-white hover:bg-[#E03164] focus:outline-none focus:ring-2 focus:ring-[#FD366E] focus:ring-offset-2">
Register
</button>
</form>
<p class="pt-2 text-gray-800">Or you can here <span class="text-blue-600"><button (click)="goTologin()" type="button" class="cursor-pointer">Log in</button></span> to the Applikation</p>
</div>
</main>

37
src/app/components/register/register.component.ts Normal file
View File

@@ -0,0 +1,37 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppwriteService } from '../../services/appwrite.service';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-register',
imports: [CommonModule, FormsModule],
templateUrl: './register.component.html',
styleUrl: './register.component.css'
})
export class RegisterComponent {
email = 'ich@example.com';
userName = 'TestUser';
password = '123456789';
constructor(
private router: Router,
private appwriteService: AppwriteService
) { }
async registerUser(): Promise<void>{
try {
const responseUserSignIn = await this.appwriteService.register(this.email, this.password, this.userName);
this.router.navigate(['/login']);
} catch (error) {
console.log('Registrierung fehlgeschlagen :' + error);
}
}
goTologin() {
this.router.navigate(['/login']);
}
}

182
src/app/services/appwrite.service.ts Normal file
View File

@@ -0,0 +1,182 @@
import { Injectable } from '@angular/core';
import { Client, Account, Databases, ID, Query, Models } from 'appwrite';
import { environment } from '../../environments/environment';
import { Observable, from } from 'rxjs';
import { tap, map } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class AppwriteService {
private client: Client;
private account: Account;
private databases: Databases;
private readonly localStorageKey = 'appwriteRecords';
constructor() {
this.client = new Client()
.setEndpoint(environment.appwriteEndpoint) // Your Appwrite API endpoint
.setProject(environment.appwriteProjectId); // Your project ID
this.account = new Account(this.client);
this.databases = new Databases(this.client);
}
// --- Account Service ---
get accountService(): Account {
return this.account;
}
async register(email: string, password: string, name: string): Promise<any> {
return await this.account.create(ID.unique(), email, password, name);
}
// --- CRUD Operations for Databases ---
/**
* Creates a new document in a specified collection.
* @param databaseId The ID of the database.
* @param collectionId The ID of the collection.
* @param data The data object for the new document.
* @returns A promise with the created document.
*/
async createDocument(data: any): Promise<any> {
try {
const result = await this.databases.createDocument(
environment.appwriteDatabaseId,
environment.appwriteCollectionId,
ID.unique(),
data,
);
return result;
} catch (error) {
console.error('Error creating document:', error);
throw error;
}
}
/**
* Retrieves a single document from a collection.
* @param databaseId The ID of the database.
* @param collectionId The ID of the collection.
* @param documentId The ID of the document to retrieve.
* @returns A promise with the retrieved document.
*/
async getDocument(documentId: string): Promise<any> {
try {
const result = await this.databases.getDocument(
environment.appwriteDatabaseId,
environment.appwriteCollectionId,
documentId,
);
return result;
} catch (error) {
console.error('Error getting document:', error);
throw error;
}
}
/**
* Lists documents from a specified collection with optional queries.
* @param databaseId The ID of the database.
* @param collectionId The ID of the collection.
* @param queries An array of Query objects to filter the results (e.g., [Query.equal('name', 'John')]).
* @returns A promise with the list of documents.
*/
public getRecords(queries: string[] = []): Observable<any> {
//If no Data in localStorage
return from(
this.databases.listDocuments(
environment.appwriteDatabaseId,
environment.appwriteCollectionId,
queries,
),
).pipe(
map((response: Models.DocumentList<any>) => response.documents),
tap((documents: any) => {
this.saveToLocalStorage(documents);
}),
);
}
// Rest deines Codes bleibt unverändert
private saveToLocalStorage(data: any): void {
try {
localStorage.setItem(this.localStorageKey, JSON.stringify(data));
} catch (e) {
console.error('Fehler beim Speichern im LocalStorage', e);
}
}
// Lädt die Daten aus dem LocalStorage und parst sie als JSON
private loadFromLocalStorage(): any | null {
try {
const storedData = localStorage.getItem(this.localStorageKey);
return storedData ? JSON.parse(storedData) : null;
} catch (e) {
console.error('Fehler beim Laden aus LocalStorage', e);
return null;
}
}
// async listDocuments(
// queries: string[] = []
// ): Promise<any> {
// try {
// const result = await this.databases.listDocuments(
// environment.appwriteDatabaseId,
// environment.appwriteCollectionId,
// queries
// );
// return result;
// } catch (error) {
// console.error('Error listing documents:', error);
// throw error;
// }
// }
/**
* Updates an existing document in a collection.
* @param databaseId The ID of the database.
* @param collectionId The ID of the collection.
* @param documentId The ID of the document to update.
* @param data The new data object to merge with the existing document.
* @returns A promise with the updated document.
*/
async updateDocument(documentId: string, data: any): Promise<any> {
try {
const result = await this.databases.updateDocument(
environment.appwriteDatabaseId,
environment.appwriteCollectionId,
documentId,
data,
);
return result;
} catch (error) {
console.error('Error updating document:', error);
throw error;
}
}
/**
* Deletes a document from a collection.
* @param databaseId The ID of the database.
* @param collectionId The ID of the collection.
* @param documentId The ID of the document to delete.
* @returns A promise that resolves upon successful deletion.
*/
async deleteDocument(documentId: string): Promise<any> {
try {
await this.databases.deleteDocument(
environment.appwriteDatabaseId,
environment.appwriteCollectionId,
documentId,
);
return { success: true, message: 'Document deleted successfully.' };
} catch (error) {
console.error('Error deleting document:', error);
throw error;
}
}
}

13
src/environments/environment.development.ts Normal file
View File

@@ -0,0 +1,13 @@
export const environment: {
appwriteEndpoint: string;
appwriteProjectId: string;
appwriteProjectName: string;
appwriteDatabaseId: string;
appwriteCollectionId: string;
} = {
appwriteEndpoint: '<Your endpoint URL>', // Your Appwrite Endpoint
appwriteProjectId: '<123456789abcdefgh>', // Your project ID
appwriteProjectName: '<Your Project name>', // Your project name
appwriteDatabaseId: '<123456789abcdefgh>', // Your database ID
appwriteCollectionId: '<123456789abcdefgh>', // Your collection ID
};

13
src/environments/environment.ts Normal file
View File

@@ -0,0 +1,13 @@
export const environment: {
appwriteEndpoint: string;
appwriteProjectId: string;
appwriteProjectName: string;
appwriteDatabaseId: string;
appwriteCollectionId: string;
} = {
appwriteEndpoint: '<Your endpoint URL>', // Your Appwrite Endpoint
appwriteProjectId: '<123456789abcdefgh>', // Your project ID
appwriteProjectName: '<Your Project name>', // Your project name
appwriteDatabaseId: '<123456789abcdefgh>', // Your database ID
appwriteCollectionId: '<123456789abcdefgh>', // Your collection ID
};

20
src/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Appwrite + Angular</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/appwrite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:opsz,wght@14..32,100..900&family=Poppins:wght@300;400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />
</head>
<body class="bg-[#FAFAFB] font-[Inter] text-sm text-[#56565C]">
<app-root></app-root>
</body>
</html>

7
src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);

112
src/styles.css Normal file
View File

@@ -0,0 +1,112 @@
@import "tailwindcss";
@import "@fortawesome/fontawesome-free/css/all.min.css";
.login-container {
/* Positioniere den Container, um den gesamten Viewport abzudecken */
position: fixed;
width: 100%;
height: 100%;
/* Füge das Hintergrundbild hinzu */
background-image: url('/assets/img/KegelGaudi2025.png');
/* Stelle sicher, dass das Bild den gesamten Container ausfüllt */
background-size: cover;
/* Zentriere das Bild horizontal und vertikal */
background-position: center;
/* Verhindere, dass sich das Bild wiederholt */
background-repeat: no-repeat;
/* Setze ein Overlay (optional), um den Text lesbarer zu machen */
/* background-color: rgba(0, 0, 0, 0.5); Semi-transparentes Schwarz */
background-blend-mode: overlay;
/* Zentriere die Login-Karte */
display: flex;
justify-content: center;
align-items: center;
}
.input-container{
/* Positioniere den Container, um den gesamten Viewport abzudecken */
position: fixed;
width: 100%;
height: 100%;
/* Füge das Hintergrundbild hinzu */
background-image: url('/assets/img/InputKegel.png');
/* Stelle sicher, dass das Bild den gesamten Container ausfüllt */
background-size: cover;
/* Zentriere das Bild horizontal und vertikal */
background-position: center;
/* Verhindere, dass sich das Bild wiederholt */
background-repeat: no-repeat;
/* Setze ein Overlay (optional), um den Text lesbarer zu machen */
/* background-color: rgba(0, 0, 0, 0.5); Semi-transparentes Schwarz */
background-blend-mode: overlay;
/* Zentriere die Login-Karte */
display: flex;
justify-content: center;
align-items: center;
}
.kegel-container {
max-width: 800px;
display: flex;
flex-direction: column;
height: 75vh;
margin: 2rem auto;
padding: 1rem;
font-family: "Libre Baskerville", serif;
}
/* Definiert den Bereich, der scrollen soll */
.scrollable-content {
flex: 2; /* Nimmt den verfügbaren Platz ein */
overflow-y: auto; /* Erlaubt vertikales Scrollen in diesem Block */
}
.save-button {
margin-top: 1rem;
padding: 1rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.1rem;
min-width: 250px;
}
.save-button:hover {
background-color: #0056b3;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-weight: bold;
font-size: 1.3em;
color: rgb(3, 3, 3);
}
.form-group input {
padding: 0.75rem;
border: 1px solid #020202;
border-radius: 4px;
font-size: 1rem;
}
.error-message {
color: red;
}