Feature: invite codes

[noctera]

Status	Type
❌ Hold	Feature

Description

Client side implementation of the invite code structure.

• when server is locked you have to use an invite code for registration
• admins get a temporarily "admin panel" where they can create and delete invite codes (this option will be removed as soon as the admin panel is done)

To do:

• make timespans dropdown menu responsive
• change delete-button hover color
• copy code to clipboard when clicking on code

Motivation and Context

Screenshots / GIFs (if appropriate):

Checklist

• I have read the CONTRIBUTING document.
• I have considered the accessibility of my changes (i.e. did I add proper content descriptions to images, or run my changes with talkback enabled?)
• I have documented my code if needed

Resolves

[luwol03]

Reviewed and tested. But I suggest the following changes to improve the style:

Suggestion

diff --git a/src/Components/InviteCode/InviteCode.jsx b/src/Components/InviteCode/InviteCode.jsx
index 69143ff..ee133d0 100644
--- a/src/Components/InviteCode/InviteCode.jsx
+++ b/src/Components/InviteCode/InviteCode.jsx
@@ -1,10 +1,9 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router";
 
 import RemoveCircleOutlineIcon from "@material-ui/icons/RemoveCircleOutline";
 
-import Button from "../../Components/Button/Button.jsx";
 import CountdownTimer from "../Timer/CountdownTimer.jsx";
 
 import useSnack from "../../hooks/useSnack.js";
@@ -20,8 +19,6 @@ const InviteCode = ({ data }) => {
   const history = useHistory();
   const { showSnack } = useSnack();
 
-  const [showDeleteButton, setShowDeleteButton] = useState(false);
-
   const submitDeletion = useCallback(
     (inviteCode) => {
       deleteInviteCode(inviteCode)
@@ -46,20 +43,12 @@ const InviteCode = ({ data }) => {
   }, [data.code, showSnack, t]);
 
   return (
-    <div
-      className="invite-code"
-      onMouseEnter={() => setShowDeleteButton(true)}
-      onMouseLeave={() => setShowDeleteButton(false)}
-    >
-      <Button
-        appearance={"red"}
-        className={showDeleteButton ? "delete-btn-show" : "delete-btn-hide"}
-        variant="transparent"
-      >
+    <div className="invite-code">
+      <div className="delete-btn">
         <RemoveCircleOutlineIcon onClick={() => submitDeletion(data.code)} />
-      </Button>
-      <div className="heading">
-        <p onClick={copyToClip}>{data.code}</p>
+      </div>
+      <div className="heading" onClick={copyToClip}>
+        <p>{data.code}</p>
       </div>
       <hr />
       <div className="information">
diff --git a/src/Components/InviteCode/InviteCode.scss b/src/Components/InviteCode/InviteCode.scss
index 0e4c829..aa5d6db 100644
--- a/src/Components/InviteCode/InviteCode.scss
+++ b/src/Components/InviteCode/InviteCode.scss
@@ -13,13 +13,18 @@
   flex-direction: column;
   position: relative;
 
-  .delete-btn-show {
+  .delete-btn {
     position: absolute;
-    right: 0;
-    top: 0;
-    align-self: center;
-    padding: 5px;
-    border-radius: 100%;
+    right: 10px;
+    top: 10px;
+    color: $color-red;
+    opacity: 0;
+    transition: 100ms ease-in-out opacity;
+    cursor: pointer;
+  }
+
+  &:hover > .delete-btn {
+    opacity: 1;
   }
 
   .delete-btn-hide {
diff --git a/src/screens/Admin/Admin.jsx b/src/screens/Admin/Admin.jsx
index ec98ab1..1281a57 100644
--- a/src/screens/Admin/Admin.jsx
+++ b/src/screens/Admin/Admin.jsx
@@ -44,14 +44,17 @@ const Admin = () => {
       <div className="admin">
         {serverRegistrationLocked && (
           <>
-            <Button className="add-btn" variant="transparent">
-              <AddCircleOutlinedIcon
-                onClick={() => setShowInviteCodeModal(true)}
-              />
-            </Button>
-            <div className="invite-code-field">
+            <div className="invite-code-controls">
+              <Button className="add-btn" variant="transparent">
+                <AddCircleOutlinedIcon
+                  onClick={() => setShowInviteCodeModal(true)}
+                />
+              </Button>
+            </div>
+
+            <div className="invite-code-container">
               {inviteCodes.map((inviteCode, index) => (
-                <InviteCode key={index} data={inviteCode} />
+                <InviteCode key={inviteCode.code} data={inviteCode} />
               ))}
             </div>
           </>
diff --git a/src/screens/Admin/Admin.scss b/src/screens/Admin/Admin.scss
index 8ef98c1..293f8f6 100644
--- a/src/screens/Admin/Admin.scss
+++ b/src/screens/Admin/Admin.scss
@@ -1,20 +1,21 @@
 .admin {
   width: 100%;
-  height: 100%;
-  max-height: 100%;
-  grid-area: main;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
 
-  .add-btn {
-    margin: 20px 0;
+  .invite-code-controls {
+    .add-btn {
+      margin: 20px 0;
+    }
   }
 
-  .invite-code-field {
-    width: 80%;
-    display: grid;
-    grid-template-columns: repeat(3, 33%);
-    gap: 40px;
+  .invite-code-container {
+    display: flex;
+    padding: 20px;
+    flex-wrap: wrap;
+    gap: 10px;
+    // align-items: center;
   }
 }