docs(register): Add register page

Author: 4drianMatei

frontend/src/app/public/howto/howto-get-started/howto-get-started.component.html

@@ -14,20 +14,22 @@ <h3>Account</h3>
       You can choose to connect via <strong>email/username and password</strong>, or
       via one of the following identity providers supported
     </p>
-    <ul class="identity-providers-list">
-      <li>
-        <i class="fab fa-github"></i> Github
-      </li>
-      <li>
-        <i class="fab fa-google"></i> Google
-      </li>
-      <li>
-        <i class="fab fa-gitlab"></i> Gitlab
-      </li>
-      <li>
-        <i class="fab fa-stack-overflow"></i> StackOverflow
-      </li>
-    </ul>
+    <div class="identity-providers-list">
+      <ul>
+        <li>
+          <i class="fab fa-github"></i> Github
+        </li>
+        <li>
+          <i class="fab fa-google"></i> Google
+        </li>
+        <li>
+          <i class="fab fa-gitlab"></i> Gitlab
+        </li>
+        <li>
+          <i class="fab fa-stack-overflow"></i> StackOverflow
+        </li>
+      </ul>
+    </div>
 
     <hr>
 

frontend/src/app/public/howto/howto-get-started/howto-get-started.component.scss

@@ -6,10 +6,3 @@
     text-align: center;
   }
 }
-
-.identity-providers-list {
-  margin-left: -2rem;
-  display: flex;
-  justify-content: space-between;
-  list-style: none;
-}

frontend/src/app/public/public-routing.module.ts

@@ -1,7 +1,6 @@
 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { BookmarksTaggedComponent } from './tag/bookmarks-tagged.component';
-import { AboutComponent } from './about/about.component';
 import { HomepageComponent } from './bookmarks/homepage.component';
 import { PrivacyPolicyComponent } from './privacy/privacy-policy.component';
 import { TermsOfServiceComponent } from './terms/terms-of-service.component';
@@ -11,6 +10,8 @@ import { PublicSnippetDetailsComponent } from './snippets/public-snippet-details
 import { PublicSnippetsComponent } from './public-snippets/public-snippets.component';
 import { SnippetTaggedComponent } from './snippets/tag/snippet-tagged.component';
 import { ExtensionsPageComponent } from './extensions/extensions-page.component';
+import { AboutComponent } from './about/about.component';
+import { RegisterComponent } from './register/register.component';
 
 const publicRoutes: Routes = [
   {
@@ -66,6 +67,10 @@ const publicRoutes: Routes = [
     path: 'about',
     component: AboutComponent
   },
+  {
+    path: 'register',
+    component: RegisterComponent
+  },
   {
     path: 'extensions',
     component: ExtensionsPageComponent

frontend/src/app/public/public.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
-import { AboutComponent } from './about/about.component';
 import { BookmarksTaggedService } from './tag/bookmarks-tagged.service';
 import { BookmarksTaggedComponent } from './tag/bookmarks-tagged.component';
 import { PublicRoutingModule } from './public-routing.module';
@@ -23,10 +22,13 @@ import { SnippetTaggedComponent } from './snippets/tag/snippet-tagged.component'
 import { SnippetTagService } from './snippets/tag/snippet-tag.service';
 import { FeedbackService } from './feedback/feedback.service';
 import { ExtensionsPageComponent } from './extensions/extensions-page.component';
+import { AboutComponent } from './about/about.component';
+import { RegisterComponent } from './register/register.component';
 
 @NgModule({
   declarations : [
     AboutComponent,
+    RegisterComponent,
     ExtensionsPageComponent,
     PrivacyPolicyComponent,
     TermsOfServiceComponent,

frontend/src/app/public/register/register.component.html

@@ -0,0 +1,32 @@
+<div id="about-content" class="jumbotron">
+  <h2>Register</h2>
+  <p class="lead mb-2">Create an <strong>account</strong> on Codever to manage your dev bookmarks and code snippets.
+    You can choose to register with your <strong>personal email</strong> or with one of the available identity
+    providers:
+
+  <div class="identity-providers-list">
+    <ul>
+      <li>
+        <i class="fab fa-github"></i> Github
+      </li>
+      <li>
+        <i class="fab fa-google"></i> Google
+      </li>
+      <li>
+        <i class="fab fa-gitlab"></i> Gitlab
+      </li>
+      <li>
+        <i class="fab fa-stack-overflow"></i> StackOverflow
+      </li>
+    </ul>
+  </div>
+
+
+  <p class="mt-2 mb-3">
+    Once registered you can use the available extensions to easily manage your bookmarks and code snippets:
+  </p>
+
+  <app-extensions [showEntryParagraph]="false" [logoSize]="32"></app-extensions>
+
+  <button class="ml-2 mt-4 btn btn-primary btn-sm" (click)="login()">Create account <i class="fas fa-user-plus"></i></button>
+</div>

frontend/src/app/public/register/register.component.scss

@@ -0,0 +1 @@
+

frontend/src/app/public/register/register.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { environment } from '../../../environments/environment';
+import { KeycloakService } from 'keycloak-angular';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent implements OnInit {
+
+  environment = environment;
+
+  constructor(private keycloakService: KeycloakService) {
+  }
+
+  ngOnInit() {
+  }
+
+  login() {
+    const options: Keycloak.KeycloakLoginOptions = {};
+    options.redirectUri = `${environment.APP_HOME_URL}`;
+    this.keycloakService.login(options);
+  }
+
+}

frontend/src/app/shared/navigation/navigation.component.html

@@ -48,6 +48,7 @@
             class="dropdown-item"
             href="https://dev.to/ama/how-i-manage-my-dev-bookmarks-and-save-time-and-nerves-56ae"
             target="_blank">
+            <i class="fas fa-smile-beam fa-sm"></i>
             Saves time and nerves
             <sup class="external-link-hint">
               <i class="fas fa-external-link-alt" style="font-size: smaller"></i>

frontend/src/styles.scss

@@ -102,10 +102,24 @@ ul.tags li:not(:last-child):after {
   justify-content: space-between;
 }
 
+.identity-providers-list {
+  display: flex;
+  ul {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    list-style: none;
+    li {
+      margin-right: 2rem;
+    }
+  }
+}
+
 // filter search-box
 /* Bootstrap 4 text input with search icon */
-.has-search  {
+.has-search {
   width: 30%;
+
   .form-control {
     padding-left: 2.375rem;
   }