Devlog #5 | Developing a webpage as an excuse to learn Rust, Yew and WebAssembly

[{
    "name": "merge-5",
    "flag-sha256": "f0e4c2f76c58916ec258f246851bea091d14d4247a2fc3e18694461b1816e13b"
},
{
    "name": "remote-1",
    "flag-sha256": "699040c7908d5b03ad8dfca650ad30eff01b49571d21b193d4cb43ff05cd1b58"
}]

sudo apt install libssl-dev
sudo apt install pkg-config

use log;

use yew::prelude::{Component, ComponentLink, Properties, html, Html, ShouldRender};
use yew::html::InputData;

pub struct LevelComponent {
    // The link enables us to interact (i.e. reqister callbacks and send messages) with the component itself. See https://yew.rs/docs/en/concepts/components/#create
    link: ComponentLink<Self>,
    // The level's name. This is so the user knows which flag belongs where
    name: String,
    // The flag itself. In the future this will become a hash so that the users can't get the flags using devtools.
    flag: String,
    // The user's guess for the flag, that they are typing
    user_flag: String,
    // Whether the correct flag has been entered.
    flag_correct: bool,
}

// These are the messages (think "events") that can happen in this component.
pub enum LevelMsg {
    // This message indicates that it's time to check the user flag to see if it's the correct one.
    CheckFlag,
    // This message indicates that the user changed the flg they're guessing (when they're typing). 
    // Since we need to pass a value, this message has a parameter - see the `view` and `update` methods to see how this is used.
    UserFlagChanged(String),
}

// See https://yew.rs/docs/en/concepts/components/properties/
// The properties allow enable child and parent components to communicate with each other.
// The parent of a level component is the page itself.
#[derive(Clone, PartialEq, Properties)]
pub struct LevelProps {
    // This prop is the level's name. Passed from parent and won't change
    pub name: String,
    // This prop is the level's flag. Passed from parent and won't change
    pub flag: String,
    // This prop indicates whether the user's flag is correct. Not passed from parent, but rather used to communicate back to it from the level.
    #[prop_or(false)]
    pub flag_correct: bool,
}

// See https://yew.rs/docs/en/concepts/components/
// `Component` is a Trait (see https://doc.rust-lang.org/book/ch10-02-traits.html), 
// The source code of `Component` is here: https://github.com/yewstack/yew/blob/master/yew/src/html/mod.rs#L30 
impl Component for LevelComponent {
    // Overriding properties since we have our own.
    type Properties = LevelProps;
    // Overriding `Message` since we have our own messages.
    type Message = LevelMsg;

    // See https://yew.rs/docs/en/concepts/components/#create
    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
        log::debug!("Creating level {} component", props.name.clone());
        Self {
            link: link,
            // Pass the name from the parent component
            name: props.name,
            // Pass the flag from the parent component
            flag: props.flag,
            // The initial user flag is empty
            user_flag: "".to_string(),
            // This has a default value of `false`. Not passed from parent
            flag_correct: props.flag_correct,
        }
    }

    // See https://yew.rs/docs/en/concepts/components/#update
    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        log::debug!("Updating level {} component", self.name.clone());
        // Do something different depending on the update message.
        match msg {
            LevelMsg::CheckFlag => {
                log::debug!("In level {}, checking flag", self.name.clone());
                // TODO - Change this to hash instead of flag
                self.flag_correct = self.user_flag == self.flag;
                true  // Re-render
            }
            LevelMsg::UserFlagChanged(new_user_flag) => {
                log::debug!("In level {}, User flag changed from {} to {}", self.name.clone(), self.user_flag.clone(), new_user_flag.clone());
                self.user_flag = new_user_flag;
                self.update(LevelMsg::CheckFlag);
                true  // Re-render
            }
        }
    }

    // See https://yew.rs/docs/en/concepts/components/#change
    // We're not using "change"
    fn change(&mut self, _props: Self::Properties) -> ShouldRender{
        log::debug!("Changing level {} component", self.name.clone());
        false
    }

    // See https://yew.rs/docs/en/concepts/components/#view
    // In this method we're declaring what the element looks like. This is very reminiscent of JSX and React.
    fn view(&self) -> Html {
        log::debug!("Viewing level {} component", self.name.clone());

        // TODO - move to "create"
        let label_text = self.name.clone() + "'s flag goes here 🚩";
        let input_id = self.name.clone() + "-id";

        // Creating the element as variables makes it clearer - similar to functional elements in react

        // This element just prints the component info to make it easier to develop. Will delete soon :)
        let debug_info_element = html! { 
            <pre>
                { 
                    format!("DEBUG: I am a level component! Name: {} | Flag: {} | Status: {}", 
                        self.name.clone(),
                        self.flag.clone(),
                        self.flag_correct) 
                }
                <br/>
            </pre> 
        };

        // This element is the input for the flag.
        let input_element = html! {
            <div class="input-effect">
                <input 
                    id={ input_id.clone() } 
                    /* Change the background colour effect according to the status. If the flag is correct, the class will be "effect-8 effect-10-good",
                     * which paints the BG of the text box green (and stays). Otherwise, paint it in red (as long as it's in focus).
                     */
                    class={ format!("effect-8 effect-10-{}", if self.flag_correct { "good" } else { "bad" }) } 
                    type="text" 
                    placeholder={label_text.clone()} 
                    // Whenever the user inputs something into the box, notify this LevelComponent that the user flag has changed.
                    oninput=self.link.callback(|e: InputData| LevelMsg::UserFlagChanged(e.value))  // <-- important line!
                />
                // Cosmetics
                <span class="focus-bg"></span><span class="focus-border"><i></i></span>
            </div>
        };

        // This element is for a11y - don't indicate status with color only, but with an emoji as well.
        let status_element = html! {
            <pre class="status"> { get_correct_emoji(self.flag_correct) }</pre>
        };

        // This is the complete HTML component we're returning from `view`.
        html! {
            <span>
                // TODO - delete this
                { debug_info_element }
                <div>
                    { input_element }
                    { status_element }
                </div>
            </span>
        }
    }
}

