Skip to content
This repository was archived by the owner on Aug 26, 2024. It is now read-only.

Commit 99a87ba

Browse files
author
周刘通
committed
#add complete the user authentication component
1 parent 14ba62f commit 99a87ba

16 files changed

+163
-99
lines changed

‎apps/web-ng/src/app/features/home/components/discussion-list/discussion-list.component.html

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -24,66 +24,6 @@
2424

2525
<div class="DiscussionList">
2626
<ul class="DiscussionList-discussions">
27-
<li data-id="42">
28-
<div class="DiscussionListItem Slidable"><span
29-
class="Slidable-underneath Slidable-underneath--left Slidable-underneath--elastic disabled"><i
30-
class="icon fas fa-check "></i></span>
31-
<div class="DiscussionListItem-content Slidable-content"><a href="/u/ybharath007"
32-
class="DiscussionListItem-author" title=""
33-
data-original-title="ybharath007 started 3 hours ago"><span class="Avatar "
34-
style="background: rgb(208, 160, 229);">Y</span></a>
35-
<ul class="DiscussionListItem-badges badges"></ul><a href="/d/42-test"
36-
class="DiscussionListItem-main">
37-
<h3 class="DiscussionListItem-title">test</h3>
38-
<ul class="DiscussionListItem-info">
39-
<li class="item-tags"><span class="TagsLabel "><span class="TagLabel colored"
40-
style="color: rgb(136, 136, 136); background-color: rgb(136, 136, 136);"><span
41-
class="TagLabel-text"> General</span></span></span></li>
42-
<li class="item-terminalPost"><span> <span class="username">ybharath007</span> started
43-
<time pubdate="" datetime="2020-12-19T12:25:35+08:00"
44-
title="Saturday, December 19, 2020 12:25 PM" data-humantime="">3 hours
45-
ago</time></span>
46-
</li>
47-
</ul>
48-
</a><span class="DiscussionListItem-count" title="">0</span>
49-
</div>
50-
</div>
51-
</li>
52-
<li>
53-
<pre>
54-
55-
56-
57-
58-
59-
60-
61-
62-
63-
64-
65-
66-
67-
68-
69-
70-
71-
72-
73-
74-
75-
76-
77-
78-
79-
80-
81-
82-
83-
84-
85-
1
86-
</pre>
87-
</li>
27+
<li *ngFor="let item of data">test </li>
8828
</ul>
8929
</div>

