Add login link to register page

src/app/register/register.component.html

@@ -67,4 +67,10 @@ <h2>Register</h2>
     </div>
     <button type="submit" [disabled]="registerForm.invalid">Register</button>
   </form>
+  <p>
+    Already have an account?
+    <a [routerLink]="['/login']" routerLinkActive="router-link-active"
+      >Register</a
+    >
+  </p>
 </div>

src/app/register/register.component.scss

@@ -0,0 +1,66 @@
+/* register.component.scss */
+
+div {
+  margin: 20px;
+  text-align: center;
+
+  h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+
+  form {
+    max-width: 400px;
+    margin: 0 auto;
+
+    div {
+      margin-bottom: 15px;
+
+      label {
+        display: block;
+        margin-bottom: 5px;
+      }
+
+      input {
+        width: 100%;
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+        transition: border-color 0.3s ease;
+
+        &:focus {
+          outline: none;
+          border-color: #007bff; /* Example focus color */
+        }
+      }
+
+      small {
+        color: red; /* Error message color */
+        display: block; /* Display error messages in block format */
+        margin-top: 5px; /* Add spacing above error messages */
+      }
+    }
+
+    button {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      margin-top: 15px;
+      background-color: #007bff;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+
+      &:hover {
+        background-color: #0056b3; /* Darker color on hover */
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

src/app/register/register.component.ts

@@ -6,14 +6,14 @@ import {
   updateProfile,
 } from '@angular/fire/auth';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { from } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [CommonModule, ReactiveFormsModule, RouterLink],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
 })