#[wasm_bindgen(start)]
pub fn run_app() {
    wasm_logger::init(wasm_logger::Config::default());
    App::<SubmitFlagsPage>::new().mount_to_body();
}

struct LevelInfo {
    name: String, 
    flag: String,
}

// in SubmitFlagsPage::view()...
    <div id="level-checkers" class="content">
        { for self.levels.iter().map(create_component_from_level_info) }
    </div>

fn create_component_from_level_info(level_info: &LevelInfo) -> Html {
    html! {
        <LevelComponent name=level_info.name.clone() flag=level_info.flag.clone() />
    }
}

fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
    // TODO change to read from file
    let const_level_1 = LevelInfo {name: "name1".to_string(), flag: "flag1".to_string()};
    let const_level_2 = LevelInfo {name: "name2".to_string(), flag: "flag2".to_string()};

    let levels_info_vector = vec![const_level_1, const_level_2];

    Self {
        link: link,
        levels: levels_info_vector,
        all_flags_done: false,
    }
}

use std::str;
use sha2::{Sha256, Digest};

// ...

impl Component for LevelComponent {
// ...

    // See https://yew.rs/docs/en/concepts/components/#update
    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        // Do something different depending on the update message.
        match msg {
            LevelMsg::CheckFlag => {
                // Hash the user flag to an array
                let hashed_user_flag_arr = Sha256::digest(self.user_flag.as_bytes());
                // Cast the array to a string
                let hashed_user_flag_str: String = format!("{:x}", hashed_user_flag_arr);
                log::debug!("update::{}, user flag {}, user hash {}, actual flag hash {}", 
                    self.name.clone(), 
                    self.user_flag.clone(), 
                    hashed_user_flag_str.clone(), 
                    self.flag.clone());
                // Compare user hash to our hash
                self.is_flag_correct = hashed_user_flag_str == self.flag;
                true  // Re-render
            }
            LevelMsg::UserFlagChanged(new_user_flag) => {
                log::debug!("update::{}, User flag changed from {} to {}", self.name.clone(), self.user_flag.clone(), new_user_flag.clone());
                self.user_flag = new_user_flag;
                self.update(LevelMsg::CheckFlag);
                true  // Re-render
            }
        }
    }
// ...
}

pub struct GetFlagsService {
    file_path: &'static str,
}

impl GetFlagsService {
    pub fn new(file_path: &'static str) -> Self {
        Self {
            file_path,
        }
    }