‎apps/web-ng/src/app/features/home/components/discussion-list/discussion-list.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { BaseComponent } from '@myworkspace/core';
77
templateUrl: 'discussion-list.component.html',
88
})
99
export class DiscussionListComponent extends BaseComponent {
10+
data: any[] = [...new Array(100)];
11+
1012
constructor() {
1113
super();
1214
}

‎apps/web-ng/src/app/features/home/components/forgot-password/forgot-password.component.html

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,21 @@
1-
<div>ForgotPassword</div>
1+
<div class="Modal modal-dialog ForgotPasswordModal Modal--small">
2+
<div class="Modal-content">
3+
<div class="Modal-close App-backControl"><button class="Button Button--icon Button--link hasIcon" type="button"
4+
title=""><i class="icon fas fa-times Button-icon"></i><span class="Button-label"></span></button></div>
5+
<form>
6+
<div class="Modal-header">
7+
<h3 class="App-titleControl App-titleControl--text">Forgot Password</h3>
8+
</div>
9+
<div class="Modal-body">
10+
<div class="Form Form--centered">
11+
<p class="helpText">Enter your email address and we will send you a link to reset your password.</p>
12+
<div class="Form-group"><input class="FormControl" name="email" type="email" placeholder="Email"
13+
bidi="function a(e){return arguments.length&amp;&amp;e!==n.SKIP&amp;&amp;(t=e,o(a)&amp;&amp;(a._changing(),a._state=&quot;active&quot;,r.forEach((function(e,n){e(s[n](t))})))),t}">
14+
</div>
15+
<div class="Form-group"><button class="Button Button--primary Button--block" type="submit"
16+
title="Recover Password"><span class="Button-label">Recover Password</span></button></div>
17+
</div>
18+
</div>
19+
</form>
20+
</div>
21+
</div>

‎apps/web-ng/src/app/features/home/components/home.component.html

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,50 @@
1-
<div id="app" class="App affix App--index" [ngClass]="{drawerOpen:drawerOpen,scrolled:scrolled}">
2-
<div id="app-navigation" class="App-navigation">
3-
<div class="Navigation ButtonGroup App-backControl">
4-
<button (click)="drawerOpen=true" class="Button Button--icon Navigation-drawer hasIcon" type="button"
5-
title="">
6-
<i class="icon fas fa-bars Button-icon"></i>
7-
<span class="Button-label"></span>
8-
</button>
1+
<div [ngClass]="{'modal-open': !!homeService.modalStatus}">
2+
<div id="app" class="App affix App--index" [ngClass]="{drawerOpen:drawerOpen,scrolled:scrolled}">
3+
<div id="app-navigation" class="App-navigation">
4+
<div class="Navigation ButtonGroup App-backControl">
5+
<button (click)="drawerOpen=true" class="Button Button--icon Navigation-drawer hasIcon" type="button"
6+
title="">
7+
<i class="icon fas fa-bars Button-icon"></i>
8+
<span class="Button-label"></span>
9+
</button>
10+
</div>
911
</div>
10-
</div>
1112

12-
<div id="drawer" class="App-drawer">
13-
<nx-tool-bar></nx-tool-bar>
14-
</div>
13+
<div id="drawer" class="App-drawer">
14+
<nx-tool-bar></nx-tool-bar>
15+
</div>
1516

16-
<main class="App-content">
17-
<div id="content">
18-
<div class="IndexPage">
19-
<div></div>
20-
<div class="container">
21-
<div class="sideNavContainer">
22-
<nx-navigation-bar></nx-navigation-bar>
23-
<div class="IndexPage-results sideNavOffset">
24-
<nx-discussion-list></nx-discussion-list>
17+
<main class="App-content">
18+
<div id="content">
19+
<div class="IndexPage">
20+
<div></div>
21+
<div class="container">
22+
<div class="sideNavContainer">
23+
<nx-navigation-bar></nx-navigation-bar>
24+
<div class="IndexPage-results sideNavOffset">
25+
<nx-discussion-list></nx-discussion-list>
26+
</div>
2527
</div>
2628
</div>
2729
</div>
2830
</div>
31+
</main>
32+
</div>
33+
<div id="modal">
34+
<div (click)="homeService.modalStatus=null;" class="ModalManager modal fade" [class.in]="!!homeService.modalStatus" [ngStyle]="{display: homeService.modalStatus?'block':'none'}">
35+
<ng-container (click)="$event.stopPropagation()" [ngSwitch]="homeService.modalStatus">
36+
<ng-container *ngSwitchCase="1">
37+
<nx-login-in></nx-login-in>
38+
</ng-container>
39+
<ng-container *ngSwitchCase="2">
40+
<nx-sign-up></nx-sign-up>
41+
</ng-container>
42+
<ng-container *ngSwitchCase="3">
43+
<nx-forgot-password></nx-forgot-password>
44+
</ng-container>
45+
</ng-container>
2946
</div>
30-
</main>
31-
</div>
32-
33-
<div (click)="drawerOpen=false" class="drawer-backdrop fade in" *ngIf="drawerOpen"></div>
47+
</div>
48+
<div (click)="drawerOpen=false;" class="drawer-backdrop fade in" *ngIf="drawerOpen"></div>
49+
<div class="modal-backdrop fade in" *ngIf="homeService.modalStatus"></div>
50+
</div>

‎apps/web-ng/src/app/features/home/components/home.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, HostListener, OnInit } from '@angular/core';
22

33
import { BaseComponent } from '@myworkspace/core';
4+
import { HomeService } from './home.service';
45

