Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
David
mayan-document-ui
Commits
9fad39be
Commit
9fad39be
authored
Feb 08, 2020
by
David
Browse files
Angular frontend work
parent
07c87aa7
Changes
24
Expand all
Hide whitespace changes
Inline
Side-by-side
frontend/.node-version
0 → 100644
View file @
9fad39be
12.15.0
frontend/angular.json
View file @
9fad39be
...
...
@@ -28,6 +28,7 @@
"src/assets"
],
"styles"
:
[
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
,
"src/styles.scss"
],
"scripts"
:
[]
...
...
@@ -93,6 +94,7 @@
"src/assets"
],
"styles"
:
[
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
,
"src/styles.scss"
],
"scripts"
:
[]
...
...
@@ -124,6 +126,7 @@
}
}
}
}},
}
},
"defaultProject"
:
"frontend"
}
\ No newline at end of file
frontend/package-lock.json
View file @
9fad39be
This diff is collapsed.
Click to expand it.
frontend/package.json
View file @
9fad39be
...
...
@@ -12,25 +12,29 @@
"private"
:
true
,
"dependencies"
:
{
"@angular/animations"
:
"~8.2.14"
,
"@angular/cdk"
:
"~8.2.3"
,
"@angular/common"
:
"~8.2.14"
,
"@angular/compiler"
:
"~8.2.14"
,
"@angular/core"
:
"~8.2.14"
,
"@angular/forms"
:
"~8.2.14"
,
"@angular/material"
:
"^8.2.3"
,
"@angular/platform-browser"
:
"~8.2.14"
,
"@angular/platform-browser-dynamic"
:
"~8.2.14"
,
"@angular/router"
:
"~8.2.14"
,
"@ngx-pwa/local-storage"
:
"^8.2.4"
,
"hammerjs"
:
"^2.0.8"
,
"rxjs"
:
"~6.4.0"
,
"tslib"
:
"^1.10.0"
,
"zone.js"
:
"~0.9.1"
},
"devDependencies"
:
{
"@angular-devkit/build-angular"
:
"
~
0.803.2
2
"
,
"@angular-devkit/build-angular"
:
"
^
0.803.2
3
"
,
"@angular/cli"
:
"~8.3.22"
,
"@angular/compiler-cli"
:
"~8.2.14"
,
"@angular/language-service"
:
"~8.2.14"
,
"@types/node"
:
"~8.9.4"
,
"@types/jasmine"
:
"~3.3.8"
,
"@types/jasminewd2"
:
"~2.0.3"
,
"@types/node"
:
"~8.9.4"
,
"codelyzer"
:
"^5.0.0"
,
"jasmine-core"
:
"~3.4.0"
,
"jasmine-spec-reporter"
:
"~4.2.1"
,
...
...
frontend/src/app/app-routing.module.ts
View file @
9fad39be
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
Routes
,
RouterModule
}
from
'
@angular/router
'
;
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
Routes
,
RouterModule
}
from
'
@angular/router
'
;
import
{
LoginComponent
}
from
"
./login/login.component
"
;
import
{
DocumentManagerComponent
}
from
"
./document-manager/document-manager.component
"
;
import
{
AuthenticatedGuard
}
from
"
./authenticated.guard
"
;
const
routes
:
Routes
=
[];
const
routes
:
Routes
=
[
{
path
:
'
login
'
,
component
:
LoginComponent
},
{
path
:
''
,
component
:
DocumentManagerComponent
,
canActivate
:
[
AuthenticatedGuard
],
children
:
[]
}
];
@
NgModule
({
imports
:
[
RouterModule
.
forRoot
(
routes
)],
exports
:
[
RouterModule
]
})
export
class
AppRoutingModule
{
}
export
class
AppRoutingModule
{
}
frontend/src/app/app.component.html
View file @
9fad39be
This diff is collapsed.
Click to expand it.
frontend/src/app/app.module.ts
View file @
9fad39be
import
{
BrowserModule
}
from
'
@angular/platform-browser
'
;
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
BrowserModule
}
from
'
@angular/platform-browser
'
;
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
AppRoutingModule
}
from
'
./app-routing.module
'
;
import
{
AppComponent
}
from
'
./app.component
'
;
import
{
AppRoutingModule
}
from
'
./app-routing.module
'
;
import
{
AppComponent
}
from
'
./app.component
'
;
import
{
BrowserAnimationsModule
}
from
'
@angular/platform-browser/animations
'
;
import
{
LoginComponent
}
from
'
./login/login.component
'
;
import
{
ReactiveFormsModule
}
from
"
@angular/forms
"
;
import
{
MatFormFieldModule
}
from
"
@angular/material/form-field
"
;
import
{
MatIconModule
}
from
"
@angular/material/icon
"
;
import
{
MatInputModule
}
from
"
@angular/material/input
"
;
import
{
MatButtonModule
}
from
"
@angular/material/button
"
;
import
{
HttpClientModule
}
from
"
@angular/common/http
"
;
import
{
StorageModule
}
from
'
@ngx-pwa/local-storage
'
;
import
{
DocumentManagerComponent
}
from
'
./document-manager/document-manager.component
'
;
@
NgModule
({
declarations
:
[
AppComponent
AppComponent
,
LoginComponent
,
DocumentManagerComponent
],
imports
:
[
BrowserModule
,
AppRoutingModule
AppRoutingModule
,
BrowserAnimationsModule
,
ReactiveFormsModule
,
MatFormFieldModule
,
MatIconModule
,
MatInputModule
,
MatButtonModule
,
HttpClientModule
,
StorageModule
.
forRoot
({
IDBNoWrap
:
true
})
],
providers
:
[],
bootstrap
:
[
AppComponent
]
})
export
class
AppModule
{
}
export
class
AppModule
{
}
frontend/src/app/authenticated.guard.spec.ts
0 → 100644
View file @
9fad39be
import
{
TestBed
,
async
,
inject
}
from
'
@angular/core/testing
'
;
import
{
AuthenticatedGuard
}
from
'
./authenticated.guard
'
;
describe
(
'
AuthenticatedGuard
'
,
()
=>
{
beforeEach
(()
=>
{
TestBed
.
configureTestingModule
({
providers
:
[
AuthenticatedGuard
]
});
});
it
(
'
should ...
'
,
inject
([
AuthenticatedGuard
],
(
guard
:
AuthenticatedGuard
)
=>
{
expect
(
guard
).
toBeTruthy
();
}));
});
frontend/src/app/authenticated.guard.ts
0 → 100644
View file @
9fad39be
import
{
Injectable
}
from
'
@angular/core
'
;
import
{
CanActivate
,
CanActivateChild
,
ActivatedRouteSnapshot
,
RouterStateSnapshot
,
UrlTree
}
from
'
@angular/router
'
;
import
{
Observable
}
from
'
rxjs
'
;
import
{
StorageMap
}
from
"
@ngx-pwa/local-storage
"
;
@
Injectable
({
providedIn
:
'
root
'
})
export
class
AuthenticatedGuard
implements
CanActivate
,
CanActivateChild
{
constructor
(
private
readonly
storageMap
:
StorageMap
)
{}
canActivate
(
next
:
ActivatedRouteSnapshot
,
state
:
RouterStateSnapshot
):
Observable
<
boolean
|
UrlTree
>
|
Promise
<
boolean
|
UrlTree
>
|
boolean
|
UrlTree
{
//Check to see if we have an auth token in storage, and if it's valid somehow?
return
true
;
}
canActivateChild
(
next
:
ActivatedRouteSnapshot
,
state
:
RouterStateSnapshot
):
Observable
<
boolean
|
UrlTree
>
|
Promise
<
boolean
|
UrlTree
>
|
boolean
|
UrlTree
{
return
true
;
}
}
frontend/src/app/document-manager/document-manager.component.html
0 → 100644
View file @
9fad39be
<p>
document-manager works!
</p>
frontend/src/app/document-manager/document-manager.component.scss
0 → 100644
View file @
9fad39be
frontend/src/app/document-manager/document-manager.component.spec.ts
0 → 100644
View file @
9fad39be
import
{
async
,
ComponentFixture
,
TestBed
}
from
'
@angular/core/testing
'
;
import
{
DocumentManagerComponent
}
from
'
./document-manager.component
'
;
describe
(
'
DocumentManagerComponent
'
,
()
=>
{
let
component
:
DocumentManagerComponent
;
let
fixture
:
ComponentFixture
<
DocumentManagerComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
DocumentManagerComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
DocumentManagerComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'
should create
'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
frontend/src/app/document-manager/document-manager.component.ts
0 → 100644
View file @
9fad39be
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
@
Component
({
selector
:
'
app-document-manager
'
,
templateUrl
:
'
./document-manager.component.html
'
,
styleUrls
:
[
'
./document-manager.component.scss
'
]
})
export
class
DocumentManagerComponent
implements
OnInit
{
constructor
()
{
}
ngOnInit
()
{
}
}
frontend/src/app/login/login.component.html
0 → 100644
View file @
9fad39be
<div
class=
"logincontainer"
>
<div
class=
"loginbox"
>
<form
[formGroup]=
"loginForm"
class=
"loginform"
(ngSubmit)=
"doLogin()"
>
<div>
<mat-form-field>
<input
matInput
placeholder=
"Username"
formControlName=
"username"
>
<mat-error
*ngIf=
"loginForm.controls.username.hasError('required')"
>
Username is
<strong>
required
</strong>
</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input
matInput
placeholder=
"Enter your password"
[type]=
"hidePassword ? 'password' : 'text'"
formControlName=
"password"
>
<mat-icon
matSuffix
(click)=
"hidePassword = !hidePassword"
>
{{hidePassword ? 'visibility_off' : 'visibility'}}
</mat-icon>
</mat-form-field>
</div>
<div
class=
"buttonbox"
>
<button
mat-raised-button
color=
"primary"
type=
"submit"
>
Login
</button>
</div>
</form>
</div>
</div>
frontend/src/app/login/login.component.scss
0 → 100644
View file @
9fad39be
.logincontainer
{
height
:
100%
;
width
:
100%
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
}
.loginbox
{
display
:
flex
;
width
:
100%
;
justify-content
:
center
;
}
.loginform
{
display
:
flex
;
flex-direction
:
column
;
width
:
400px
;
mat-form-field
{
width
:
100%
;
}
}
.buttonbox
{
display
:
flex
;
justify-content
:
right
;
}
frontend/src/app/login/login.component.spec.ts
0 → 100644
View file @
9fad39be
import
{
async
,
ComponentFixture
,
TestBed
}
from
'
@angular/core/testing
'
;
import
{
LoginComponent
}
from
'
./login.component
'
;
describe
(
'
LoginComponent
'
,
()
=>
{
let
component
:
LoginComponent
;
let
fixture
:
ComponentFixture
<
LoginComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
LoginComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
LoginComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'
should create
'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
frontend/src/app/login/login.component.ts
0 → 100644
View file @
9fad39be
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
import
{
FormControl
,
FormGroup
,
Validators
}
from
"
@angular/forms
"
;
import
{
environment
}
from
"
../../environments/environment
"
;
import
{
LoginService
}
from
"
./login.service
"
;
import
{
map
}
from
"
rxjs/operators
"
;
@
Component
({
selector
:
'
app-login
'
,
templateUrl
:
'
./login.component.html
'
,
styleUrls
:
[
'
./login.component.scss
'
]
})
export
class
LoginComponent
implements
OnInit
{
hidePassword
=
true
;
loginForm
=
new
FormGroup
({
username
:
new
FormControl
(
''
,
[
Validators
.
required
]),
password
:
new
FormControl
(
''
),
});
constructor
(
private
readonly
loginService
:
LoginService
)
{
}
ngOnInit
()
{
}
doLogin
()
{
console
.
log
(
"
would post to mayan to do the needful
"
,
environment
.
mayan
);
this
.
loginService
.
getAuthToken
(
this
.
loginForm
.
controls
.
username
.
value
,
this
.
loginForm
.
controls
.
password
.
value
)
.
subscribe
(
meh
=>
{
//when it's complete, we need to navigate to the other thing
})
}
}
frontend/src/app/login/login.service.spec.ts
0 → 100644
View file @
9fad39be
import
{
TestBed
}
from
'
@angular/core/testing
'
;
import
{
LoginService
}
from
'
./login.service
'
;
describe
(
'
LoginService
'
,
()
=>
{
beforeEach
(()
=>
TestBed
.
configureTestingModule
({}));
it
(
'
should be created
'
,
()
=>
{
const
service
:
LoginService
=
TestBed
.
get
(
LoginService
);
expect
(
service
).
toBeTruthy
();
});
});
frontend/src/app/login/login.service.ts
0 → 100644
View file @
9fad39be
import
{
Injectable
}
from
'
@angular/core
'
;
import
{
HttpClient
}
from
"
@angular/common/http
"
;
import
{
environment
}
from
"
../../environments/environment
"
;
import
{
EMPTY
,
Observable
}
from
"
rxjs
"
;
import
{
StorageMap
}
from
"
@ngx-pwa/local-storage
"
;
import
{
flatMap
,
map
}
from
"
rxjs/operators
"
;
@
Injectable
({
providedIn
:
'
root
'
})
export
class
LoginService
{
private
AUTH_TOKEN
=
"
authToken
"
;
constructor
(
private
readonly
httpClient
:
HttpClient
,
private
readonly
storageMap
:
StorageMap
)
{
}
getAuthToken
(
username
:
String
,
password
:
String
):
Observable
<
undefined
>
{
const
request
=
{
username
:
username
,
password
:
password
}
as
LoginRequest
;
return
this
.
httpClient
.
post
<
TokenResponse
>
(
`
${
environment
.
mayan
}
/auth/token/obtain/`
,
request
).
pipe
(
flatMap
(
response
=>
{
return
this
.
storageMap
.
set
(
this
.
AUTH_TOKEN
,
response
.
token
);
})
);
}
validateToken
():
Observable
<
Boolean
>
{
this
.
storageMap
.
get
(
this
.
AUTH_TOKEN
).
pipe
(
flatMap
(
//Make HTTP call to validate token
)
);
return
EMPTY
;
}
}
export
interface
LoginRequest
{
username
:
String
;
password
:
String
;
}
export
interface
TokenResponse
{
token
:
String
;
}
frontend/src/environments/environment.ts
View file @
9fad39be
...
...
@@ -3,7 +3,8 @@
// The list of file replacements can be found in `angular.json`.
export
const
environment
=
{
production
:
false
production
:
false
,
mayan
:
'
http://10.10.220.119:8000/api
'
};
/*
...
...
Prev
1
2
Next
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment