github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/app/(login)/initialization/code/page.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  "use client"
    20  
    21  import {Box, Typography} from "@mui/material";
    22  import { useRouter } from 'next/navigation'
    23  import { useState } from "react";
    24  
    25  import CodeInput from "../../components/CodeInput";
    26  import LoadingButton from "../../components/LoadingButton";
    27  
    28  export default function Home() {
    29  
    30      const router = useRouter()
    31      let [code, _setCode] = useState <number>(0)
    32      let [loading, setLoading] = useState(false);
    33  
    34      const setCode = (code: number) => {
    35  
    36          _setCode(code)
    37  
    38          if(code.toString().length == 6) {
    39              submit(code)
    40          }
    41      }
    42  
    43      async function submit(code: number) {
    44  
    45          setLoading(true)
    46  
    47          console.log(`Submitting code ${code}`)
    48  
    49          let response = await fetch("/api/v1.0/auth/initLogin", {
    50              method: "POST",
    51              headers: {
    52                  "Content-Type": "application/json"
    53              },
    54              body: JSON.stringify({
    55                  "code": code.toString()
    56              })
    57          })
    58  
    59          if(response.ok){
    60              router.push("../password/index.html")
    61          } else {
    62              setLoading(false)
    63          }
    64      }
    65  
    66      function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    67          e.preventDefault()
    68  
    69          if(code.toString().length == 6) {
    70              submit(code)
    71          }
    72      }
    73  
    74      return (
    75          <>
    76              <Box m={"auto"} mt={12}  display={"flex"} flexDirection={"column"}>
    77                  <Box>
    78                      <Typography textAlign={"center"} variant={"h3"} component={"h3"}>
    79                          Activate Origin Website
    80                      </Typography>
    81                      <Typography textAlign={"center"} variant={"h6"} component={"p"}>
    82                          Enter the activation code displayed on the command line
    83                      </Typography>
    84                  </Box>
    85                  <Box pt={3} mx={"auto"}>
    86                      <form onSubmit={onSubmit} action="#">
    87                          <CodeInput setCode={setCode} length={6}/>
    88                          <Box mt={3} display={"flex"}>
    89                              <LoadingButton
    90                                  variant="outlined"
    91                                  sx={{margin: "auto"}}
    92                                  color={"primary"}
    93                                  type={"submit"}
    94                                  loading={loading}
    95                              >
    96                                  <span>Activate</span>
    97                              </LoadingButton>
    98                          </Box>
    99                      </form>
   100  
   101                  </Box>
   102              </Box>
   103          </>
   104      )
   105  }