mrellipse / toucan Goto Github PK
View Code? Open in Web Editor NEWBoilerplate template using Vue.js, TypeScript and .NET Core 2.1, based on SOLID design principles
License: MIT License
Boilerplate template using Vue.js, TypeScript and .NET Core 2.1, based on SOLID design principles
License: MIT License
First of all thanks for sharing this project. I got a place to start reading on how things are getting done.
I didn't manage to run the project successfully though. I get the following error:
(2,10): error TS2305: Module '"project/src/ui/node_modules/vue-i18n/types/index"' has no exported member 'LocaleMessageObject'
A simple search will lead to this. But this option is already used.
Another solution would be to upgrade to vue-i18n:7.3.3 according to this.
None of them worked. Is it only me?
The response from a call such as http://localhost:5000/64ef3ad1b9684d6b00d8.hot-update.json
Is being intercepted/handled by custom middleware, and returning html instead of a hmr payload.
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at XMLHttpRequest.request.onreadystatechange (common.js:77)
After updating the application, and generating a new build, It start an error on login,
: Microsoft.AspNetCore.Antiforgery.Internal.DefaultAntiforgery[7] An exception was thrown while deserializing the token. System.InvalidOperationException: The antiforgery token could not be decrypted. ---> System.Security.Cryptography.CryptographicException: The payload was invalid. at Microsoft.AspNetCore.DataProtection.Managed.ManagedAuthenticatedEncryptor.Decrypt(ArraySegment
1 protectedPayload, ArraySegment1 additionalAuthenticatedData)
second when I use dbContext.Database.ExecuteCommandAsync('Any procedure')
at first it work ok, and on next attempt It gives Database connection closed.
it is very essential to have pop-up just like "https://github.com/stoodz/vuejsTimer.git", I have integrated like if the user click on stay the token is updated with new expiry time.
The oauth implicit workflow is designed to be short-lived - and since the browser cannot be relied on to 'keep a secret', allowing an automated token refresh (without having the user supply their password again) would be a security hole.
However, it got me thinking that I would like to add some additional security to the default setup - so that two-factor verification is triggered if the user logs on from a different devices, or with a different browser.
it is very essential to have pop-up just like "https://github.com/stoodz/vuejsTimer.git", I have integrated like if the user click on stay the token is updated with new expiry time.
second role based menu or features like 'https://aspnetboilerplate.com/Templates' would be beneficial.
separate layout for login and logged-in pages.
unit test for vue components should be added, like karma i.e 'https://vuejs.org/v2/guide/unit-testing.html'
repository based db integration should be integrated, I have done it and happy to share.
date time filter should be integrated as vue v-model integrated with date but need work around.
The custom MVC input/output formatters are incorrectly implemented.
They modify a shared/global version of Json SerializerSettings (through a class instance). This is not a thread-safe approach. Also, it is appending rather then upserting the DateTime converter.
So a side-effect of this is that the very first converter instance added to Serializer Settings is determined by localization cookie of the first user to hit the website after bootstrapping.
separate layout for login and logged-in pages
I have used the powrshell file for production, every time I host it on kestrel server it gives two errors,
I am using Toucan and adding the feature of Role base menu, but I am unable to work it. I have used the following steps.
export interface IMenu { name: string; url: string; icon: string; children: IMenu[] }
updateUserMenu: 'updateUserMenu'
,updateUserMenu: (state: ICommonState, userMenu: Array<IMenu>) => { let user = Object.assign({}, state.user); user.userMenu = userMenu; state.user = user; }
updateUserMenu: (injectee: ActionContext<ICommonState, any>, userMenu: Array<IMenu>) => { injectee.commit(StoreTypes.updateUserMenu, userMenu); }
this.repo.getMenu(this.username) .then((value) => this.$store.dispatch(StoreTypes.updateUserMenu, value));
this.auth.login(credentials) .then((value) => this.$store.dispatch(StoreTypes.updateUser, value)) .then(() => this.$store.dispatch(StoreTypes.updateStatusBar, null)) .then(() => this.$router.push(returnUrl)) .catch((user) => { });
@State((state: IRootStoreState) => state.common.user) user: IUser;
(item, index) in user.userMenu
,the loading page is not implemented correctly - it awaits the download of additional bundled resources before mounting app
Just tried installing this and having several dependency issues. Can you confirm with fresh install. I updated the Bootstrap to "bootstrap": "^4.0.0-beta",
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: $spacer-x,
y: $spacer-y
),
2: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
3: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
Write stubs of an implementation for capturing full request details for 500.x range errors
While developing on the Windows the application works fine, but when you switch the application to Ubuntu, webpack and everything work fine, but while running on browser it gives the error
SyntaxError: expected expression, got '<' [Learn More] common.js:1 SyntaxError: expected expression, got '<' [Learn More] vendor.js:1 SyntaxError: expected expression, got '<' [Learn More] app.js:1 TypeError: window.bootstrap.loadApp is not a function [Learn More] mount.js:1366:9 onComplete http://localhost:5000/mount.js:1366:9 onLoad http://localhost:5000/mount.js:4191:61 load/</resource.el< http://localhost:5000/mount.js:4199:21 loadStyle/el.onload http://localhost:5000/mount.js:4247:26
There is a CSRF prevention mechanism on the template, which adds CSRF token to each request. But since this template use JWT to authorize requests then why we need the CSRF token? As I understand CSRF attack is only possible when an app uses cookies based authorization. But here we have "Authorise" header on each request.
Please, forgive me my ignorance if I don't understand something.
If there are any expired verifications for a user, the system still attempts to insert a new one if the user requests verification. This causes a primary key conflict.
I fixed this by adding this code in GetPendingVerificationForUser to first delete any expired verifications for the user. Not sure if this is the best approach - if so, please add to baseline. If not, please tell me a better way to fix it :)
private async Task<Verification> GetPendingVerificationForUser(IUser user)
{
// first get any expires ones
var expiredVerifications =
await (from v in this.db.Verification.Include(o => o.User).Include(o => o.User.Roles)
where v.UserId == user.UserId && v.RedeemedAt == null &&
v.IssuedAt <= DateTime.UtcNow.AddMinutes(-30)
select v).ToListAsync();
// and delete them
foreach (var verification in expiredVerifications)
{
this.db.Verification.Remove(verification);
this.db.SaveChanges();
}
The engine is generating an issue while listing users in admin section, which is
InvalidOperationException: Error generated for warning 'Microsoft.EntityFrameworkCore.Infrastructure.DetachedLazyLoadingWarning: An attempt was made to lazy-load navigation property 'Roles' on detached entity of type 'UserProxy'. Lazy-loading is not supported for detached entities or entities that are loaded with 'AsNoTracking()'.'. This exception can be suppressed or logged by passing event ID 'CoreEventId.DetachedLazyLoadingWarning' to the 'ConfigureWarnings' method in 'DbContext.OnConfiguring' or 'AddDbContext'.
Add SignalR to sync both side, when the token is expired on server side vice versa, the system should logout.
If the client is working on a page and the token on server side is expired the client should intimate the server that user is currently working and should not be logged out.
I don't know your thoughts on Single File Components, or why it might not be compatible with the generally amazing, SOLID Vue.js, TypeScript, .NET Core 2.0 sandwich ๐ you've got going here, but I for one was sold on the idea after watching Seperation of concerns rant and would love to see them added, or steps to follow on the readme to make webpack happy, etc.
Keep up the good work!
Hi,
I would like to be able to use sliding expiration, the current token lasts for 5 minutes but i would like to be able to refresh the token everytime a authenticated request is made so to get a rolling 5 minutes, i'm new to vue and aspnetcore but i have worked with .net framework for many years, is this something that can be done easily?
Thanks
Shane
lodash imports that operate on reactive properties are not behaving as intended
they are attaching to the vue proxy wrapper around data when evaluating statements
route-guards are not apply permisions correctly
unit test for vue components should be added, like karma i.e 'https://vuejs.org/v2/guide/unit-testing.html'
Now Toucan is quite mature, but need some essencial updates,
It seems the time in the issued nonce is in UTC, but this is being compared against the local time by ExternalAuthController.
Proposed fix:
ExternalAuthController.cs
if (nonce.Created.AddMinutes(30) < DateTime.UtcNow)
Sorry for raising this as an issue, I'm not sure if you're open to pull requests.
Installation failed on windows 10 .. following are the output.. Please help
E:\boilerplates\src\ui>
E:\boilerplates\src\ui>npm install
npm ERR! path E:\boilerplates\src\ui\node_modules\fsevents\node_modules\getpass\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 'E:\boilerplates\src\ui\node_modules\fsevents\node_modules\getpass\node_modules'
npm ERR! { Error: EPERM: operation not permitted, scandir 'E:\boilerplates\src\ui\node_modules\fsevents\node_modules\getpass\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, scandir \'E:\\boilerplates\\src\\ui\\node_modules\\fsevents\\node_modules\\getpass\\node_modules\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'scandir',
npm ERR! path: 'E:\\boilerplates\\src\\ui\\node_modules\\fsevents\\node_modules\\getpass\\node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2018-04-05T09_26_36_087Z-debug.log
D:\Workspace\toucan\src\server>dotnet run -p server.csproj -c Development
Unhandled Exception: System.IO.FileNotFoundException: The configuration file 'app..json' was not found and is not optional. The p
hysical path is 'D:\Workspace\toucan\src\server\app..json'.
at Microsoft.Extensions.Configuration.FileConfigurationProvider.Load(Boolean reload)
at Microsoft.Extensions.Configuration.FileConfigurationProvider.Load()
at Microsoft.Extensions.Configuration.ConfigurationRoot..ctor(IList`1 providers)
at Microsoft.Extensions.Configuration.ConfigurationBuilder.Build()
at Toucan.Server.WebApp.Main(String[] args) in D:\Workspace\toucan\src\server\Program.cs:line 15
add oauth refresh tokens server-side
add client-side code to prompt the user to refresh
do an in-place update of local storage and vuex state when refresh token is obtained
date time filter should be integrated as vue v-model integrated with date but need work around
suppose we are binding date and time variable with `", when you set the 'dob = new Date(), dob = Date.Now' or get from db the control doesn't populate the value, you have to use moment.js for this purpose. if the engine use its own or customized filter it will be fantastic,
look at the following link and made the mentioned changes, you will understand
https://jsfiddle.net/jnash21/mzx7n1sq/ and change date2 : '2017-07-04' to date2 : new Date()
I have a staging and production server at same Linux server, the endpoints of kastrel should be use in UseUrls, for development you don't have to change ip, but for production if you have more than one you need change ports and system ip.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.