Skip to content

Commit

Permalink
Add account creation feature and page
Browse files Browse the repository at this point in the history
smolegz committed Sep 27, 2024
1 parent 1c035f3 commit f026248
Showing 35 changed files with 2,959 additions and 23 deletions.
4 changes: 3 additions & 1 deletion peer-prep-fe/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { HomeComponent } from './home/home.component';
import { FormsModule } from '@angular/forms';

const MODULES = [
CommonModule,
@@ -14,7 +15,8 @@ const MODULES = [
DashboardComponent,
RouterLinkActive,
RouterLink,
MatSlideToggleModule
MatSlideToggleModule,
FormsModule
];
@Component({
selector: 'app-root',
3 changes: 2 additions & 1 deletion peer-prep-fe/src/app/home/home.component.ts
Original file line number Diff line number Diff line change
@@ -14,4 +14,5 @@ export class HomeComponent {
goToLoginPage() {
this.router.navigate(['/login']);
}
}

}
49 changes: 43 additions & 6 deletions peer-prep-fe/src/app/login/login.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,44 @@
<div class="login-button">
<div
id="google-login-button"
class="login-button btn btn-primary"
(click)="signInWithGoogle()"
></div>
<div class="container">

<div class="form-container">
<h2> Create Account</h2>
<form id="userForm" [formGroup]="createAccountForm">

<!-- Username -->
<label for="name">Name:</label>
<div *ngIf="createAccountForm.get('username')?.invalid && createAccountForm.get('username')?.touched"
class="error-message">
<small *ngIf="createAccountForm.get('username')?.hasError('required')">Username is required</small>
</div>
<input type="text" id="name" formControlName="username">


<!-- Email -->
<label for="email">Email:</label>
<div *ngIf="createAccountForm.get('email')?.invalid && createAccountForm.get('email')?.touched" class="error-message">
<small *ngIf="createAccountForm.get('email')?.hasError('required')">Email is required</small>
<small *ngIf="createAccountForm.get('email')?.hasError('email')">Invalid email address</small>
</div>

<input type="email" id="email" formControlName="email">

<!-- Password -->
<label for="password">Password:</label>
<div *ngIf="createAccountForm.get('password')?.invalid && createAccountForm.get('password')?.touched"
class="error-message">
<small *ngIf="createAccountForm.get('password')?.hasError('required')">Password is required</small>
<small *ngIf="createAccountForm.get('password')?.hasError('minlength')">Minimum 6 characters</small>
</div>
<input type="password" id="password" formControlName="password">

<button class="submit" type="submit" (click)="createAccount()" [disabled]="createAccountForm.invalid">Submit</button>
</form>

</div>
<!-- <div class="button">
<div id="google-login-button" class="login-button btn btn-primary" (click)="signInWithGoogle()"></div>
</div> -->
</div>


80 changes: 68 additions & 12 deletions peer-prep-fe/src/app/login/login.component.scss

Large diffs are not rendered by default.

43 changes: 40 additions & 3 deletions peer-prep-fe/src/app/login/login.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Component, inject } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';

import { MatFormFieldModule } from '@angular/material/form-field';
import { AuthGoogleService } from '../services/auth-google.service';
import { P } from '@angular/cdk/keycodes';
import { CommonModule } from '@angular/common';

const MODULES: any[] = [MatFormFieldModule, FormsModule, ReactiveFormsModule];
const MODULES: any[] = [FormsModule, ReactiveFormsModule, CommonModule];

@Component({
selector: 'app-login',
@@ -16,7 +17,43 @@ const MODULES: any[] = [MatFormFieldModule, FormsModule, ReactiveFormsModule];
export class LoginComponent {
private authService = inject(AuthGoogleService);

createAccountForm = new FormGroup({
username: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(6)])
})

signInWithGoogle() {
this.authService.login();
}

createAccount() {
let apiUrl: string = "http://localhost:3001/users";

if (this.createAccountForm.invalid) {

}

fetch(apiUrl,{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(this.createAccountForm.value)
})
.then(response => {
if (!response.ok) {
if (response.status === 409) {
alert("Email/Username already exists.")
}
}
return response.json(); // Parse the JSON from the response
})
.then(data => {
console.log(data); // Handle the response data
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
})
}
}
3 changes: 3 additions & 0 deletions peer-prep-user/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**/node_modules
**/.env
**/.idea
14 changes: 14 additions & 0 deletions peer-prep-user/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# CS3219 project: PeerPrep

## User Service

### Quick Start

1. In the `user-service` directory, create a copy of the `.env.sample` file and name it `.env`.
2. Create a MongoDB Atlas Cluster and obtain the connection string.
3. Add the connection string to the `.env` file under the variable `DB_CLOUD_URI`.
4. Ensure you are in the `user-service` directory, then install project dependencies with `npm install`.
5. Start the User Service with `npm start` or `npm run dev`.
6. If the server starts successfully, you will see a "User service server listening on ..." message.

### Complete User Service Guide: [User Service Guide](./user-service/README.md)
9 changes: 9 additions & 0 deletions peer-prep-user/user-service/.env.sample
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
DB_CLOUD_URI=<CONNECTION_STRING>
DB_LOCAL_URI=mongodb://127.0.0.1:27017/peerprepUserServiceDB
PORT=3001

# Will use cloud MongoDB Atlas database
ENV=PROD

# Secret for creating JWT signature
JWT_SECRET=you-can-replace-this-with-your-own-secret
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions peer-prep-user/user-service/MongoDBSetup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# Setting up MongoDB Instance for User Service

1. Visit the MongoDB Atlas Site [https://www.mongodb.com/atlas](https://www.mongodb.com/atlas) and click on "Try Free"

2. Sign Up/Sign In with your preferred method.

3. You will be greeted with welcome screens. Feel free to skip them till you reach the Dashboard page.

4. Create a Database Deployment by clicking on the green `+ Create` Button:

![alt text](./GuideAssets/Creation.png)

5. Make selections as followings:

- Select Shared Cluster
- Select `aws` as Provider

![alt text](./GuideAssets/Selection1.png)

- Select `Singapore` for Region

![alt text](./GuideAssets/Selection2.png)

- Select `M0 Sandbox` Cluster (Free Forever - No Card Required)

> Ensure to select M0 Sandbox, else you may be prompted to enter card details and may be charged!
![alt text](./GuideAssets/Selection3.png)

- Leave `Additional Settings` as it is

- Provide a suitable name to the Cluster

![alt text](./GuideAssets/Selection4.png)

6. You will be prompted to set up Security for the database by providing `Username and Password`. Select that option and enter `Username` and `Password`. Please keep this safe as it will be used in User Service later on.

![alt text](./GuideAssets/Security.png)

7. Next, click on `Add my Current IP Address`. This will whiteliste your IP address and allow you to connect to the MongoDB Database.

![alt text](./GuideAssets/Network.png)

8. Click `Finish and Close` and the MongoDB Instance should be up and running.

## Whitelisting All IP's

1. Select `Network Access` from the left side pane on Dashboard.

![alt text](./GuideAssets/SidePane.png)

2. Click on the `Add IP Address` Button

![alt text](./GuideAssets/AddIPAddress.png)

3. Select the `ALLOW ACCESS FROM ANYWHERE` Button and Click `Confirm`

![alt text](./GuideAssets/IPWhitelisting.png)

Now, any IP Address can access this Database.
Loading

0 comments on commit f026248

Please sign in to comment.