Add UI boilerplate with sign up, sign in and ability to list clusters #140
Conversation
| Expires: expires, | ||
| HttpOnly: true, | ||
| Path: "/", | ||
| SameSite: http.SameSiteStrictMode, |
There was a problem hiding this comment.
In this case I opted to not make the cookies Secure - which means they work over plaintext http. While this is much easier for self-hosted setups who don't want to deal with the certificate issue, it might be better if we just force everything to be https. Thoughts?
There was a problem hiding this comment.
Any way we can check if there is a certificate and set the secure flag based on that? Otherwise I think it is better to force it.
There was a problem hiding this comment.
Makes sense. I'll commit as-is and then create an issue to enforce secure cookies and redirect http to https automatically: #143 in case users don't set this up on their side
This may have a few issues with usability (e.g. accessing via port forwarding) we should double check so will treat it as it's own issue for now vs amending that here
| @@ -38,3 +49,87 @@ func (h *Http) WellKnownJWKs(w http.ResponseWriter, r *http.Request) { | |||
| []jose.JSONWebKey{pubKey}, | |||
| }) | |||
| } | |||
|
|
|||
| func (h *Http) loginRedirectMiddleware(next http.Handler) http.Handler { | |||
There was a problem hiding this comment.
This middleware is used to avoid "flashes of content" by doing server-side redirects to the /login route based on auth info (instead of client side redirects, which is what most products do, and is very ugly).
jmorganca
changed the title
| @@ -429,6 +433,26 @@ func NewToken(db *gorm.DB, userId string, token *Token) (secret string, err erro | |||
| return | |||
| } | |||
|
|
|||
| func ValidateAndGetToken(db *gorm.DB, in string) (*Token, error) { | |||
There was a problem hiding this comment.
This is extracted from grpc.go and unmodified so it can be shared with the loginRedirectMiddleware below
There was a problem hiding this comment.
Doesn't need to be part of this PR, but we should add some tests for this token validation too at some point
|
nit: Should the UI be under |
| @@ -429,6 +433,26 @@ func NewToken(db *gorm.DB, userId string, token *Token) (secret string, err erro | |||
| return | |||
| } | |||
|
|
|||
| func ValidateAndGetToken(db *gorm.DB, in string) (*Token, error) { | |||
There was a problem hiding this comment.
Doesn't need to be part of this PR, but we should add some tests for this token validation too at some point
| @@ -38,3 +49,87 @@ func (h *Http) WellKnownJWKs(w http.ResponseWriter, r *http.Request) { | |||
| []jose.JSONWebKey{pubKey}, | |||
| }) | |||
| } | |||
|
|
|||
| func (h *Http) loginRedirectMiddleware(next http.Handler) http.Handler { | |||
| Expires: expires, | ||
| HttpOnly: true, | ||
| Path: "/", | ||
| SameSite: http.SameSiteStrictMode, |
There was a problem hiding this comment.
Any way we can check if there is a certificate and set the secure flag based on that? Otherwise I think it is better to force it.
internal/ui/layouts/Dashboard.tsx
Outdated
| ] | ||
|
|
||
| return ( | ||
| <div className="h-screen bg-gray-50 overflow-hidden flex"> |
There was a problem hiding this comment.
Should we split the sidebars and header out to separate components?
There was a problem hiding this comment.
I think so, but only if we re-use them elsewhere. Otherwise the thinking is to keep it one (albeit big) Layout component.
internal/ui/pages/login.tsx
Outdated
| if (process.browser && cookies.login) { | ||
| router.replace("/") | ||
| return <></> | ||
| } |
There was a problem hiding this comment.
nit: this } isn't correctly aligned 👀
internal/ui/pages/signup.tsx
Outdated
| </div> | ||
| <div className="my-2.5"> | ||
| <label htmlFor="password" className="block text-sm font-medium text-gray-700"> | ||
| Password |
There was a problem hiding this comment.
We should have a confirm password here too and do some client side validation to make sure they match.
internal/ui/pages/signup.tsx
Outdated
| id="password" | ||
| name="password" | ||
| type="password" | ||
| autoComplete="current-password" |
There was a problem hiding this comment.
Not sure we want auto-complete here
| rpc CreateUser(CreateUserRequest) returns (User) { | ||
| option (google.api.http) = { | ||
| post: "/v1/users" | ||
| body: "*" |
There was a problem hiding this comment.
These body fields are wild-carded because we are looking at request params?
There was a problem hiding this comment.
Yes, to my knowledge this tells the grpc gateway to map http body params to grpc params
This looks to be a pretty hefty PR, but much of the code is generated or boilerplate. The three main additions:
./internal/ui./internal/registryto serve the UI as static websiteThis fixes #123 in passing
Screenshots
Below are some screenshots @BruceMacD @mchiang0610