Angular/auth
1
0
Fork 0
Code Issues 1 Pull requests 2 Projects Releases Packages Wiki Activity Actions

fuck tons of style and no ai generated content what so ever vallah

Browse source
This commit is contained in:
Constantin Simonis 2025-07-08 11:37:02 +02:00
commit 2e64519528
No known key found for this signature in database
GPG key ID: 92EBCEB98F7AC5C5
14 changed files with 337 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

2
angular.json
View file

@ -27,6 +27,7 @@
}
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
@ -85,6 +86,7 @@
}
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []

29
package-lock.json generated
View file

@ -16,6 +16,7 @@
"@angular/platform-browser": "^20.0.4",
"@angular/platform-browser-dynamic": "^20.0.4",
"@angular/router": "^20.0.4",
"bootstrap": "^5.3.7",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.1"
@ -2979,6 +2980,16 @@
"node": ">=14"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.40.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.2.tgz",
@ -3710,6 +3721,24 @@
"dev": true,
"license": "ISC"
},
"node_modules/bootstrap": {
"version": "5.3.7",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.7.tgz",
"integrity": "sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/brace-expansion": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",

3
package.json
View file

@ -18,6 +18,7 @@
"@angular/platform-browser": "^20.0.4",
"@angular/platform-browser-dynamic": "^20.0.4",
"@angular/router": "^20.0.4",
"bootstrap": "^5.3.7",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.1"
@ -35,4 +36,4 @@
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.8.3"
}
}
}

8
src/app/app.component.html
View file

@ -1 +1,7 @@
<router-outlet />
<main class="container mt-4">
<router-outlet />
</main>
<footer class="text-center mt-4">
<p>&copy; 2025 My Auth App</p>
</footer>

28
src/app/component/auth/login/login.component.html
View file

@ -1,6 +1,22 @@
<form [formGroup]="form">
<input type="text" formControlName="username">
<input type="password" formControlName="password">
<button type="submit" (click)="login()">Login</button>
</form>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4 class="card-title">Login</h4>
</div>
<div class="card-body">
<form [formGroup]="form">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" id="username" class="form-control" formControlName="username">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" id="password" class="form-control" formControlName="password">
</div>
<button type="submit" class="btn btn-primary" (click)="login()">Login</button>
</form>
</div>
</div>
</div>
</div>

119
src/app/component/auth/register/register.component.html
View file

@ -1,48 +1,81 @@
<form [formGroup]="form">
<label for="firstname">First Name:</label>
<input id="firstname" formControlName="firstname" type="text">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h4 class="card-title">Register</h4>
</div>
<div class="card-body">
<form [formGroup]="form">
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label">First Name</label>
<input id="firstname" class="form-control" formControlName="firstname" type="text">
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label">Last Name</label>
<input id="lastname" class="form-control" formControlName="lastname" type="text">
</div>
</div>
<label for="lastname">Last Name:</label>
<input id="lastname" formControlName="lastname" type="text">
<div formGroupName="addressGroup">
<h5 class="mt-3">Address</h5>
<div class="row">
<div class="col-md-8 mb-3">
<label for="street" class="form-label">Street</label>
<input id="street" class="form-control" formControlName="street" type="text">
</div>
<div class="col-md-4 mb-3">
<label for="nr" class="form-label">Number</label>
<input id="nr" class="form-control" formControlName="nr" type="text">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="city" class="form-label">City</label>
<input id="city" class="form-control" formControlName="city" type="text">
</div>
<div class="col-md-3 mb-3">
<label for="state" class="form-label">State</label>
<input id="state" class="form-control" formControlName="state" type="text">
</div>
<div class="col-md-3 mb-3">
<label for="zip" class="form-label">ZIP Code</label>
<input id="zip" class="form-control" formControlName="zip" type="text">
</div>
</div>
</div>
<br>
<div formGroupName="emailGroup">
<h5 class="mt-3">Email</h5>
<div class="row">
<div class="col-md-6 mb-3">
<label for="email" class="form-label">Email</label>
<input id="email" class="form-control" formControlName="email" type="email">
</div>
<div class="col-md-6 mb-3">
<label for="confirmEmail" class="form-label">Confirm Email</label>
<input id="confirmEmail" class="form-control" formControlName="confirmEmail" type="email">
</div>
</div>
</div>
<div [formGroup]="addressGroup">
<label for="street">Street:</label>
<input id="street" formControlName="street" type="text">
<div formGroupName="passwordGroup">
<h5 class="mt-3">Password</h5>
<div class="row">
<div class="col-md-6 mb-3">
<label for="password" class="form-label">Password</label>
<input id="password" class="form-control" formControlName="password" type="password">
</div>
<div class="col-md-6 mb-3">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input id="confirmPassword" class="form-control" formControlName="confirmPassword" type="password">
</div>
</div>
</div>
<label for="nr">Number:</label>
<input id="nr" formControlName="nr" type="text">
<label for="city">City:</label>
<input id="city" formControlName="city" type="text">
<label for="state">State:</label>
<input id="state" formControlName="state" type="text">
<label for="zip">ZIP Code:</label>
<input id="zip" formControlName="zip" type="text">
<button type="submit" class="btn btn-primary mt-3" (click)="submit()">Submit</button>
</form>
</div>
</div>
</div>
<br>
<div [formGroup]="emailGroup">
<label for="email">Email:</label>
<input id="email" formControlName="email" type="email">
<label for="confirmEmail">Confirm Email:</label>
<input id="confirmEmail" formControlName="confirmEmail" type="email">
</div>
<div [formGroup]="passwordGroup">
<label for="password">Password:</label>
<input id="password" formControlName="password" type="password">
<label for="password">Confirm Password:</label>
<input id="password" formControlName="confirmPassword" type="password">
</div>
<br>
<button (click)="submit()">Submit</button>
</form>
</div>

