Skip to content

Commit 873211a

Browse files
AnthonyNahasAnthonyNahas
committed
feat(package): added auth ui component ngb-auth-firebaseui 
1 parent 5508c90 commit 873211a

File tree

9 files changed

+829
-0
lines changed

9 files changed

+829
-0
lines changed

Diff for: ‎src/auth/module/components/auth/auth.component.html

+355
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,355 @@
1+
<ngb-tabset>
2+
<!--Reset password tab-->
3+
<ngb-tab *ngIf="!passwordResetWished" title="Reset Password">
4+
<ng-template ngbTabContent>
5+
<form [formGroup]="resetPasswordFormGroup" (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
6+
<div class="card">
7+
<div class="card-block">
8+
<h3 class="card-title">Hello from <span class="highlight">ng-bootstrap-auth-firebaseui</span> Angular
9+
Library!</h3>
10+
11+
<div class="input-group mb-3">
12+
<div class="input-group-prepend">
13+
<span class="input-group-text" id="basic-addon1">@</span>
14+
</div>
15+
<input type="text"
16+
class="form-control"
17+
[readonly]="passReset"
18+
formControlName="email"
19+
placeholder="email"
20+
aria-label="email"
21+
aria-describedby="basic-addon1"
22+
required>
23+
</div>
24+
25+
<div class="text-center">
26+
<button class="btn btn-primary"
27+
type="submit"
28+
[disabled]="passReset">
29+
Reset
30+
</button>
31+
</div>
32+
33+
<div class="card-footer">
34+
<div class="progress">
35+
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
36+
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</form>
42+
</ng-template>
43+
</ngb-tab>
44+
45+
<!--Sign in tab-->
46+
<ngb-tab>
47+
<ng-template ngbTabTitle>Sign in</ng-template>
48+
<ng-template ngbTabContent>
49+
<form [formGroup]="signInFormGroup"
50+
(ngSubmit)="signInFormGroup.valid &&
51+
authProcess.signInWith
52+
(authProviders.EmailAndPassword,signInFormGroup.value.email,signInFormGroup.value.password)">
53+
<div class="card">
54+
<div class="card-block">
55+
<h3 class="card-title">Hello from <span class="highlight">ng-bootstrap-auth-firebaseui</span> Angular
56+
Library!</h3>
57+
58+
<div class="input-group mb-3">
59+
<div class="input-group-prepend">
60+
<span class="input-group-text" id="basic-addon2">@</span>
61+
</div>
62+
<input type="text"
63+
class="form-control"
64+
formControlName="email"
65+
placeholder="email"
66+
aria-label="email"
67+
aria-describedby="basic-addon2"
68+
required>
69+
</div>
70+
71+
<div class="form-group mb-3">
72+
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
73+
<div class="col-sm-10">
74+
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
75+
</div>
76+
</div>
77+
<div class="form-group">
78+
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
79+
<div class="col-sm-10">
80+
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</form>
86+
</ng-template>
87+
</ngb-tab>
88+
89+
<!--Register - sign up tab-->
90+
<ngb-tab>
91+
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
92+
<ng-template ngbTabContent>
93+
asf
94+
</ng-template>
95+
</ngb-tab>
96+
97+
</ngb-tabset>
98+
99+
<!--<mat-tab-group [color]="color">-->
100+
<!--<mat-tab *ngIf="passwordResetWished" label="Reset Password">-->
101+
<!--<form [formGroup]="resetPasswordFormGroup" (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">-->
102+
103+
<!--<mat-card>-->
104+
<!--&lt;!&ndash;card header&ndash;&gt;-->
105+
<!--<mat-card-header fxLayoutAlign="end">-->
106+
<!--<button mat-icon-button-->
107+
<!--[color]="color"-->
108+
<!--matTooltip="close"-->
109+
<!--matTooltipPosition="above"-->
110+
<!--(click)="passwordResetWished = false">-->
111+
<!--<mat-icon>close</mat-icon>-->
112+
<!--</button>-->
113+
<!--</mat-card-header>-->
114+
115+
<!--<mat-card-content>-->
116+
<!--<mat-form-field class="full-width" appearance="outline">-->
117+
<!--&lt;!&ndash;<mat-label>Reset e-mail address to password</mat-label>&ndash;&gt;-->
118+
<!--<input matInput-->
119+
<!--[readonly]="passReset"-->
120+
<!--formControlName="email"-->
121+
<!--required>-->
122+
<!--<mat-icon matSuffix [color]="color">email</mat-icon>-->
123+
<!--<mat-error *ngIf="resetPasswordEmailFormControl.hasError('required')">-->
124+
<!--E-mail is required to reset the password!-->
125+
<!--</mat-error>-->
126+
<!--<mat-error *ngIf="resetPasswordEmailFormControl.hasError('pattern')">-->
127+
<!--Please enter a valid e-mail address-->
128+
<!--</mat-error>-->
129+
<!--</mat-form-field>-->
130+
<!--</mat-card-content>-->
131+
<!--<mat-card-actions fxLayoutAlign="center">-->
132+
<!--<button mat-raised-button-->
133+
<!--type="submit"-->
134+
<!--[color]="color"-->
135+
<!--[disabled]="passReset">-->
136+
<!--Reset-->
137+
<!--</button>-->
138+
<!--</mat-card-actions>-->
139+
<!--<mat-card-footer *ngIf="passReset" fxLayoutAlign="center">-->
140+
<!--<p>Reset requested. Check your e-mail instructions.</p>-->
141+
<!--</mat-card-footer>-->
142+
<!--<mat-card-footer>-->
143+
<!--<mat-progress-bar *ngIf="authProcess.isLoading" mode="indeterminate"></mat-progress-bar>-->
144+
<!--</mat-card-footer>-->
145+
<!--</mat-card>-->
146+
<!--</form>-->
147+
<!--</mat-tab>-->
148+
<!--<mat-tab label="Sign in">-->
149+
<!--<mat-card>-->
150+
<!--<mat-card-content>-->
151+
<!--<form [formGroup]="signInFormGroup"-->
152+
<!--(ngSubmit)="signInFormGroup.valid &&-->
153+
<!--authProcess.signInWith-->
154+
<!--(authProviders.EmailAndPassword,signInFormGroup.value.email,signInFormGroup.value.password)">-->
155+
<!--<div fxLayout="column" fxLayoutAlign="center center">-->
156+
<!--<mat-form-field appearance="outline">-->
157+
<!--&lt;!&ndash;<mat-label>E-mail</mat-label>&ndash;&gt;-->
158+
<!--<input matInput-->
159+
<!--placeholder="E-mail"-->
160+
<!--formControlName="email"-->
161+
<!--required>-->
162+
<!--<mat-icon matSuffix [color]="color">email</mat-icon>-->
163+
<!--<mat-error *ngIf="signInEmailFormControl.hasError('required')">-->
164+
<!--E-mail is required-->
165+
<!--</mat-error>-->
166+
<!--<mat-error *ngIf="signInEmailFormControl.hasError('pattern')">-->
167+
<!--Please enter a valid e-mail address-->
168+
<!--</mat-error>-->
169+
<!--</mat-form-field>-->
170+
171+
<!--<mat-form-field appearance="outline">-->
172+
<!--&lt;!&ndash;<mat-label>Password</mat-label>&ndash;&gt;-->
173+
<!--<input matInput-->
174+
<!--type="password"-->
175+
<!--placeholder="Password"-->
176+
<!--minlength="6"-->
177+
<!--maxlength="25"-->
178+
<!--formControlName="password"-->
179+
<!--required>-->
180+
<!--<mat-icon matSuffix [color]="color">lock</mat-icon>-->
181+
<!--<mat-hint align="end" aria-live="polite">-->
182+
<!--{{signInFormGroup.value.password.length}} / 25-->
183+
<!--</mat-hint>-->
184+
<!--<mat-error *ngIf="sigInPasswordFormControl.hasError('required')">-->
185+
<!--Please do not forget the password-->
186+
<!--</mat-error>-->
187+
<!--<mat-error *ngIf="sigInPasswordFormControl.hasError('minlength')">-->
188+
<!--The password must be at least 6 characters long.-->
189+
<!--</mat-error>-->
190+
<!--<mat-error *ngIf="sigInPasswordFormControl.hasError('maxlength')">-->
191+
<!--The password must not exceed 25 characters-->
192+
<!--</mat-error>-->
193+
<!--</mat-form-field>-->
194+
195+
<!--<button mat-raised-button-->
196+
<!--style="margin-top: 20px"-->
197+
<!--type="submit"-->
198+
<!--class="space-top"-->
199+
<!--[color]="color">-->
200+
<!--Log In-->
201+
<!--</button>-->
202+
203+
<!--</div>-->
204+
<!--</form>-->
205+
206+
<!--<div fxLayoutAlign="center">-->
207+
<!--<button mat-button-->
208+
<!--class="space-top"-->
209+
<!--[color]="color"-->
210+
<!--(click)="passwordResetWished = true">-->
211+
<!--Forgot Password?-->
212+
<!--</button>-->
213+
<!--</div>-->
214+
215+
<!--</mat-card-content>-->
216+
<!--<mat-card-footer *ngIf="authProcess.isLoading">-->
217+
<!--<mat-progress-bar mode="indeterminate"></mat-progress-bar>-->
218+
<!--</mat-card-footer>-->
219+
<!--</mat-card>-->
220+
<!--</mat-tab>-->
221+
222+
<!--&lt;!&ndash;tab register&ndash;&gt;-->
223+
<!--<mat-tab label="Register">-->
224+
<!--<mat-card>-->
225+
<!--<mat-card-title>Registration</mat-card-title>-->
226+
<!--<div *ngIf="!authProcess.emailConfirmationSent;then register else confirm"></div>-->
227+
<!--<ng-template #register>-->
228+
<!--<mat-card-content fxLayout="column" fxLayoutAlign="center">-->
229+
<!--<form [formGroup]="signUpFormGroup" (ngSubmit)="signUpFormGroup.valid &&-->
230+
<!--authProcess.signUp-->
231+
<!--(signUpFormGroup.value.name,signUpFormGroup.value.email,signUpFormGroup.value.password)">-->
232+
<!--<div fxLayout="column" fxLayoutAlign="center">-->
233+
<!--&lt;!&ndash;name&ndash;&gt;-->
234+
<!--<mat-form-field appearance="outline" label="Name">-->
235+
<!--&lt;!&ndash;labels will work only with @angular/material@6.2.0 &ndash;&gt;-->
236+
<!--&lt;!&ndash;<mat-label>Name</mat-label>&ndash;&gt;-->
237+
<!--<input matInput-->
238+
<!--label="Name"-->
239+
<!--placeholder="Name"-->
240+
<!--title="Name"-->
241+
<!--minlength="2"-->
242+
<!--maxlength="30"-->
243+
<!--[formControl]="sigUpNameFormControl"-->
244+
<!--required>-->
245+
<!--<mat-icon matSuffix [color]="color">person</mat-icon>-->
246+
<!--<mat-hint align="end" aria-live="polite">-->
247+
<!--{{signUpFormGroup.value.name.length}} / 25-->
248+
<!--</mat-hint>-->
249+
<!--<mat-error *ngIf="sigUpNameFormControl.hasError('required')">-->
250+
<!--Name is required-->
251+
<!--</mat-error>-->
252+
<!--<mat-error *ngIf="sigUpPasswordFormControl.hasError('minlength')">-->
253+
<!--The name is too short!-->
254+
<!--</mat-error>-->
255+
<!--<mat-error *ngIf="sigUpPasswordFormControl.hasError('maxlength')">-->
256+
<!--The name is too long!-->
257+
<!--</mat-error>-->
258+
<!--</mat-form-field>-->
259+
260+
<!--&lt;!&ndash;email&ndash;&gt;-->
261+
<!--<mat-form-field appearance="outline">-->
262+
<!--&lt;!&ndash;<mat-label>E-mail</mat-label>&ndash;&gt;-->
263+
<!--<input matInput-->
264+
<!--placeholder="E-mail"-->
265+
<!--type="email"-->
266+
<!--[formControl]="sigUpEmailFormControl">-->
267+
<!--<mat-icon matSuffix [color]="color">email</mat-icon>-->
268+
<!--<mat-error *ngIf="sigUpEmailFormControl.hasError('required')">-->
269+
<!--E-mail is required-->
270+
<!--</mat-error>-->
271+
<!--<mat-error *ngIf="sigUpEmailFormControl.hasError('pattern')">-->
272+
<!--Please enter a valid e-mail address-->
273+
<!--</mat-error>-->
274+
<!--</mat-form-field>-->
275+
276+
<!--&lt;!&ndash;password&ndash;&gt;-->
277+
<!--<div fxLayout="column">-->
278+
279+
<!--<mat-form-field appearance="outline">-->
280+
<!--&lt;!&ndash;<mat-label>Password</mat-label>&ndash;&gt;-->
281+
<!--<input matInput-->
282+
<!--type="password"-->
283+
<!--placeholder="password"-->
284+
<!--name="password"-->
285+
<!--[formControl]="sigUpPasswordFormControl"-->
286+
<!--required>-->
287+
<!--<mat-icon matSuffix [color]="color">lock</mat-icon>-->
288+
289+
<!--<mat-hint align="end" aria-live="polite">-->
290+
<!--{{signUpFormGroup.value.password.length}} / 25-->
291+
<!--</mat-hint>-->
292+
293+
<!--<mat-error *ngIf="sigUpPasswordFormControl.hasError('required')" class="cut-text">-->
294+
<!--Please do not forget the password-->
295+
<!--</mat-error>-->
296+
297+
<!--<mat-error *ngIf="sigUpPasswordFormControl.hasError('minlength')" class="cut-text">-->
298+
<!--The password must be at least 6 characters long.-->
299+
<!--</mat-error>-->
300+
<!--<mat-error *ngIf="sigUpPasswordFormControl.hasError('maxlength')" class="cut-text">-->
301+
<!--The password can not be longer than 25 characters.-->
302+
<!--</mat-error>-->
303+
304+
<!--</mat-form-field>-->
305+
306+
<!--<mat-password-strength-->
307+
<!--[password]="signUpFormGroup.value.password"-->
308+
<!--[externalError]="sigUpPasswordFormControl.dirty">-->
309+
<!--</mat-password-strength>-->
310+
311+
<!--<div fxLayoutAlign="center center" style="margin-top: 0.5rem">-->
312+
<!--<mat-checkbox>I agree to the Terms of Service and Conditions</mat-checkbox>-->
313+
<!--<mat-checkbox>I have read and agree to the Privacy Policy</mat-checkbox>-->
314+
<!--</div>-->
315+
316+
<!--</div>-->
317+
318+
<!--<button mat-raised-button-->
319+
<!--style="margin-top: 20px"-->
320+
<!--type="submit"-->
321+
<!--[color]="color">-->
322+
<!--Register-->
323+
<!--</button>-->
324+
325+
<!--</div>-->
326+
<!--</form>-->
327+
328+
<!--<button *ngIf="guestEnabled"-->
329+
<!--mat-button-->
330+
<!--style="margin-top: 20px"-->
331+
<!--[color]="color"-->
332+
<!--(click)="authProcess.signInWith(authProvider.ANONYMOUS)">-->
333+
<!--<mat-icon>fingerprint</mat-icon>-->
334+
<!--continue as guest-->
335+
<!--</button>-->
336+
337+
<!--</mat-card-content>-->
338+
339+
<!--<mat-card-footer *ngIf="authProcess.isLoading">-->
340+
<!--<mat-progress-bar mode="indeterminate"></mat-progress-bar>-->
341+
<!--</mat-card-footer>-->
342+
343+
<!--</ng-template>-->
344+
345+
<!--&lt;!&ndash;confirm template&ndash;&gt;-->
346+
<!--<ng-template #confirm>-->
347+
<!--<ngx-auth-firebaseui-email-confirmation [email]="authProcess.emailToConfirm">-->
348+
<!--</ngx-auth-firebaseui-email-confirmation>-->
349+
<!--</ng-template>-->
350+
351+
<!--</mat-card>-->
352+
<!--</mat-tab>-->
353+
<!--</mat-tab-group>-->
354+
<!--<mat-divider></mat-divider>-->
355+
<!--<ngx-auth-firebaseui-providers [providers]="providers"></ngx-auth-firebaseui-providers>-->

Diff for: ‎src/auth/module/components/auth/auth.component.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.mat-card {
2+
margin: 2rem;
3+
}
4+
5+
.space-top {
6+
margin-top: .5rem;
7+
}
8+
9+
.full-width {
10+
width: 100%;
11+
}
12+
13+
.cut-text {
14+
text-overflow: ellipsis;
15+
overflow: hidden;
16+
white-space: nowrap;
17+
}

0 commit comments

Comments
 (0)