56
@Component({
67
selector: 'nx-home',
@@ -13,13 +14,13 @@ export class HomeComponent extends BaseComponent implements OnInit {
1314
scrolled: boolean = false;
1415

1516
constructor(
17+
public homeService: HomeService
1618
) {
1719
super()
1820
}
1921
ngOnInit(): void {
2022
}
2123

22-
2324
@HostListener('window:scroll', ['$event'])
2425
windowsScroll(event: Event) {
2526
if (window.pageYOffset) {

‎apps/web-ng/src/app/features/home/components/home.service.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,7 @@ import { Injectable } from '@angular/core';
44
providedIn: 'root'
55
})
66
export class HomeService {
7+
/** 模态框的状态 */
8+
modalStatus: number = null;
79
constructor() { }
810
}

‎apps/web-ng/src/app/features/home/components/login-in/login-in.component.html

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,35 @@
1-
<div>LoginIn</div>
1+
<div class="Modal modal-dialog LogInModal Modal--small">
2+
<div class="Modal-content">
3+
<div class="Modal-close App-backControl"><button (click)="homeService.modalStatus=null" class="Button Button--icon Button--link hasIcon" type="button"
4+
title=""><i class="icon fas fa-times Button-icon"></i><span class="Button-label"></span></button></div>
5+
<form>
6+
<div class="Modal-header">
7+
<h3 class="App-titleControl App-titleControl--text">Log In</h3>
8+
</div>
9+
<div class="Modal-body">
10+
<div class="LogInButtons"></div>
11+
<div class="Form Form--centered">
12+
<div class="Form-group"><input class="FormControl" name="identification" type="text"
13+
placeholder="Username or Email"
14+
bidi="function a(e){return arguments.length&amp;&amp;e!==n.SKIP&amp;&amp;(t=e,o(a)&amp;&amp;(a._changing(),a._state=&quot;active&quot;,r.forEach((function(e,n){e(s[n](t))})))),t}">
15+
</div>
16+
<div class="Form-group"><input class="FormControl" name="password" type="password"
17+
placeholder="Password"
18+
bidi="function a(e){return arguments.length&amp;&amp;e!==n.SKIP&amp;&amp;(t=e,o(a)&amp;&amp;(a._changing(),a._state=&quot;active&quot;,r.forEach((function(e,n){e(s[n](t))})))),t}">
19+
</div>
20+
<div class="Form-group">
21+
<div><label class="checkbox"><input type="checkbox"
22+
bidi="function a(e){return arguments.length&amp;&amp;e!==n.SKIP&amp;&amp;(t=e,o(a)&amp;&amp;(a._changing(),a._state=&quot;active&quot;,r.forEach((function(e,n){e(s[n](t))})))),t}">Remember
23+
Me</label></div>
24+
</div>
25+
<div class="Form-group"><button class="Button Button--primary Button--block" type="submit"
26+
title="Log In"><span class="Button-label">Log In</span></button></div>
27+
</div>
28+
</div>
29+
<div class="Modal-footer">
30+
<p class="LogInModal-forgotPassword"><a (click)="homeService.modalStatus=3">Forgot password?</a></p>
31+
<p class="LogInModal-signUp">Don't have an account? <a (click)="homeService.modalStatus=2">Sign Up</a></p>
32+
</div>
33+
</form>
34+
</div>
35+
</div>

‎apps/web-ng/src/app/features/home/components/login-in/login-in.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { Component } from '@angular/core';
22

33
import { BaseComponent } from '@myworkspace/core';
4+
import { HomeService } from '../home.service';
45

56
@Component({
67
selector: 'nx-login-in',
78
templateUrl: 'login-in.component.html',
89
})
910
export class LoginInComponent extends BaseComponent {
10-
constructor() {
11+
constructor(
12+
public homeService: HomeService
13+
) {
1114
super();
1215
}
1316
}

‎apps/web-ng/src/app/features/home/components/navigation-bar/navigation-bar.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<nav class="IndexPage-nav sideNav">
22
<ul>
33
<li class="App-primaryControl item-newDiscussion">
4-
<button class="Button Button--primary IndexPage-newDiscussion hasIcon" itemclassname="App-primaryControl"
4+
<button (click)="homeService.modalStatus=1" class="Button Button--primary IndexPage-newDiscussion hasIcon" itemclassname="App-primaryControl"
55
type="button" title="Start a Discussion">
66
<i class="icon fas fa-edit Button-icon"></i>
77
<span class="Button-label">Start a Discussion</span>

‎apps/web-ng/src/app/features/home/components/navigation-bar/navigation-bar.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component } from '@angular/core';
22

33
import { BaseComponent } from '@myworkspace/core';
4+
import { HomeService } from '../home.service';
45

56
@Component({
67
selector: 'nx-navigation-bar',
@@ -10,7 +11,9 @@ export class NavigationBarComponent extends BaseComponent {
1011
/** 是否展开 */
1112
open: boolean = false;
1213

13-
constructor() {
14+
constructor(
15+
public homeService: HomeService
16+
) {
1417
super();
1518
}
1619
}

‎apps/web-ng/src/app/features/home/components/readme.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
1. tool-bar // 响应式工具栏
22
2. navigation-bar // 响应式导航栏
3-
3. discussion-list // 响应式话题列表
3+
3. discussion-list // 响应式话题列表
4+
5+
4. login-in // 登录
6+
5. sign-up // 注册
7+
6. forgot-password // 找回密码

‎apps/web-ng/src/app/features/home/components/sign-up/sign-up.component.html

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,32 @@
1-
<div>SignUp</div>
1+
<div class="Modal modal-dialog Modal--small SignUpModal">
2+
<div class="Modal-content">
3+
<div class="Modal-close App-backControl"><button (click)="homeService.modalStatus=null" class="Button Button--icon Button--link hasIcon" type="button"
4+
title=""><i class="icon fas fa-times Button-icon"></i><span class="Button-label"></span></button></div>
5+
<form>
6+
<div class="Modal-header">
7+
<h3 class="App-titleControl App-titleControl--text">Sign Up</h3>
8+
</div>
9+
<div class="Modal-body">
10+
<div class="LogInButtons"></div>
11+
<div class="Form Form--centered">
12+
<div class="Form-group"><input class="FormControl" name="username" type="text"
13+
placeholder="Username"
14+
bidi="function a(e){return arguments.length&amp;&amp;e!==n.SKIP&amp;&amp;(t=e,o(a)&amp;&amp;(a._changing(),a._state=&quot;active&quot;,r.forEach((function(e,n){e(s[n](t))})))),t}">
15+
</div>
16+
<div class="Form-group"><input class="FormControl" name="email" type="email" placeholder="Email"
17+
bidi="function a(e){return arguments.length&amp;&amp;e!==n.SKIP&amp;&amp;(t=e,o(a)&amp;&amp;(a._changing(),a._state=&quot;active&quot;,r.forEach((function(e,n){e(s[n](t))})))),t}">
18+
</div>
19+
<div class="Form-group"><input class="FormControl" name="password" type="password"
20+
placeholder="Password"
21+
bidi="function a(e){return arguments.length&amp;&amp;e!==n.SKIP&amp;&amp;(t=e,o(a)&amp;&amp;(a._changing(),a._state=&quot;active&quot;,r.forEach((function(e,n){e(s[n](t))})))),t}">
22+
</div>
23+
<div class="Form-group"><button class="Button Button--primary Button--block" type="submit"
24+
title="Sign Up"><span class="Button-label">Sign Up</span></button></div>
25+
</div>
26+
</div>
27+
<div class="Modal-footer">
28+
<p class="SignUpModal-logIn">Already have an account? <a (click)="homeService.modalStatus=1">Log In</a></p>
29+
</div>
30+
</form>
31+
</div>
32+
</div>

‎apps/web-ng/src/app/features/home/components/sign-up/sign-up.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { Component } from '@angular/core';
22

33
import { BaseComponent } from '@myworkspace/core';
4+
import { HomeService } from '../home.service';
45

56
@Component({
67
selector: 'nx-sign-up',
78
templateUrl: 'sign-up.component.html',
89
})
910
export class SignUpComponent extends BaseComponent {
10-
constructor() {
11+
constructor(
12+
public homeService: HomeService
13+
) {
1114
super();
1215
}
1316
}

‎apps/web-ng/src/app/features/home/components/tool-bar/tool-bar.component.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ <h1 class="Header-title">
1111
<nx-search-box></nx-search-box>
1212
</li>
1313
<li class="item-signUp">
14-
<button class="Button Button--link" type="button" title="Sign Up">
14+
<button (click)="homeService.modalStatus=2" class="Button Button--link" type="button"
15+
title="Sign Up">
1516
<span class="Button-label">Sign Up</span>
1617
</button>
1718
</li>
1819
<li class="item-logIn">
19-
<button class="Button Button--link" type="button" title="Log In">
20+
<button (click)="homeService.modalStatus=1" class="Button Button--link" type="button"
21+
title="Log In">
2022
<span class="Button-label">Log In</span>
2123
</button>
2224
</li>

‎apps/web-ng/src/app/features/home/components/tool-bar/tool-bar.component.scss

Whitespace-only changes.

‎apps/web-ng/src/app/features/home/components/tool-bar/tool-bar.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { Component } from '@angular/core';
22

33
import { BaseComponent } from '@myworkspace/core';
4+
import { HomeService } from '../home.service';
45

56
@Component({
67
selector: 'nx-tool-bar',
7-
styleUrls: ['tool-bar.component.scss'],
88
templateUrl: 'tool-bar.component.html',
99
})
1010
export class ToolBarComponent extends BaseComponent {
11-
constructor() {
11+
constructor(
12+
public homeService: HomeService
13+
) {
1214
super();
1315
}
1416
}

0 commit comments

Comments
 (0)