Modify setup page to show pre-entered consumer key and secret

iwataka · May 6, 2022 · d2740b1 · d2740b1
1 parent 34014e3
commit d2740b1
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/server.go b/server.go
@@ -224,7 +224,8 @@ func setupRouterWithWrapper(
 	r.GET("/api/analysis/image/result", apiWrapper(apiAnalysisImageResultHandler))
 	r.GET("/api/analysis/image/status", apiWrapper(apiAnalysisImageStatusHandler))
 	r.GET("/api/auth/status", apiWrapHandler(apiAuthStatus))
-	r.POST("/api/auth/credential", apiCredential)
+	r.POST("/api/auth/credential", postApiCredential)
+	r.GET("/api/auth/credential", getApiCredential)
 	r.GET("/api/auth/:provider", authHandler)
 	r.GET("/api/auth/callback/:provider", authCallbackHandler)
 	r.GET("/api/config", apiWrapper(apiConfigHandler))
@@ -1142,7 +1143,7 @@ type Credential struct {
 	} `json:"slack"`
 }
 
-func apiCredential(c *gin.Context) {
+func postApiCredential(c *gin.Context) {
 	var body Credential
 	err := c.BindJSON(&body)
 	if err != nil {
@@ -1170,6 +1171,27 @@ func apiCredential(c *gin.Context) {
 	c.Status(http.StatusOK)
 }
 
+func getApiCredential(c *gin.Context) {
+	twitterCk, twitterCs := "", ""
+	if twitterApp != nil {
+		twitterCk, twitterCs = twitterApp.GetCreds()
+	}
+	slackCk, slackCs := "", ""
+	if slackApp != nil {
+		slackCk, slackCs = slackApp.GetCreds()
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"twitter": gin.H{
+			"consumer_key":    twitterCk,
+			"consumer_secret": twitterCs,
+		},
+		"slack": gin.H{
+			"consumer_key":    slackCk,
+			"consumer_secret": slackCs,
+		},
+	})
+}
+
 func apiConfigHandler(c *gin.Context) {
 	user, err := authenticator.GetLoginUser(c.Request)
 	if err != nil {

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -637,6 +637,24 @@ class Setup extends React.Component<SetupProps, any> {
     this.updateState = this.updateState.bind(this);
   }
 
+  componentDidMount() {
+    fetch("/api/auth/credential", {
+      credentials: "same-origin",
+    })
+      .then((res) => {
+        if (res.ok) {
+          res.json().then((data) => {
+            this.setState({ credential: data });
+          });
+        } else {
+          res.text().then((t) => this.setState({ error: t }));
+        }
+      })
+      .catch((err) => {
+        this.setState({ error: err });
+      });
+  }
+
   submit() {
     fetch("/api/auth/credential", {
       credentials: "same-origin",
@@ -685,9 +703,9 @@ class Setup extends React.Component<SetupProps, any> {
           <Form.Group className="mb-3">
             <Form.Label>Consumer Key</Form.Label>
             <Form.Control
-              type="password"
+              type="text"
               placeholder="Enter consumer key"
-              value={this.state.consumer_key}
+              value={this.state.credential.twitter.consumer_key}
               onChange={(e) => {
                 this.updateState("twitter", "consumer_key", e.target.value);
               }}
@@ -698,7 +716,7 @@ class Setup extends React.Component<SetupProps, any> {
             <Form.Control
               type="password"
               placeholder="Enter consumer secret"
-              value={this.state.consumer_secret}
+              value={this.state.credential.twitter.consumer_secret}
               onChange={(e) => {
                 this.updateState("twitter", "consumer_secret", e.target.value);
               }}
@@ -713,9 +731,9 @@ class Setup extends React.Component<SetupProps, any> {
           <Form.Group className="mb-3">
             <Form.Label>Consumer Key</Form.Label>
             <Form.Control
-              type="password"
+              type="text"
               placeholder="Enter consumer key"
-              value={this.state.consumer_key}
+              value={this.state.credential.slack.consumer_key}
               onChange={(e) => {
                 this.updateState("slack", "consumer_key", e.target.value);
               }}
@@ -726,7 +744,7 @@ class Setup extends React.Component<SetupProps, any> {
             <Form.Control
               type="password"
               placeholder="Enter consumer secret"
-              value={this.state.consumer_secret}
+              value={this.state.credential.slack.consumer_secret}
               onChange={(e) => {
                 this.updateState("slack", "consumer_secret", e.target.value);
               }}