Browse Source

auth created

ssr
Artemis 4 months ago
parent
commit
7cafeb9412
8 changed files with 266 additions and 0 deletions
  1. +11
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +4
    -0
      src/app/app-routing.module.ts
  4. +24
    -0
      src/routes/auth/auth.module.ts
  5. +37
    -0
      src/routes/auth/auth/auth.component.html
  6. +139
    -0
      src/routes/auth/auth/auth.component.scss
  7. +25
    -0
      src/routes/auth/auth/auth.component.spec.ts
  8. +25
    -0
      src/routes/auth/auth/auth.component.ts

+ 11
- 0
package-lock.json View File

@ -16,6 +16,7 @@
"@angular/platform-browser": "~13.1.0",
"@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "~13.1.0",
"libphonenumber-js": "^1.9.44",
"qrcode-generator": "^1.4.4",
"rxjs": "~7.4.0",
"simplebar": "^5.3.6",
@ -7151,6 +7152,11 @@
"node": ">=0.10.0"
}
},
"node_modules/libphonenumber-js": {
"version": "1.9.44",
"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.44.tgz",
"integrity": "sha512-zhw8nUMJuQf7jG1dZfEOKKOS6M3QYIv3HnvB/vGohNd0QfxIQcObH3a6Y6s350H+9xgBeOXClOJkS0hJ0yvS3g=="
},
"node_modules/license-webpack-plugin": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-4.0.0.tgz",
@ -17708,6 +17714,11 @@
"klona": "^2.0.4"
}
},
"libphonenumber-js": {
"version": "1.9.44",
"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.44.tgz",
"integrity": "sha512-zhw8nUMJuQf7jG1dZfEOKKOS6M3QYIv3HnvB/vGohNd0QfxIQcObH3a6Y6s350H+9xgBeOXClOJkS0hJ0yvS3g=="
},
"license-webpack-plugin": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-4.0.0.tgz",

+ 1
- 0
package.json View File

@ -18,6 +18,7 @@
"@angular/platform-browser": "~13.1.0",
"@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "~13.1.0",
"libphonenumber-js": "^1.9.44",
"qrcode-generator": "^1.4.4",
"rxjs": "~7.4.0",
"simplebar": "^5.3.6",

+ 4
- 0
src/app/app-routing.module.ts View File

@ -6,6 +6,10 @@ const routes: Routes = [
path: '',
loadChildren: async () => (await import('../routes/home/home.module')).HomeModule
},
{
path: 'auth',
loadChildren: async () => (await import('../routes/auth/auth.module')).AuthModule
},
{
path: 'panel',
loadChildren: async () => (await import('../routes/panel/panel.module')).PanelModule

+ 24
- 0
src/routes/auth/auth.module.ts View File

@ -0,0 +1,24 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AuthComponent } from './auth/auth.component';
@NgModule({
declarations: [
AuthComponent
],
imports: [
CommonModule,
FormsModule,
RouterModule.forChild([
{
path: '',
component: AuthComponent
}
])
]
})
export class AuthModule { }

+ 37
- 0
src/routes/auth/auth/auth.component.html View File

@ -0,0 +1,37 @@
<main class="flex ai-c jc-c">
<header>
<a routerLink="/" class="flex nowrap ai-c">
<i class="material-icons">arrow_back</i>
Back to home page
</a>
</header>
<section class="flex column">
<form>
<ng-container *ngIf="!Creating">
<h2>Login account</h2>
<p>With your account do login</p>
</ng-container>
<ng-container *ngIf="Creating">
<h2>Create account</h2>
<p>Create a new account</p>
</ng-container>
<div class="input-container flex column">
<label for="phone">Phone number</label>
<input id="phone" type="tel" autocomplete="off" name="melon-phone" placeholder="+1 123 456 789">
</div>
<div class="input-container flex column">
<label for="password">Password</label>
<input id="password" type="password" autocomplete="off" name="melon-password" placeholder="********">
</div>
<button>{{ Creating ? 'Create' : 'Login' }} Account</button>
</form>
<footer class="flex nowrap ai-c jc-c">
<span (click)="ToggleCreating()" *ngIf="!Creating">Create a new account</span>
<span (click)="ToggleCreating()" *ngIf="Creating">Login account</span>
</footer>
</section>
</main>

+ 139
- 0
src/routes/auth/auth/auth.component.scss View File

@ -0,0 +1,139 @@
main {
width: 100vw;
height: 100vh;
background-color: #ffda79;
overflow: hidden;
header {
position: absolute;
top: 20px;
left: 20px;
a {
padding: 6px 12px;
font-size: 1em;
background-color: transparent;
color: rgba($color: #000000, $alpha: 0.6);
transition: all 0.3s;
i {
color: rgba($color: #000000, $alpha: 0.8);
position: relative;
left: 0px;
margin-right: 12px;
transition: all 0.3s;
}
&:hover {
color: #000000;
i {
left: -8px;
}
}
}
}
section {
width: 350px;
form {
padding: 20px;
background-color: #ffff;
border-radius: 16px;
z-index: 1;
box-shadow: 0 3px 12px rgba($color: #000000, $alpha: 0.2);
h2 {
margin: 0;
}
p {
opacity: 0.7;
margin-bottom: 30px;
}
div.input-container {
border: 1px solid rgba($color: #000000, $alpha: 0.2);
border-radius: 8px;
overflow: hidden;
padding: 8px;
margin-bottom: 18px;
label {
margin-bottom: 5px;
}
}
button {
width: 100%;
margin-top: 12px;
padding: 12px 0;
font-size: 1em;
border-radius: 8px;
color: #fff;
background-color: #fda050;
box-shadow: 0 0 2px rgba($color: #000000, $alpha: 0.2);
transition: all 0.3s;
&:hover {
box-shadow: 0 2px 8px rgba($color: #000000, $alpha: 0.2);
}
&:active {
transform: scale(0.98);
}
}
}
footer {
position: relative;
top: -15px;
padding: 30px 20px 16px 20px;
border-radius: 0 0 16px 16px;
background-color: #868974;
z-index: 0;
box-shadow: 0 3px 8px rgba($color: #000000, $alpha: 0.2);
span {
cursor: pointer;
color: rgba($color: #fff, $alpha: 0.8);
transition: all 0.3s;
&:hover {
color: rgba($color: #fff, $alpha: 1);
}
}
}
}
}

+ 25
- 0
src/routes/auth/auth/auth.component.spec.ts View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AuthComponent } from './auth.component';
describe('AuthComponent', () => {
let component: AuthComponent;
let fixture: ComponentFixture<AuthComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AuthComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AuthComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 25
- 0
src/routes/auth/auth/auth.component.ts View File

@ -0,0 +1,25 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {
public Creating: boolean = false
public Phone: string = ''
public Password: string = ''
constructor() { }
ngOnInit(): void {
}
public ToggleCreating(): void {
this.Creating = !this.Creating
this.Password = ''
this.Password = ''
}
}

Loading…
Cancel
Save