zitadel

1
import React, { useContext, useEffect } from "react";
2
import { EnvironmentContext } from "../utils/environment";
3
import styles from "../css/environment.module.css";
4
import Interpolate from "@docusaurus/Interpolate";
5
import CodeBlock from "@theme/CodeBlock";
6

7
export function SetEnvironment() {
8
  const {
9
    instance: [instance, setInstance],
10
    clientId: [clientId, setClientId],
11
  } = useContext(EnvironmentContext);
12

13
  useEffect(() => {
14
    const params = new URLSearchParams(window.location.search); // id=123
15
    const clientId = params.get("clientId");
16
    const instance = params.get("instance");
17

18
    const localClientId = localStorage.getItem("clientId");
19
    const localInstance = localStorage.getItem("instance");
20

21
    setClientId(clientId ?? localClientId ?? "");
22
    setInstance(instance ?? localInstance ?? "");
23
  }, []);
24

25
  function setAndSaveInstance(value) {
26
    if (instance !== value) {
27
      localStorage.setItem("instance", value);
28
      setInstance(value);
29
    }
30
  }
31

32
  function setAndSaveClientId(value) {
33
    if (clientId !== value) {
34
      localStorage.setItem("clientId", value);
35
      setClientId(value);
36
    }
37
  }
38

39
  return (
40
    <div>
41
      <div className={styles.inputwrapper}>
42
        <label className={styles.label}>Your instance domain</label>
43
        <input
44
          className={styles.input}
45
          id="instance"
46
          value={instance}
47
          onChange={(event) => {
48
            const value = event.target.value;
49
            if (value) {
50
              setAndSaveInstance(value);
51
            } else {
52
              localStorage.removeItem("instance");
53
            }
54
          }}
55
        />
56
      </div>
57

58
      <br />
59

60
      <div className={styles.inputwrapper}>
61
        <label className={styles.label}>Client ID</label>
62
        <input
63
          className={styles.input}
64
          id="clientid"
65
          value={clientId}
66
          onChange={(event) => {
67
            const value = event.target.value;
68
            if (value) {
69
              setAndSaveClientId(value);
70
            } else {
71
              localStorage.removeItem("clientId");
72
            }
73
          }}
74
        />
75
      </div>
76
    </div>
77
  );
78
}
79

80
export function Env({ name }) {
81
  const env = useContext(EnvironmentContext);
82
  const variable = env[name];
83

84
  return <div>{variable}</div>;
85
}
86

87
export function EnvInterpolate({ children }) {
88
  const {
89
    instance: [instance],
90
    clientId: [clientId],
91
  } = useContext(EnvironmentContext);
92

93
  return (
94
    <Interpolate
95
      values={{
96
        clientId,
97
        instance,
98
      }}
99
    >
100
      {children}
101
    </Interpolate>
102
  );
103
}
104

105
export function EnvCode({
106
  language,
107
  title,
108
  code,
109
  showLineNumbers = false,
110
  children,
111
}) {
112
  const {
113
    instance: [instance],
114
    clientId: [clientId],
115
  } = useContext(EnvironmentContext);
116

117
  return (
118
    <CodeBlock
119
      language={language}
120
      title={title}
121
      showLineNumbers={showLineNumbers}
122
    >
123
      <Interpolate
124
        values={{
125
          clientId,
126
          instance,
127
        }}
128
      >
129
        {children}
130
      </Interpolate>
131
    </CodeBlock>
132
  );
133
}
134