Skip to content

Commit ef61aa6

Browse files
marcode24marcode24
authored
Merge pull request #7 from marcode24/dev
💄 add loader
2 parents a419181 + 153a150 commit ef61aa6

File tree

67 files changed

+1049
-142
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+1049
-142
lines changed

‎README.md

Lines changed: 90 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,103 @@
1-
# Frontend
1+
# Cloud Box - A simple cloud storage service
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.2.
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.6
44

5-
## Development server
5+
## Getting Started
66

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
7+
### Requirements
88

9-
## Code scaffolding
9+
- [Git](https://git-scm.com/downloads)
10+
- [NodeJs](https://nodejs.org/en/)
11+
- [Npm](https://www.npmjs.com/)
12+
- [Angular CLI](https://angular.io/cli)
1013

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
14+
### Installation
1215

13-
## Build
16+
#### Clone the repository
1417

15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
18+
```shell
19+
git clone
20+
https://github.com/marcode24/cloudbox-frontend
21+
```
1622

17-
## Running unit tests
23+
#### Check into the cloned repository
1824

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
25+
```shell
26+
cd cloudbox-frontend
27+
```
2028

21-
## Running end-to-end tests
29+
#### Install dependencies
2230

23-
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
31+
```shell
32+
npm install
33+
```
2434

25-
## Further help
35+
#### Start the server
2636

27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
37+
```shell
38+
ng serve
39+
```
40+
41+
#### Open the browser and navigate to
42+
43+
```shell
44+
http://localhost:4200/
45+
```
46+
47+
## Environments
48+
49+
| Name | URL | PORT |
50+
| ---------- | ---------------------------------------- | ---- |
51+
| Localhost | [localhost](http://localhost:4200) | 4200 |
52+
| Production | [www.domain.com](https://www.domain.com) |
53+
54+
## Folder Structure
55+
56+
.
57+
├── src
58+
│ ├── app # Source code application
59+
│ │ │── auth # Module for auth feature
60+
│ │ ├── core # Module as Singleton
61+
│ │ │ ├── components
62+
│ │ │ ├── enums
63+
│ │ │ ├── guards
64+
│ │ │ ├── interceptors
65+
│ │ │ ├── interfaces
66+
│ │ │ ├── models
67+
│ │ │ ├── services
68+
│ │ │ └── utils
69+
│ │ ├── features # Module for features which compose the application
70+
│ │ ├── shared # Module for components shared between application modules
71+
│ │ │ ├── components
72+
│ ├── assets # Styles, images, icons, fonts etc
73+
│ ├── environments # Config by environment (localhost and production)
74+
│ └── styles # Global styles
75+
└── README.md
76+
77+
## Previews - Desktop
78+
79+
### Login
80+
81+
![Login](https://res.cloudinary.com/dfeujtobk/image/upload/v1683409111/cloudbox/desktop/login_ze2kbb.png)
82+
83+
### Register
84+
85+
![Register](https://res.cloudinary.com/dfeujtobk/image/upload/v1683409111/cloudbox/desktop/register_xze8iw.png)
86+
87+
### Home
88+
89+
![Home](https://res.cloudinary.com/dfeujtobk/image/upload/v1683409111/cloudbox/desktop/home_eshrq7.png)
90+
91+
## Previews - Mobile
92+
93+
### Login
94+
95+
![Login](https://res.cloudinary.com/dfeujtobk/image/upload/v1683409111/cloudbox/mobile/login_rcldxq.png)
96+
97+
### Register
98+
99+
![Register](https://res.cloudinary.com/dfeujtobk/image/upload/v1683409111/cloudbox/mobile/register_tyrfwo.png)
100+
101+
### Home
102+
103+
![Home](https://res.cloudinary.com/dfeujtobk/image/upload/v1683409111/cloudbox/mobile/home_dfui84.png)

‎src/app/auth/auth.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="auth-wrapper">
2+
<app-header-auth></app-header-auth>
3+
<router-outlet></router-outlet>
4+
</div>

‎src/app/auth/auth.component.scss

Whitespace-only changes.

‎src/app/auth/auth.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { AuthComponent } from './auth.component';
4+
5+
describe('AuthComponent', () => {
6+
let component: AuthComponent;
7+
let fixture: ComponentFixture<AuthComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ AuthComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(AuthComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/auth/auth.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-auth',
5+
templateUrl: './auth.component.html',
6+
styleUrls: ['./auth.component.scss']
7+
})
8+
export class AuthComponent { }

‎src/app/auth/auth.module.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,24 @@ import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { RouterModule } from '@angular/router';
44

5+
import { ComponentsModule as CoreComponentsModule } from '@components/components.module';
6+
7+
import { AuthComponent } from './auth.component';
58
import { ComponentsModule } from './components/components.module';
69
import { LoginComponent } from './login/login.component';
710
import { RegisterComponent } from './register/register.component';
811

912
@NgModule({
1013
declarations: [
1114
LoginComponent,
12-
RegisterComponent
15+
RegisterComponent,
16+
AuthComponent
1317
],
1418
imports: [
1519
CommonModule,
1620
RouterModule,
17-
ComponentsModule
21+
ComponentsModule,
22+
CoreComponentsModule
1823
]
1924
})
2025
export class AuthModule { }

‎src/app/auth/auth.routing.ts

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
import { NgModule } from "@angular/core";
22
import { RouterModule, Routes } from "@angular/router";
33

4+
import { AuthComponent } from "./auth.component";
45
import { LoginComponent } from "./login/login.component";
56
import { RegisterComponent } from "./register/register.component";
67

78
const routes: Routes = [
8-
{
9-
path: 'login',
10-
component: LoginComponent
11-
},
12-
{
13-
path: 'register',
14-
component: RegisterComponent
15-
}
9+
{
10+
path: '',
11+
component: AuthComponent,
12+
children: [
13+
{
14+
path: 'login',
15+
component: LoginComponent
16+
},
17+
{
18+
path: 'register',
19+
component: RegisterComponent
20+
},
21+
],
22+
},
1623
];
1724

1825
@NgModule({

‎src/app/auth/components/register-form/register-form.component.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,23 @@ export class RegisterFormComponent {
1717
private regexExpressions = RegexClass;
1818
@Output() registerData: EventEmitter<ICreateAccount> = new EventEmitter<ICreateAccount>();
1919
registerForm = this.fb.group({
20-
name: ['marco', [
20+
name: ['', [
2121
Validators.required,
2222
Validators.pattern(this.regexExpressions.ONLY_TEXT),
2323
]],
24-
surname: ['cruz', [
24+
surname: ['', [
2525
Validators.required,
2626
Validators.pattern(this.regexExpressions.ONLY_TEXT),
2727
]],
28-
email: ['[email protected]', [
28+
email: ['', [
2929
Validators.required,
3030
Validators.pattern(this.regexExpressions.EMAIL),
3131
]],
32-
password: ['Mysecret123$', [
32+
password: ['', [
3333
Validators.required,
3434
Validators.pattern(this.regexExpressions.PASSWORD),
3535
]],
36-
confirmPassword: ['Mysecret123$', [
36+
confirmPassword: ['', [
3737
Validators.required,
3838
]],
3939
}, {

‎src/app/auth/login/login.component.html

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
1-
<div class="auth-wrapper">
2-
<div class="container">
3-
<section class="logo-content">
4-
<div class="logo">
5-
<img src="" alt="logo_image">
6-
</div>
7-
<img src="assets/images/login.svg" alt="media" class="login-image">
8-
</section>
9-
<section class="form-group">
10-
<div class="main">
11-
<span class="title">Iniciar sesión</span>
12-
<span class="sign-up">¿No tienes una cuenta?
13-
<a routerLink="/register">Regístrate</a>
14-
</span>
15-
</div>
16-
<app-login-form
17-
(loginData)="login($event)"
18-
[showErrors]="showErrors"
19-
[errors]="errors"
20-
></app-login-form>
21-
</section>
22-
</div>
1+
<div class="container">
2+
<figure>
3+
<img src="assets/images/login.svg" alt="media" class="login-image">
4+
</figure>
5+
<section class="form-group">
6+
<div class="main">
7+
<span class="title">Iniciar sesión</span>
8+
<span class="sign-up">¿No tienes una cuenta?
9+
<a routerLink="/register">Regístrate</a>
10+
</span>
11+
</div>
12+
<app-login-form
13+
(loginData)="login($event)"
14+
[showErrors]="showErrors"
15+
[errors]="errors"
16+
></app-login-form>
17+
</section>
2318
</div>

‎src/app/auth/login/login.component.scss

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
11
@import 'settings/_colors.scss';
22
@import 'settings/_typography.scss';
33

4-
.logo-content {
5-
flex: 2;
6-
}
7-
8-
.logo {
9-
position: absolute;
10-
top: 1rem;
11-
left: 1rem;
12-
}
134

14-
.login-image {
15-
width: 100%;
16-
height: 100%;
17-
max-width: 80rem;
18-
background-repeat: no-repeat;
19-
background-size: cover;
20-
background-position: center;
21-
}
225

236

247
.options {

0 commit comments

Comments
 (0)