    pub fn get_response(&mut self, callback: Callback<Result<LevelsInfo, Error>>) -> FetchTask {
        let handler = move |response: Response<Result<String, Error>>| {
            let (head, body) = response.into_parts();
            if head.status.is_success() {
                log::debug!("Response is a success");
                let body_value = body.unwrap();
                log::debug!("here's the body: {}", body_value);
                let parsed = try_to_parse_levels_json(&body_value);
                match parsed {
                    Ok(v) => {
                        log::debug!("JSON conversion went well! Found {} levels", v.levels.len());
                        callback.emit(Ok(v))
                    }
                    Err(e) => {
                       callback.emit(Err(anyhow!("{:?}", e)));
                    }
                }
            } else {
                callback.emit(Err(anyhow!(
                    "{}: error getting levels from server",
                    head.status
                )))
            }
        };

        // Local server
        let url = format!("/{}", self.file_path);

        let request = Request::get(url.clone().as_str()).header("Cache-Control", "no-cache").body(Nothing).unwrap();
        log::debug!("Created get request to URI {}", request.uri());
        FetchService::fetch(request, handler.into()).unwrap()
    }
}

fn try_to_parse_levels_json(data: &str) -> Result<LevelsInfo, serde_json::Error> {
    let parsed: LevelsInfo = serde_json::from_str(data)?;
    Ok(parsed)
}

pub struct MainPage {
    link: ComponentLink<Self>,
    levels: Option<Vec<LevelInfo>>,
    all_flags_done: bool,
    error: String,

    // Fetch-related members
    flags_service: GetFlagsService,
    flags_service_response: Option<LevelsInfo>,
    flags_service_callback: Callback<Result<LevelsInfo, Error>>,
    flags_service_task: Option<FetchTask>,
    requested_flags: bool,
}

#[derive(Debug)]
pub enum MainPageMsg {
    // Fetch-related messages
    GetFlagsResponse,
    FlagsResponseReady(Result<LevelsInfo, Error>),
}

impl Component for MainPage {
    type Message = MainPageMsg;
    type Properties = ();
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link: link.clone(),
            levels: None,
            all_flags_done: false,
            error: "".to_string(),

            flags_service: GetFlagsService::new("levels_info.json"),
            flags_service_response: None,
            flags_service_callback: link.callback(MainPageMsg::FlagsResponseReady),
            flags_service_task: None,
            requested_flags: false
        }
    }
// ...
}

fn update(&mut self, msg: Self::Message) -> ShouldRender {
  log::debug!("MainPage: Update message {:?}", msg);
  match msg {
      MainPageMsg::GetFlagsResponse => {
          log::debug!("Sending a get response");
          let task = self.flags_service.get_response(self.flags_service_callback.clone());
          log::debug!("Sent a get response");
          self.flags_service_task = Some(task);
          self.requested_flags = true;
      }
      MainPageMsg::FlagsResponseReady(Ok(response)) => {
          self.flags_service_response = Some(response);
          log::debug!("Got response: {:?}", Json(self.flags_service_response.clone()));
          // Finally, get the levels from the response. Phew!
          self.levels = Some(self.flags_service_response.as_mut().unwrap().levels.clone());
      }
      MainPageMsg::FlagsResponseReady(Err(err)) => {
          log::error!("Error while trying to fetch flags: {:?}", err);
          self.error = format!("{:?}", err);
      }
  }
  true
}

    fn view(&self) -> Html {
        // If you didn't request flags yet, try to.
        if !self.requested_flags {
            log::debug!("Requesting flags for the first time.");
            self.link.send_message(MainPageMsg::GetFlagsResponse);
        }

        html! {
            <>
                <main class="site-main section-inner thin animated fadeIn">
                    <h1 id="home-title">{ "Make Git Better CTF - Submit Flags" }</h1>
                    { self.get_levels_comp() }
                </main>
            </>
        }
    }

// Extra, non-component functions for MainPage
impl MainPage {
    fn get_levels_comp(&self) -> Html {
        match &self.levels {
            None => {
                // Check if still laoding, or an actual error
                if self.error.is_empty() {  // Still loading
                    html! {
                        <>
                            <div class="spinner"></div>
                            <p>{ "No levels yet. Loading from server. If this is taking more than a few seconds, check the console logs." }</p>
                        </>
                    }
                } else {  // Error state
                    html! {
                        <>
                            <div class="spinner"></div>
                            <p>{ format!("An error has occured! Details:") }</p>
                            <pre> { self.error.clone() } </pre>
                            <p>{ "Please reach out to Shay Nehmad (@ShayNehmad on Twitter) with the details!" }</p>
                        </>
                    }
                }
            }
            Some(levels) => {
                html! {
                    <div id="level-checkers" class="content">
                        {
                            for levels.iter().map(create_component_from_level_info)
                        }
                    </div>
                }
            }
        }
    }
}

#[derive(Debug)]
pub struct SingleFlagStatus {
    pub level_name: String,
    pub is_correct: bool
}

