Feat/49 - Design sign-up form

.fantasticonrc.js

@@ -3,4 +3,5 @@ module.exports = {
  outputDir: 'src/assets/icons/dist',
  normalize: true,
  descent: 45,
+ prefix: 'osf-icon',
 };

angular.json

@@ -29,7 +29,8 @@
  "src/assets"
  ],
  "styles": [
- "src/assets/styles/styles.scss"
+ "src/assets/styles/styles.scss",
+ "src/assets/icons/dist/icons.css"
  ],
  "stylePreprocessorOptions": {
  "includePaths": ["src"]

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

@@ -11,13 +11,12 @@
 
  <div class="footer-socials">
  @for (icon of socialIcons; track icon.name) {
- <a [href]="icon.url" [attr.aria-label]="icon.ariaLabel">
- <img
- [ngSrc]="icon.icon"
- [alt]="icon.ariaLabel"
- width="36"
- height="36"
- />
+ <a
+ class="icon-link"
+ [href]="icon.url"
+ [attr.aria-label]="icon.ariaLabel"
+ >
+ <i [class]="'osf-icon-' + icon.name"></i>
  </a>
  }
  </div>

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

@@ -14,6 +14,10 @@
  .footer-links,
  .footer-socials {
  @include mix.flex-center;
+
+ a {
+ color: var.$dark-blue-1;
+ }
  }
 
  .separator {
@@ -28,6 +32,19 @@
  .footer-socials {
  @include mix.flex-center;
  gap: 0.5rem;
+
+ .icon-link {
+ @include mix.flex-center;
+ height: 2.6rem;
+ width: 2.6rem;
+ border-radius: 0.5rem;
+ background-color: var.$pr-blue-1;
+
+ i {
+ color: white;
+ font-size: 1.4rem;
+ }
+ }
  }
  }
 

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

@@ -1,39 +1,34 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgOptimizedImage } from '@angular/common';
 import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
 import { RouterLink } from '@angular/router';
 
 @Component({
  standalone: true,
  selector: 'osf-footer',
- imports: [NgOptimizedImage, RouterLink],
+ imports: [RouterLink],
  templateUrl: './footer.component.html',
  styleUrl: './footer.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
  protected readonly socialIcons: SocialIcon[] = [
  {
- name: 'x',
- icon: 'assets/icons/socials/x.svg',
+ name: 'twitter',
  url: '#',
  ariaLabel: 'X (formerly Twitter)',
  },
  {
  name: 'facebook',
- icon: 'assets/icons/socials/facebook.svg',
  url: '#',
  ariaLabel: 'Facebook',
  },
  {
  name: 'group',
- icon: 'assets/icons/socials/group.svg',
  url: '#',
  ariaLabel: 'Group',
  },
  {
  name: 'github',
- icon: 'assets/icons/socials/github.svg',
  url: '#',
  ariaLabel: 'GitHub',
  },

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

@@ -10,12 +10,13 @@
  [routerLinkActiveOptions]="{ exact: true }"
  >
  @if (item.icon) {
- <img
- [ngSrc]="item.icon"
- [alt]="item.label + ' icon'"
- width="20"
- height="20"
- />
+ <!-- <img-->
+ <!-- [ngSrc]="item.icon"-->
+ <!-- [alt]="item.label + ' icon'"-->
+ <!-- width="20"-->
+ <!-- height="20"-->
+ <!-- />-->
+ <i [class]="'osf-icon-' + item.icon"></i>
  }
  <span>{{ item.label }}</span>
  </a>

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

@@ -13,12 +13,12 @@ import { NavItem } from '@osf/shared/entities/nav-item.interface';
 })
 export class SidenavComponent {
  protected readonly navItems: NavItem[] = [
- { path: '/home', label: 'Home', icon: 'assets/icons/menu/home.svg' },
- { path: '', label: 'Search OSF', icon: 'assets/icons/menu/search.svg' },
+ { path: '/home', label: 'Home', icon: 'home' },
+ { path: '', label: 'Search OSF', icon: 'search' },
  {
  path: '/support',
  label: 'Support',
- icon: 'assets/icons/menu/support.svg',
+ icon: 'support',
  },
  ];
 }

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

@@ -1,5 +1,113 @@
 <section class="sign-up-container">
  <h2>Create A Free Account</h2>
 
- <form [formGroup]="signUpForm"></form>
+ <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
+ <div class="btn-group">
+ <p-button label="Sign up through ORCID" class="form-btn btn-full-width">
+ <!--TODO change img tags to icons(fantasticon)-->
+
+ <!--<i class="osf-icon-orcid"></i>-->
+ <img
+ ngSrc="assets/images/orcid.svg"
+ alt="Orchid icon"
+ height="20"
+ width="20"
+ />
+ </p-button>
+ <p-button
+ label="Sign up through Institution"
+ class="form-btn btn-full-width"
+ >
+ <i class="osf-icon-institutions"></i>
+ </p-button>
+ </div>
+
+ <p-divider align="center">
+ <span class="divider-text">or</span>
+ </p-divider>
+
+ <div class="form-fields">
+ <div class="field">
+ <label for="fullName">Full Name</label>
+ <input
+ id="fullName"
+ type="text"
+ pInputText
+ formControlName="fullName"
+ placeholder="John Doe"
+ autocomplete="full-name"
+ />
+ </div>
+
+ <div class="field">
+ <label for="email">Email</label>
+ <input
+ id="email"
+ type="email"
+ pInputText
+ formControlName="email"
+ placeholder="email@example.com"
+ autocomplete="off"
+ />
+ </div>
+
+ <div class="field">
+ <label for="password">Password</label>
+ <p-password
+ id="password"
+ formControlName="password"
+ [toggleMask]="true"
+ [feedback]="false"
+ autocomplete="new-password"
+ ></p-password>
+ @if (
+ signUpForm.controls["password"].errors &&
+ signUpForm.get("password")?.touched
+ ) {
+ <small class="text-danger">
+ Your password needs to be at least 8 characters long, include both
+ lower- and upper-case characters, and have at least one number or
+ special character
+ </small>
+ }
+ </div>
+
+ <div class="field">
+ <label for="confirmPassword">Confirm Password</label>
+ <p-password
+ id="confirmPassword"
+ formControlName="confirmPassword"
+ [toggleMask]="true"
+ [feedback]="false"
+ autocomplete="new-password"
+ ></p-password>
+ @if (
+ signUpForm.get("confirmPassword")?.errors?.["passwordMismatch"] &&
+ signUpForm.get("confirmPassword")?.touched
+ ) {
+ <small class="text-danger">Passwords must match</small>
+ }
+ </div>
+
+ <div class="field-checkbox">
+ <p-checkbox
+ formControlName="agreeToTerms"
+ [binary]="true"
+ id="agreeToTerms"
+ ></p-checkbox>
+ <label for="agreeToTerms">
+ I agree to the
+ <a routerLink="/terms-of-use">Terms of Use</a> and
+ <a routerLink="/privacy-policy">Privacy Policy</a>
+ </label>
+ </div>
+ </div>
+
+ <p-button
+ class="btn-full-width"
+ type="submit"
+ label="Sign Up"
+ [disabled]="!signUpForm.valid"
+ ></p-button>
+ </form>
 </section>

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

@@ -6,13 +6,74 @@
  flex: 1;
 
  .sign-up-container {
- @include mix.flex-column-center;
+ @include mix.flex-column;
  flex: 1;
- width: 30rem;
- border-radius: 0.9rem;
- margin: 0.5rem 0;
- justify-content: center;
- background-color: white;
- border: 1px solid var.$grey-2;
+ color: var.$dark-blue-1;
+ width: 32rem;
+ margin: 2rem 0;
+ padding: 2rem;
+ background: white;
+ border-radius: 0.6rem;
+ box-shadow: 0 2px 4px var.$grey-outline;
+
+ h2 {
+ text-align: center;
+ }
+
+ form {
+ @include mix.flex-column;
+ flex: 1;
+
+ .divider-text {
+ background: white;
+ }
+
+ .btn-group {
+ @include mix.flex-column;
+ gap: 1rem;
+ margin-top: 2rem;
+ color: var.$dark-blue-1;
+ }
+
+ .form-fields {
+ flex: 1;
+
+ .field {
+ margin-bottom: 1rem;
+
+ .text-danger {
+ color: var.$red-1;
+ font-weight: 600;
+ }
+ }
+
+ .field-checkbox {
+ @include mix.flex-align-center;
+ margin: 1.5rem 0;
+
+ label {
+ margin-bottom: 0;
+ margin-left: 0.5rem;
+
+ a {
+ font-weight: 700;
+ color: var.$pr-blue-1;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+
+ .btn-full-width {
+ justify-self: baseline;
+
+ i {
+ font-size: 1.45rem;
+ }
+ }
+ }
  }
 }