diff options
| author | transtrike <transtrike@gmail.com> | 2021-01-08 16:12:26 +0200 |
|---|---|---|
| committer | transtrike <transtrike@gmail.com> | 2021-01-08 16:12:26 +0200 |
| commit | ad21157222b96ba311b5a6011e4b42a4da0707ee (patch) | |
| tree | 6273263d2266d8d60da2334526827e80f7316341 /src | |
| parent | 505a43fcfc6f2462260708c44dedce642646619f (diff) | |
| parent | 9185648ed75d2d5f1ca9d19f980e15e66709b2c6 (diff) | |
| download | DevHive-ad21157222b96ba311b5a6011e4b42a4da0707ee.tar DevHive-ad21157222b96ba311b5a6011e4b42a4da0707ee.tar.gz DevHive-ad21157222b96ba311b5a6011e4b42a4da0707ee.zip | |
Merge branch 'dev' of DevHive into dev
Diffstat (limited to 'src')
13 files changed, 144 insertions, 185 deletions
diff --git a/src/DevHive.Angular/src/app/app.component.css b/src/DevHive.Angular/src/app/app.component.css index e69de29..acac3cf 100644 --- a/src/DevHive.Angular/src/app/app.component.css +++ b/src/DevHive.Angular/src/app/app.component.css @@ -0,0 +1,4 @@ +div { + width: 100%; + height: 100%; +} diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index 20d9173..667ae12 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { LoginComponent } from './login/login.component'; +import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; @NgModule({ diff --git a/src/DevHive.Angular/src/app/components/login/login.component.css b/src/DevHive.Angular/src/app/components/login/login.component.css index e69de29..f8b6963 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.css +++ b/src/DevHive.Angular/src/app/components/login/login.component.css @@ -0,0 +1,56 @@ +#content { + height: 100%; + max-width: 20em; + margin-left: auto; + margin-right: auto; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +#title { + font-size: 2em; + font-weight: bold; +} + +#content input[type=text], #content #submit-btn { + border: 2px solid black; + border-radius: 0.4em; + box-sizing: border-box; + width: 100%; + margin-top: 0.5em; + font-size: 0.8em; + padding: 0.3em; +} + +#content input[type=text]:nth-last-of-type(1) { + margin-bottom: 0.5em; +} + +input[type=text]:focus, button[type=submit]:focus { + outline: 0; +} + +#content hr { + width: 100%; + border: 1px solid black; + box-sizing: border-box; +} + +#submit-btn { + background-color: black; + color: white; + text-align: center; +} + +#submit-btn:hover { + cursor: pointer; + border-color: darkgrey !important; + background-color: darkgrey; +} + +#submit-btn:active { + transform: scale(0.9); +} diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html index 5fd3c3c..c33f493 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.html +++ b/src/DevHive.Angular/src/app/components/login/login.component.html @@ -3,13 +3,10 @@ Login </div> <hr> - <form action="" method="get"> - <input type="text" placeholder="Username"> - <input type="text" placeholder="Password"> + <form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()"> + <input type="text" placeholder="Username" name="username" formControlName="username"> + <input type="text" placeholder="Password" name="password" formControlName="password"> + <hr> + <button type="submit" value="Submit" id="submit-btn">Submit</button> </form> - <hr> - <div id="submit-btn"> - Continue - <input type="submit"> - </div> -</div>
\ No newline at end of file +</div> diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts index 4f58421..fb90837 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.ts +++ b/src/DevHive.Angular/src/app/components/login/login.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { Title } from '@angular/platform-browser'; @Component({ selector: 'app-login', @@ -6,10 +8,37 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { + loginUserFormGroup: FormGroup; - constructor() { } + private _title = 'Login'; + + constructor(private titleService: Title, private fb: FormBuilder) { + titleService.setTitle(this._title); + } ngOnInit(): void { + this.loginUserFormGroup = this.fb.group({ + username: ['', [ + Validators.required, + Validators.minLength(3) + ]], + password: ['', [ + Validators.required, + // Add password pattern + ]] + }); } + onSubmit(): void { + fetch('http://localhost:5000/api/User/login', { + method: 'POST', + body: `{ + "UserName": "${this.loginUserFormGroup.get('username')?.value}", + "Password": "${this.loginUserFormGroup.get('password')?.value}" + }`, + headers: { + 'Content-Type': 'application/json' + } + }).then(response => response.json()).then(data => { console.log(data); }); + } } diff --git a/src/DevHive.Angular/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css index a01992c..f8b6963 100644 --- a/src/DevHive.Angular/src/app/components/register/register.component.css +++ b/src/DevHive.Angular/src/app/components/register/register.component.css @@ -1,6 +1,6 @@ #content { height: 100%; - max-width: 80%; + max-width: 20em; margin-left: auto; margin-right: auto; @@ -15,50 +15,42 @@ font-weight: bold; } -#content input { +#content input[type=text], #content #submit-btn { border: 2px solid black; border-radius: 0.4em; box-sizing: border-box; width: 100%; margin-top: 0.5em; - font-size: 0.8em; - padding: 0.3em; + font-size: 0.8em; + padding: 0.3em; } -#content > input[type=text]:nth-last-of-type(1) { - margin-bottom: 0.5em; +#content input[type=text]:nth-last-of-type(1) { + margin-bottom: 0.5em; } -input[type=text]:focus { - outline: 0; +input[type=text]:focus, button[type=submit]:focus { + outline: 0; } -#content > hr { +#content hr { width: 100%; border: 1px solid black; box-sizing: border-box; } #submit-btn { - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - width: 100%; - - background-color: black; - color: white; - text-align: center; - padding: 0.2em; - margin-top: 0.5em; + background-color: black; + color: white; + text-align: center; } #submit-btn:hover { - border-color: darkgrey; - background-color: darkgrey; + cursor: pointer; + border-color: darkgrey !important; + background-color: darkgrey; } -#submit-btn > input[type=submit] { - width: 100%; - height: 100%; - display: none; +#submit-btn:active { + transform: scale(0.9); } diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html index c6b1d18..c701795 100644 --- a/src/DevHive.Angular/src/app/components/register/register.component.html +++ b/src/DevHive.Angular/src/app/components/register/register.component.html @@ -1,7 +1,7 @@ <div id="content"> <div id="title">Register</div> - - <form [formGroup]="registerUserFormGroup"> + + <form [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()"> <hr> Value: {{ registerUserFormGroup.value | json }} <hr> @@ -16,4 +16,4 @@ <hr> <button type="submit" value="Submit" id="submit-btn">Submit</button> </form> -</div>
\ No newline at end of file +</div> diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts index dee928a..2619353 100644 --- a/src/DevHive.Angular/src/app/components/register/register.component.ts +++ b/src/DevHive.Angular/src/app/components/register/register.component.ts @@ -26,11 +26,6 @@ export class RegisterComponent implements OnInit { Validators.required, Validators.minLength(3) ]], - age: [null, [ - Validators.required, - Validators.min(14), - Validators.max(120), - ]], username: ['', [ Validators.required, Validators.minLength(3) @@ -41,13 +36,29 @@ export class RegisterComponent implements OnInit { ]], password: ['', [ Validators.required, - //Add password pattern + // Add password pattern ]], }); this.registerUserFormGroup.valueChanges.subscribe(console.log); } + onSubmit(): void { + fetch('http://localhost:5000/api/User/register', { + method: 'POST', + body: `{ + "UserName": "${this.registerUserFormGroup.get('username')?.value}", + "Email": "${this.registerUserFormGroup.get('email')?.value}", + "FirstName": "${this.registerUserFormGroup.get('firstName')?.value}", + "LastName": "${this.registerUserFormGroup.get('lastName')?.value}", + "Password": "${this.registerUserFormGroup.get('password')?.value}" + }`, + headers: { + 'Content-Type': 'application/json' + } + }).then(response => response.json()).then(data => { console.log(data); }); + } + get firstName() { return this.registerUserFormGroup.get('firstName'); } @@ -56,10 +67,6 @@ export class RegisterComponent implements OnInit { return this.registerUserFormGroup.get('lastName'); } - get age() { - return this.registerUserFormGroup.get('age'); - } - get username() { return this.registerUserFormGroup.get('username'); } @@ -71,4 +78,4 @@ export class RegisterComponent implements OnInit { get password() { return this.registerUserFormGroup.get('password'); } -}
\ No newline at end of file +} diff --git a/src/DevHive.Angular/src/app/login/login.component.css b/src/DevHive.Angular/src/app/login/login.component.css deleted file mode 100644 index 572083c..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.css +++ /dev/null @@ -1,62 +0,0 @@ -html, body { - height: 100%; - margin: 0; -} - -body { - font: 21px sans-serif; -} - -#content { - height: 100%; - max-width: 20em; - margin-left: auto; - margin-right: auto; - - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -#title { - font-size: 2em; - font-weight: bold; -} - -#content input[type=text], #content #submit-btn { - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - width: 100%; - margin-top: 0.5em; - font-size: 0.8em; - padding: 0.3em; -} - -#content input[type=text]:nth-last-of-type(1) { - margin-bottom: 0.5em; -} - -input[type=text]:focus, button[type=submit]:focus { - outline: 0; -} - -#content hr { - width: 100%; - border: 1px solid black; - box-sizing: border-box; -} - -#submit-btn { - background-color: black; - color: white; - text-align: center; -} - -#submit-btn:hover { - border-color: darkgrey; - background-color: darkgrey; -} - - diff --git a/src/DevHive.Angular/src/app/login/login.component.html b/src/DevHive.Angular/src/app/login/login.component.html deleted file mode 100644 index 29cd27e..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.html +++ /dev/null @@ -1,12 +0,0 @@ -<div id="content"> - <div id="title"> - Login - </div> - <hr> - <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> - <input type="text" placeholder="Username" name="username" formControlName="userName"> - <input type="text" placeholder="Password" name="password" formControlName="password"> - <hr> - <button type="submit" value="Submit" id="submit-btn">Submit</button> - </form> -</div> diff --git a/src/DevHive.Angular/src/app/login/login.component.spec.ts b/src/DevHive.Angular/src/app/login/login.component.spec.ts deleted file mode 100644 index d2c0e6c..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LoginComponent } from './login.component'; - -describe('LoginComponent', () => { - let component: LoginComponent; - let fixture: ComponentFixture<LoginComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ LoginComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(LoginComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/DevHive.Angular/src/app/login/login.component.ts b/src/DevHive.Angular/src/app/login/login.component.ts deleted file mode 100644 index 140a852..0000000 --- a/src/DevHive.Angular/src/app/login/login.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl, FormBuilder } from '@angular/forms'; -import { Title } from '@angular/platform-browser'; - -@Component({ - selector: 'app-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.css'] -}) -export class LoginComponent implements OnInit { - loginForm: FormGroup; - - private _title = 'Login'; - - constructor(private titleService: Title, private fb: FormBuilder) { - titleService.setTitle(this._title); - } - - ngOnInit(): void { - this.loginForm = this.fb.group({ - userName: '', - password: '' - }); - } - - async onSubmit(): Promise<void> { - const response = await fetch('http://localhost:5000/api/User/login', { - method: 'POST', - body: `{"UserName": "${this.loginForm.get('userName')?.value}", "Password": "${this.loginForm.get('password')?.value}"}`, - headers: { - 'Content-Type': 'application/json' - } - }); - console.log(response); - } -} diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css index 90d4ee0..7dd6a23 100644 --- a/src/DevHive.Angular/src/styles.css +++ b/src/DevHive.Angular/src/styles.css @@ -1 +1,10 @@ /* You can add global styles to this file, and also import other style files */ + +html, body { + height: 100%; + margin: 0; +} + +body { + font: 21px sans-serif; +} |