#[derive(Debug)]
pub enum MainPageMsg {
    CheckSingleFlag(SingleFlagStatus),
    // Fetch-related messages
    GetFlagsResponse,
    FlagsResponseReady(Result<LevelsInfo, Error>),
}

pub type CheckFlagCallback = Callback<SingleFlagStatus>;

use super::common::{SingleFlagStatus, CheckFlagCallback};


pub struct LevelComponent {
    // ... snip ...
    // Callback to update parent that flag has been solved
    check_callback: CheckFlagCallback,
}

// ... snip ...
pub struct LevelProps {
    // ... snip ...
    // Callback to update parent that flag has been solved
    pub check_callback: CheckFlagCallback,
}

impl Component for LevelComponent {
    type Properties = LevelProps;
    type Message = LevelMsg;

    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            // ... snip ...
            check_callback: props.check_callback,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            LevelMsg::CheckFlag => {
                // ... snip ...
                // update parent via callback
                let status = SingleFlagStatus { level_name: self.name.clone(), is_correct: self.is_flag_correct };
                self.check_callback.emit(status);
                
                true  // Re-render
            }
            // ... snip ...
        }
    }

use super::common::{LevelInfo, LevelsInfo, MainPageMsg, CheckFlagCallback};

pub struct MainPage {
    // ... snip ...
    // The status of each level component (name to is_correct)
    levels_status: HashMap<String, bool>,

    // ... snip ...
}

impl Component for MainPage {
    type Message = MainPageMsg;
    
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            // ... snip ...
            levels_status: HashMap::new(),
            // ... snip ...
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            // ... snip ...
            MainPageMsg::FlagsResponseReady(Ok(response)) => {
                self.flags_service_response = Some(response);
                // ... snip ...
                for level in self.levels.as_ref().unwrap().iter() {
                    self.levels_status.insert(level.name.clone(), false);
                }
            }
            // ... snip ...
        }
        true
    }

impl MainPage {
    fn get_levels_comp(&self) -> Html {
        match &self.levels {
            None => {
                // ... snip ...
            }
            Some(levels) => {
                let render_level_component = |level| {
                    self.create_component_from_level_info(level)
                };
                
                html! {
                    <div id="level-checkers" class="content">
                        { 
                            for levels.iter().map(render_level_component)
                        }
                    </div>
                }
            }
        }
    }

    fn create_component_from_level_info(&self, level_info: &LevelInfo) -> Html {
        let callback: CheckFlagCallback = self.link.clone().callback(MainPageMsg::CheckSingleFlag);
        html! {
            <LevelComponent name=level_info.name.clone() flag=level_info.flag.clone() check_callback=callback />
        }
    }
}

impl Component for MainPage {
    // ... snip ...
    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            // ... snip ...
            // Callback for level component
            MainPageMsg::CheckSingleFlag(status) => {
                *self.levels_status.get_mut(&status.level_name).unwrap() = status.is_correct;
            }
        }
        true
    }

    fn view(&self) -> Html {
        // ... snip ...
        html! {
            // ... snip ...
                { self.get_totals_comp() }
            // ... snip ...
        }
    }

impl MainPage {
    fn get_totals_comp(&self) -> Html {
        if self.levels_status.is_empty() {
            html! {}

        } else {
            let mut len = 0;
            let mut counter = 0;
            for (_, is_correct) in self.levels_status.iter() {
                len += 1;
                if *is_correct { 
                    counter += 1; 
                }
            };

            let victory_comp: Html;

            if len == counter {
                victory_comp = html! {
                    <>
                        // fireworks! 
                        <div class="pyro"><div class="before"></div><div class="after"></div></div>
                        <div class="content">
                            <h1>{ "You win! 🏆" }</h1>
                            <p>
                                { "Screenshot this and send it to me to get into the " } 
                                <a target="_blank" rel="noopener noreferrer" href="https://www.mrnice.dev/about/#nc-shay-nehmad-443">{"make-git-better Hall of Fame"}</a>{"! "}
                                <a target="_blank" rel="noopener noreferrer" href="https://www.mrnice.dev/about/#nc-shay-nehmad-443">{"Here's a list of ways to contact me."}</a>
                            </p>
                            <h2>{ "Thanks for playing! 😀" }</h2>
                        </div>
                    </>
                };
            } else { victory_comp = html! { }; }

            html! {
                <div id="totals">
                    <pre>{ format!("{} / {}", counter, len) }</pre>
                    { victory_comp }
                </div>
            }
        }
    }
// ... snip ...