42
src/app/component/dashboard/dashboard.component.html
View file

@ -1,3 +1,41 @@
<h1>random ahh dashboard</h1>
<div class="container-fluid">
<div class="row">
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<router-outlet />
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary mb-3">
<div class="card-header">Users</div>
<div class="card-body">
<h5 class="card-title">1,234</h5>
<p class="card-text">Registered Users</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-success mb-3">
<div class="card-header">Sales</div>
<div class="card-body">
<h5 class="card-title">$56,789</h5>
<p class="card-text">Last 30 Days</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-info mb-3">
<div class="card-header">Tasks</div>
<div class="card-body">
<h5 class="card-title">78</h5>
<p class="card-text">Pending Tasks</p>
</div>
</div>
</div>
</div>
<router-outlet />
</main>
</div>
</div>

26
src/app/component/header/header.component.css Normal file
View file

@ -0,0 +1,26 @@
.navbar {
background-color: #222;
padding: 0.5rem 1rem;
}
.navbar-list {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.navbar-item {
margin-right: 1.5rem;
}
.navbar-link {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.navbar-link:hover {
color: #90caf9;
}

32
src/app/component/header/header.component.html
View file

@ -1,10 +1,24 @@
<nav>
<ul>
<li>
<a routerLink="users">Users</a>
</li>
<li>
<a routerLink="dashboard">Dashboard</a>
</li>
</ul>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Auth App</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/users">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/auth/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/auth/register">Register</a>
</li>
</ul>
</div>
</div>
</nav>

1
src/app/component/header/header.component.ts
View file

@ -7,6 +7,7 @@ import {RouterLink} from "@angular/router";
RouterLink
],
templateUrl: './header.component.html',
styleUrl: './header.component.css'
})
export default class HeaderComponent {

34
src/app/component/side/side.component.css Normal file
View file

@ -0,0 +1,34 @@
.sidebar {
width: 220px;
background: #23272b;
color: #fff;
padding: 1.5rem 1rem;
min-height: 100vh;
}
.sidebar h2 {
margin-top: 0;
font-size: 1.3rem;
margin-bottom: 1.2rem;
}
.sidebar-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-list li {
margin-bottom: 1rem;
}
.sidebar-list a {
color: #90caf9;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.sidebar-list a:hover {
color: #fff;
}

43
src/app/component/side/side.component.html
View file

@ -1 +1,42 @@
<aside>side bar idek</aside>
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home"></span>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
</div>
</nav>

1
src/app/component/side/side.component.ts
View file

@ -4,6 +4,7 @@ import { Component } from '@angular/core';
selector: 'app-side',
imports: [],
templateUrl: './side.component.html',
styleUrl: './side.component.css'
})
export default class SideComponent {

33
src/app/component/users/users.component.html
View file

@ -1 +1,32 @@
<h1>mf users gng</h1>
<div class="container">
<h2 class="mt-4">Users</h2>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>&#64;mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>&#64;fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>&#64;twitter</td>
</tr>
</tbody>
</table>
</div>