BotFramework-WebChat/samples/05.custom-components/f.password-input/index.html at 9c134d49c9c3c8c9d2e9dd67d1136f161b7749c6 · compulim/BotFramework-WebChat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html lang="en-US">
  <head>
    <title>Web Chat: Password input activity</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--
      For simplicity and code clarity, we are using Babel and React from unpkg.com.
    -->
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>
    <!--
      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to using Web Chat's latest bits:
      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
    -->
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        height: 100%;
        width: 100%;
      }

      .passwordInput {
        margin: 10px;
      }

      .passwordInput .passwordInput__form {
        background-color: Red;
        border-radius: 3px;
        color: White;
        display: flex;
        font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
        padding: 5px;
      }

      .passwordInput .passwordInput__box {
        display: flex;
        flex: 1;
      }

      .passwordInput .passwordInput__label {
        padding: 10px;
      }

      .passwordInput .passwordInput__input {
        border: 0px;
        border-radius: 3px;
        flex: 1;
        letter-spacing: 0.5em;
        outline: 0;
        padding: 0 10px;
        width: 100%;
      }

      .passwordInput .passwordInput__input:disabled {
        background-color: rgba(255, 255, 255, 0.5);
        color: White;
      }
    </style>
  </head>

  <body>
    <div id="webchat" role="main"></div>
    <script type="text/babel" data-presets="es2015,react,stage-3">
      (async function () {
        'use strict';

        const {
          hooks: { useCreateActivityStatusRenderer, useSendPostBack },
          ReactWebChat
        } = window.WebChat;

        const { useCallback, useState } = window.React;

        const PasswordInputActivity = ({ activity }) => {
          const [twoFACode, setTwoFACode] = useState('');
          const [submitted, setSubmitted] = useState(false);
          const renderActivityStatus = useCreateActivityStatusRenderer()({ activity, sendState: 'sent' });
          const sendPostBack = useSendPostBack();

          const handleCodeChange = useCallback(
            ({ target: { value } }) => {
              setTwoFACode(value);
            },
            [setTwoFACode]
          );

          const handleSubmit = useCallback(
            event => {
              event.preventDefault();

              sendPostBack({ code: twoFACode });
              setSubmitted(true);
            },
            [sendPostBack, setSubmitted, twoFACode]
          );

          return (
            <div className="passwordInput">
              <form className="passwordInput__form" onSubmit={handleSubmit}>
                <label className="passwordInput__box">
                  <span className="passwordInput__label">Please input your 2FA code</span>
                  <input
                    autoComplete="off"
                    autoFocus={true}
                    className="passwordInput__input"
                    disabled={submitted}
                    onChange={handleCodeChange}
                    type="password"
                    value={twoFACode}
                  />
                </label>
              </form>
              {renderActivityStatus({ hideTimestamp: false })}
            </div>
          );
        };

        // In this demo, we are using Direct Line token from MockBot.
        // Your client code must provide either a secret or a token to talk to your bot.
        // Tokens are more secure. To learn about the differences between secrets and tokens
        // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0

        const res = await fetch(
          'https://hawo-mockbot4-token-app.blueriver-ce85e8f0.westus.azurecontainerapps.io/api/token/directline',
          { method: 'POST' }
        );
        const { token } = await res.json();
        const store = createStore();
        const activityMiddleware =
          () =>
          next =>
          ({ activity, ...otherArgs }) => {
            const { name, type } = activity;

            if (type === 'event' && name === 'passwordInput') {
              return () => <PasswordInputActivity activity={activity} />;
            } else {
              return next({ activity, ...otherArgs });
            }
          };

        window.ReactDOM.render(
          <ReactWebChat
            activityMiddleware={activityMiddleware}
            directLine={window.WebChat.createDirectLine({ token })}
            store={store}
          />,
          document.getElementById('webchat')
        );

        store.dispatch({
          type: 'WEB_CHAT/SET_SEND_BOX',
          payload: { text: 'sample:password-input' }
        });

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>