ux: session ID input validation

When creating a new session, validate that it meets the following conditions:

 - must start with an alphabetical
 - can be composed of alphanumerics with hyphens
 - can be length 1 or longer
 - cannot begin or end with a hyphen
This commit is contained in:
tomholford 2022-03-03 16:58:48 -06:00
parent 25a1c79aa3
commit 1a50957950
2 changed files with 15 additions and 6 deletions

View File

@ -3,29 +3,28 @@ import api from './api';
import React from 'react'; import React from 'react';
import useTermState from './state'; import useTermState from './state';
import { Tab } from './Tab'; import { Tab } from './Tab';
import { SESSION_ID_REGEX } from './constants';
export const Tabs = () => { export const Tabs = () => {
const { sessions, names } = useTermState(); const { sessions, names } = useTermState();
const onAddClick = () => { const onAddClick = () => {
const name = prompt('please entew a session name uwu'); const name = prompt('please entew a session name uwu');
if (!name) { if (!name || !SESSION_ID_REGEX.test(name) || names.includes(name)) {
console.log('invalid session name:', name);
return; return;
} }
//TODO name must be @ta api.poke(pokeTask(name, { open: { term: 'hood', apps: [{ who: '~' + (window as any).ship, app: 'dojo' }] } }));
api.poke(pokeTask(name, { open: { term: 'hood', apps: [{ who: '~'+(window as any).ship, app: 'dojo' }] } }));
useTermState.getState().set(state => { useTermState.getState().set(state => {
state.names = [name, ...state.names].sort(); state.names = [name, ...state.names].sort();
state.selected = name; state.selected = name;
state.sessions[name] = null; state.sessions[name] = null;
}); });
} }
return ( return (
<div className="tabs"> <div className="tabs">
{ names.map((n, i) => { {names.map((n, i) => {
return ( return (
<Tab session={sessions[n]} name={n} key={i} /> <Tab session={sessions[n]} name={n} key={i} />
); );

View File

@ -1 +1,11 @@
export const DEFAULT_SESSION = ''; export const DEFAULT_SESSION = '';
/**
* Session ID validity:
*
* - must start with an alphabetical
* - can be composed of alphanumerics with hyphens
* - can be length 1 or longer
* - cannot begin or end with a hyphen
*/
export const SESSION_ID_REGEX = /(^[a-z]{1}[a-z\d\-]*[a-z\d]{1}$)|(^[a-z]{1}$)/;