Skip to content

Commit 7cb96ca

Browse files
rnastyukrnastyuk
authored
Feat/49 - Design sign-up form (#13)
* feat(sign-up-design): create initial form layout * feat(sign-up-design): changed icons, finished form layout * feat(sign-up-design): changed regexp, added autocomplete input attributes * feat(sign-up-design): removed console log
1 parent b7347f9 commit 7cb96ca

34 files changed

+667
-301
lines changed

‎.fantasticonrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ module.exports = {
33
outputDir: 'src/assets/icons/dist',
44
normalize: true,
55
descent: 45,
6+
prefix: 'osf-icon',
67
};

‎angular.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"src/assets"
3030
],
3131
"styles": [
32-
"src/assets/styles/styles.scss"
32+
"src/assets/styles/styles.scss",
33+
"src/assets/icons/dist/icons.css"
3334
],
3435
"stylePreprocessorOptions": {
3536
"includePaths": ["src"]

‎src/app/core/components/footer/footer.component.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111

1212
<div class="footer-socials">
1313
@for (icon of socialIcons; track icon.name) {
14-
<a [href]="icon.url" [attr.aria-label]="icon.ariaLabel">
15-
<img
16-
[ngSrc]="icon.icon"
17-
[alt]="icon.ariaLabel"
18-
width="36"
19-
height="36"
20-
/>
14+
<a
15+
class="icon-link"
16+
[href]="icon.url"
17+
[attr.aria-label]="icon.ariaLabel"
18+
>
19+
<i [class]="'osf-icon-' + icon.name"></i>
2120
</a>
2221
}
2322
</div>

‎src/app/core/components/footer/footer.component.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
.footer-links,
1515
.footer-socials {
1616
@include mix.flex-center;
17+
18+
a {
19+
color: var.$dark-blue-1;
20+
}
1721
}
1822

1923
.separator {
@@ -28,6 +32,19 @@
2832
.footer-socials {
2933
@include mix.flex-center;
3034
gap: 0.5rem;
35+
36+
.icon-link {
37+
@include mix.flex-center;
38+
height: 2.6rem;
39+
width: 2.6rem;
40+
border-radius: 0.5rem;
41+
background-color: var.$pr-blue-1;
42+
43+
i {
44+
color: white;
45+
font-size: 1.4rem;
46+
}
47+
}
3148
}
3249
}
3350

‎src/app/core/components/footer/footer.component.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,34 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { NgOptimizedImage } from '@angular/common';
32
import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
43
import { RouterLink } from '@angular/router';
54

65
@Component({
76
standalone: true,
87
selector: 'osf-footer',
9-
imports: [NgOptimizedImage, RouterLink],
8+
imports: [RouterLink],
109
templateUrl: './footer.component.html',
1110
styleUrl: './footer.component.scss',
1211
changeDetection: ChangeDetectionStrategy.OnPush,
1312
})
1413
export class FooterComponent {
1514
protected readonly socialIcons: SocialIcon[] = [
1615
{
17-
name: 'x',
18-
icon: 'assets/icons/socials/x.svg',
16+
name: 'twitter',
1917
url: '#',
2018
ariaLabel: 'X (formerly Twitter)',
2119
},
2220
{
2321
name: 'facebook',
24-
icon: 'assets/icons/socials/facebook.svg',
2522
url: '#',
2623
ariaLabel: 'Facebook',
2724
},
2825
{
2926
name: 'group',
30-
icon: 'assets/icons/socials/group.svg',
3127
url: '#',
3228
ariaLabel: 'Group',
3329
},
3430
{
3531
name: 'github',
36-
icon: 'assets/icons/socials/github.svg',
3732
url: '#',
3833
ariaLabel: 'GitHub',
3934
},

‎src/app/core/components/sidenav/sidenav.component.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,13 @@
1010
[routerLinkActiveOptions]="{ exact: true }"
1111
>
1212
@if (item.icon) {
13-
<img
14-
[ngSrc]="item.icon"
15-
[alt]="item.label + ' icon'"
16-
width="20"
17-
height="20"
18-
/>
13+
<!-- <img-->
14+
<!-- [ngSrc]="item.icon"-->
15+
<!-- [alt]="item.label + ' icon'"-->
16+
<!-- width="20"-->
17+
<!-- height="20"-->
18+
<!-- />-->
19+
<i [class]="'osf-icon-' + item.icon"></i>
1920
}
2021
<span>{{ item.label }}</span>
2122
</a>

‎src/app/core/components/sidenav/sidenav.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ import { NavItem } from '@osf/shared/entities/nav-item.interface';
1313
})
1414
export class SidenavComponent {
1515
protected readonly navItems: NavItem[] = [
16-
{ path: '/home', label: 'Home', icon: 'assets/icons/menu/home.svg' },
17-
{ path: '', label: 'Search OSF', icon: 'assets/icons/menu/search.svg' },
16+
{ path: '/home', label: 'Home', icon: 'home' },
17+
{ path: '', label: 'Search OSF', icon: 'search' },
1818
{
1919
path: '/support',
2020
label: 'Support',
21-
icon: 'assets/icons/menu/support.svg',
21+
icon: 'support',
2222
},
2323
];
2424
}

‎src/app/features/auth/sign-up/sign-up.component.html‎

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,113 @@
11
<section class="sign-up-container">
22
<h2>Create A Free Account</h2>
33

4-
<form [formGroup]="signUpForm"></form>
4+
<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
5+
<div class="btn-group">
6+
<p-button label="Sign up through ORCID" class="form-btn btn-full-width">
7+
<!--TODO change img tags to icons(fantasticon)-->
8+
9+
<!--<i class="osf-icon-orcid"></i>-->
10+
<img
11+
ngSrc="assets/images/orcid.svg"
12+
alt="Orchid icon"
13+
height="20"
14+
width="20"
15+
/>
16+
</p-button>
17+
<p-button
18+
label="Sign up through Institution"
19+
class="form-btn btn-full-width"
20+
>
21+
<i class="osf-icon-institutions"></i>
22+
</p-button>
23+
</div>
24+
25+
<p-divider align="center">
26+
<span class="divider-text">or</span>
27+
</p-divider>
28+
29+
<div class="form-fields">
30+
<div class="field">
31+
<label for="fullName">Full Name</label>
32+
<input
33+
id="fullName"
34+
type="text"
35+
pInputText
36+
formControlName="fullName"
37+
placeholder="John Doe"
38+
autocomplete="full-name"
39+
/>
40+
</div>
41+
42+
<div class="field">
43+
<label for="email">Email</label>
44+
<input
45+
id="email"
46+
type="email"
47+
pInputText
48+
formControlName="email"
49+
placeholder="email@example.com"
50+
autocomplete="off"
51+
/>
52+
</div>
53+
54+
<div class="field">
55+
<label for="password">Password</label>
56+
<p-password
57+
id="password"
58+
formControlName="password"
59+
[toggleMask]="true"
60+
[feedback]="false"
61+
autocomplete="new-password"
62+
></p-password>
63+
@if (
64+
signUpForm.controls["password"].errors &&
65+
signUpForm.get("password")?.touched
66+
) {
67+
<small class="text-danger">
68+
Your password needs to be at least 8 characters long, include both
69+
lower- and upper-case characters, and have at least one number or
70+
special character
71+
</small>
72+
}
73+
</div>
74+
75+
<div class="field">
76+
<label for="confirmPassword">Confirm Password</label>
77+
<p-password
78+
id="confirmPassword"
79+
formControlName="confirmPassword"
80+
[toggleMask]="true"
81+
[feedback]="false"
82+
autocomplete="new-password"
83+
></p-password>
84+
@if (
85+
signUpForm.get("confirmPassword")?.errors?.["passwordMismatch"] &&
86+
signUpForm.get("confirmPassword")?.touched
87+
) {
88+
<small class="text-danger">Passwords must match</small>
89+
}
90+
</div>
91+
92+
<div class="field-checkbox">
93+
<p-checkbox
94+
formControlName="agreeToTerms"
95+
[binary]="true"
96+
id="agreeToTerms"
97+
></p-checkbox>
98+
<label for="agreeToTerms">
99+
I agree to the
100+
<a routerLink="/terms-of-use">Terms of Use</a> and
101+
<a routerLink="/privacy-policy">Privacy Policy</a>
102+
</label>
103+
</div>
104+
</div>
105+
106+
<p-button
107+
class="btn-full-width"
108+
type="submit"
109+
label="Sign Up"
110+
[disabled]="!signUpForm.valid"
111+
></p-button>
112+
</form>
5113
</section>

‎src/app/features/auth/sign-up/sign-up.component.scss‎

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,74 @@
66
flex: 1;
77

88
.sign-up-container {
9-
@include mix.flex-column-center;
9+
@include mix.flex-column;
1010
flex: 1;
11-
width: 30rem;
12-
border-radius: 0.9rem;
13-
margin: 0.5rem 0;
14-
justify-content: center;
15-
background-color: white;
16-
border: 1px solid var.$grey-2;
11+
color: var.$dark-blue-1;
12+
width: 32rem;
13+
margin: 2rem 0;
14+
padding: 2rem;
15+
background: white;
16+
border-radius: 0.6rem;
17+
box-shadow: 0 2px 4px var.$grey-outline;
18+
19+
h2 {
20+
text-align: center;
21+
}
22+
23+
form {
24+
@include mix.flex-column;
25+
flex: 1;
26+
27+
.divider-text {
28+
background: white;
29+
}
30+
31+
.btn-group {
32+
@include mix.flex-column;
33+
gap: 1rem;
34+
margin-top: 2rem;
35+
color: var.$dark-blue-1;
36+
}
37+
38+
.form-fields {
39+
flex: 1;
40+
41+
.field {
42+
margin-bottom: 1rem;
43+
44+
.text-danger {
45+
color: var.$red-1;
46+
font-weight: 600;
47+
}
48+
}
49+
50+
.field-checkbox {
51+
@include mix.flex-align-center;
52+
margin: 1.5rem 0;
53+
54+
label {
55+
margin-bottom: 0;
56+
margin-left: 0.5rem;
57+
58+
a {
59+
font-weight: 700;
60+
color: var.$pr-blue-1;
61+
62+
&:hover {
63+
text-decoration: underline;
64+
}
65+
}
66+
}
67+
}
68+
}
69+
70+
.btn-full-width {
71+
justify-self: baseline;
72+
73+
i {
74+
font-size: 1.45rem;
75+
}
76+
}
77+
}
1778
}
1879
}

0 commit comments

Comments
 (0)