Display the Token in the settings page (#357)

* Add extendedUserData to the API

* Change into the Descriptions component

* Expose the token on the setting page

Author: Noah Lee

internal/server/api/v1/users/get.go

@@ -10,6 +10,15 @@ import (
 	"github.com/gitploy-io/gitploy/model/ent"
 )
 
+type (
+	// extendedUserData includes the 'hash' field.
+	extendedUserData struct {
+		*ent.User
+
+		Hash string `json:"hash"`
+	}
+)
+
 func (u *UserAPI) GetMe(c *gin.Context) {
 	ctx := c.Request.Context()
 
@@ -23,5 +32,8 @@ func (u *UserAPI) GetMe(c *gin.Context) {
 		return
 	}
 
-	gb.Response(c, http.StatusOK, uv)
+	gb.Response(c, http.StatusOK, extendedUserData{
+		User: uv,
+		Hash: uv.Hash,
+	})
 }

internal/server/api/v1/users/get_test.go

@@ -0,0 +1,59 @@
+package users
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"github.com/gin-gonic/gin"
+	"github.com/gitploy-io/gitploy/internal/server/api/v1/users/mock"
+	"github.com/gitploy-io/gitploy/internal/server/global"
+	"github.com/gitploy-io/gitploy/model/ent"
+	gm "github.com/golang/mock/gomock"
+)
+
+func init() {
+	gin.SetMode(gin.ReleaseMode)
+}
+
+func TestUsers_GetMe(t *testing.T) {
+	t.Run("Return user's information with the 'hash' field.", func(t *testing.T) {
+		const hash = "HASH_VALUE"
+
+		t.Log("Start mocking:")
+		ctrl := gm.NewController(t)
+		i := mock.NewMockInteractor(ctrl)
+
+		t.Log("\tFind the user.")
+		i.EXPECT().
+			FindUserByID(gm.Any(), gm.AssignableToTypeOf(int64(1))).
+			Return(&ent.User{Hash: hash}, nil)
+
+		api := NewUserAPI(i)
+		r := gin.New()
+		r.GET("/user",
+			func(c *gin.Context) {
+				c.Set(global.KeyUser, &ent.User{})
+			},
+			api.GetMe)
+
+		req, _ := http.NewRequest("GET", "/user", nil)
+		w := httptest.NewRecorder()
+		r.ServeHTTP(w, req)
+
+		t.Log("Evaluate the return value.")
+		if w.Code != http.StatusOK {
+			t.Fatalf("Code = %v, wanted %v", w.Code, http.StatusOK)
+		}
+
+		d := extendedUserData{}
+		if err := json.Unmarshal(w.Body.Bytes(), &d); err != nil {
+			t.Fatalf("Failed to unmarshal: %v", err)
+		}
+
+		if d.Hash != hash {
+			t.Fatalf("Hash = %v, wanted %v", d.Hash, hash)
+		}
+	})
+}

internal/server/api/v1/users/update_test.go

@@ -16,7 +16,7 @@ import (
 	"github.com/golang/mock/gomock"
 )
 
-func TestUser_UpdateUser(t *testing.T) {
+func TestUserAPI_UpdateUser(t *testing.T) {
 	input := struct {
 		ID      int64
 		Payload *userPatchPayload

ui/src/apis/user.ts

@@ -9,6 +9,7 @@ export interface UserData {
     login: string
     avatar: string
     admin: boolean
+    hash?: string
     created_at: string
     updated_at: string
     edges: {
@@ -47,6 +48,7 @@ export const mapDataToUser = (data: UserData): User => {
         login: data.login,
         avatar: data.avatar,
         admin: data.admin,
+        hash: data.hash,
         createdAt: new Date(data.created_at),
         updatedAt: new Date(data.updated_at),
         chatUser: cu,

ui/src/models/User.ts

@@ -3,6 +3,8 @@ export default interface User {
     login: string
     avatar: string
     admin: boolean
+    // It exists only when getting self user.
+    hash?: string
     createdAt: Date
     updatedAt: Date
     chatUser: ChatUser | null

ui/src/views/Settings.tsx

@@ -1,21 +1,19 @@
-import { Avatar, Button, Tag } from "antd"
-import moment from "moment"
 import { useEffect } from "react"
 import { shallowEqual } from "react-redux"
 import { Helmet } from "react-helmet"
+import { Button, Tag, Descriptions, Input } from "antd"
 
 import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { fetchMe, fetchRateLimit,checkSlack } from "../redux/settings"
+import { fetchMe, checkSlack } from "../redux/settings"
 
 import Main from "./Main"
 
 export default function Settings(): JSX.Element {
-    const { user, rateLimit, isSlackEnabled } = useAppSelector(state => state.settings, shallowEqual)
+    const { user, isSlackEnabled } = useAppSelector(state => state.settings, shallowEqual)
     const dispatch = useAppDispatch()
 
     useEffect(() => {
         dispatch(fetchMe())
-        dispatch(fetchRateLimit())
         dispatch(checkSlack())
     }, [dispatch])
 
@@ -27,30 +25,33 @@ export default function Settings(): JSX.Element {
             <Helmet>
                 <title>Settings</title>
             </Helmet>
-            <div >
-                <h1>Settings</h1>
-            </div>
-            <div style={{marginTop: "40px"}}>
-                <h2>User</h2>
-                <p>
-                    Login: <Avatar src={user?.avatar}/> <b>{user?.login}</b> 
-                </p>
-                <p>
-                    Role: {(user?.admin)? <Tag color="purple">Admin</Tag> : <Tag color="purple">Member</Tag>}
-                </p>
-            </div>
-            <div style={{marginTop: "40px"}}>
-                <h2>Rate Limit</h2>
-                <p>Limit: {rateLimit?.limit}</p>
-                <p>Remaining: {rateLimit?.remaining}</p>
-                <p>Reset: {moment(rateLimit?.reset).fromNow()}</p>
-            </div>
+            <h1>Settings</h1>
+            <Descriptions title="User Info" column={2} style={{marginTop: "40px"}} layout="vertical">
+                <Descriptions.Item label="Login">{user?.login}</Descriptions.Item>
+                <Descriptions.Item label="Role">
+                    {(user?.admin)? 
+                        <Tag color="purple">Admin</Tag> 
+                        : 
+                        <Tag color="purple">Member</Tag>}
+                </Descriptions.Item>
+                <Descriptions.Item label="Token">
+                    <Input.Password 
+                        value={user?.hash}
+                        style={{width: 200, padding:0 }}
+                        readOnly
+                        bordered={false}
+                    />
+                </Descriptions.Item>
+            </Descriptions>
             {(isSlackEnabled)?
                 <div style={{marginTop: "40px", marginBottom: "20px"}}>
-                    <h2>Slack</h2>
-                    {(connected)? 
-                        <Button href="/slack/signout" type="primary" danger>DISCONNECTED</Button>:
-                        <Button href="/slack/" type="primary">CONNECT</Button>}
+                    <Descriptions title="Slack">
+                        <Descriptions.Item>
+                            {(connected)? 
+                                <Button href="/slack/signout" type="primary" danger>DISCONNECTED</Button>:
+                                <Button href="/slack/" type="primary">CONNECT</Button>}
+                        </Descriptions.Item>
+                    </Descriptions>
                 </div>:
                 null}
         </Main>